:root{
    --bg: #FBF6D6;            /* cream */
    --bg-soft: #EEEFC2;       /* paler green-cream for sections */
    --ink: #161616;
    --ink-2: #5b5b56;
    --ink-3: #8a8a82;
    --paper: #FBFAEF;         /* badge/note paper */
    --sage: #C8D6AA;          /* lanyard green */
    --sage-2: #DDE6BE;        /* sage tint */
    --tape: rgba(218, 198, 110, .55);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.06);
    --shadow-paper: 0 1px 1px rgba(0,0,0,.05), 0 14px 24px -10px rgba(0,0,0,.18);
    --radius: 22px;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{ overflow-x: clip; }
  body{
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  a{color:inherit; text-decoration:none}
  button{font: inherit; color: inherit}

  /* ---------- Layout ---------- */
  main{display:flex; flex-direction:column}
  section{position:relative; padding: 0 24px}
  .wrap{max-width: 1200px; margin: 0 auto; width:100%}

  /* ---------- HOME ---------- */
  #home{
    min-height: 100vh;
    background: var(--bg);
    overflow: hidden;
    padding: 0;
    position: relative;
    display: flex;
    align-items: flex-end;
  }
  .home-stage{
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
  }

  .home-copy{
    position: relative;
    z-index: 2;
    padding: 0 0 28vh 7vw;
    max-width: 80vw;
  }

  .home-heading{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 6.6vw, 104px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .home-heading .line{ display: block; }
  .home-heading em{
    font-family: "Kite One", serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(56px, 6.4vw, 104px);
    letter-spacing: -0.005em;
  }
  .home-heading .star-mark{
    display: inline-block;
    vertical-align: top;
    width: .7em; height: .7em;
    margin-left: .18em;
    margin-top: -.05em;
    transform: translateY(-.4em) rotate(-18deg);
  }
  .home-heading .star-mark svg{ width:100%; height:100%; display:block }
  .home-heading .star-mark img{ width:100%; height:100%; display:block; object-fit: contain }

  .home-tag{
    margin: 34px 0 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 500;
    color: var(--ink-2);
    line-height: 1.4;
  }

  .home-portrait{
    position: absolute;
    right: 0; bottom: 0;
    width: clamp(260px, 26vw, 440px);
    height: auto;
    z-index: 1;
    user-select: none;
  }
  .home-portrait img{
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
  }
  .home-portrait .face-blink{
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: jan-blink 2.5s steps(1, end) infinite;
  }
  @keyframes jan-blink {
    0%, 89%   { opacity: 0; }
    90%, 100% { opacity: 1; }
  }

  /* ---------- WORK & EXPERIENCES ---------- */
  #projects{
    background: var(--bg-soft);
    border-radius: 0;
    padding-top: 88px;
    padding-bottom: 200px;
    position: relative;
    z-index: 1;
  }
  #projects h2{
    margin: 0 0 64px;
    text-align:left;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.025em;
    display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  }
  #projects h2 .quip,
  .exp-head .quip{
    font-family: "Kite One", "Caveat", cursive;
    font-size: clamp(18px, 2vw, 24px);
    font-style: normal;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0;
  }
  #projects h2 .quip kbd,
  .exp-head .quip kbd{
    font: inherit;
    background: none;
    border: none;
    padding: 0;
  }
  .work-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  ._unused{
    gap: 32px;
  }
  .work-card{
    display:flex; flex-direction:column; gap: 18px;
    cursor: default;
    /* Emil's signature spring-out easing — feels physical without overshoot */
    transition: transform .55s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .work-link{
    display: block;
    /* Active-state press is applied to the link wrapper so click feedback wins
       over hover, and resets cleanly on mouseup */
    transition: transform .55s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  .work-link .work-card{ cursor: pointer; }
  .work-card:hover{ transform: translateY(-6px); }
  .work-link:active{
    transform: translateY(-1px) scale(.985);
    transition: transform .12s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .work-thumb{
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.04);
    position: relative;
    overflow:hidden;
    transition: box-shadow .55s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .work-card:hover .work-thumb{
    box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 22px 44px -12px rgba(0,0,0,.18);
  }

  /* peeking head — hidden behind the thumb's top edge, slides up on hover */
  .work-thumb{ overflow: visible; }
  .work-peek{
    position: absolute;
    left: 22%;
    bottom: 100%;
    width: clamp(48px, 4.8vw, 60px);
    aspect-ratio: 1492 / 1336;
    height: auto;
    object-fit: contain;
    object-position: top;
    pointer-events: none;
    transform: translate(-50%, 110%) rotate(-4deg);
    opacity: 0;
    /* Softer spring — gentle overshoot, less snappy */
    transition:
      transform .75s cubic-bezier(0.34, 1.2, 0.64, 1),
      opacity .3s ease;
    z-index: -1;
  }
  .work-card:hover .work-peek{
    transform: translate(-50%, 18%) rotate(0deg);
    opacity: 1;
  }

  /* Work image (the product card thumbnail) — subtle parallax-style scale on
     hover, clipped to the thumb's rounded bounds via clip-path so it doesn't
     bleed past the corners (the parent uses overflow: visible so the peek can
     escape). */
  .work-image{
    clip-path: inset(0 round 16px);
    transition: transform .8s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .work-card:hover .work-image{
    transform: scale(1.04);
  }
  @media (prefers-reduced-motion: reduce){
    .work-card, .work-link, .work-thumb, .work-image, .work-peek{
      transition: none;
    }
    .work-card:hover{ transform: none; }
    .work-card:hover .work-image{ transform: none; }
  }
  .work-thumb::after{
    /* subtle stripe placeholder */
    content:""; position:absolute; inset:0;
    background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.018) 0 14px, transparent 14px 28px);
  }
  .work-thumb:has(.work-image)::after{ display: none; }
  .work-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    z-index: 1;
  }
  .work-meta{padding: 0 6px}
  .work-meta .t{font-size: 20px; font-weight: 600; letter-spacing: -.01em}
  .work-meta .s{margin-top: 4px; color: var(--ink-3); font-size: 14px; font-weight: 500}

  /* ---- Work layout: tall ---- */
  body[data-work-layout="tall"] .work-thumb{ aspect-ratio: 3/4; border-radius: 28px; }
  body[data-work-layout="tall"] .work-meta{ text-align: center; padding: 0 4px; }
  body[data-work-layout="tall"] .work-meta .t{ font-size: 24px; }

  /* ---- Work layout: magazine ---- */
  body[data-work-layout="magazine"] .work-grid{
    grid-template-columns: 1fr;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
  }
  body[data-work-layout="magazine"] .work-card{
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  body[data-work-layout="magazine"] .work-card:nth-child(even){ flex-direction: row-reverse; }
  body[data-work-layout="magazine"] .work-thumb{ flex: 0 0 58%; aspect-ratio: 5/4; }
  body[data-work-layout="magazine"] .work-meta{ flex: 1; padding: 0; }
  body[data-work-layout="magazine"] .work-meta .t{ font-size: 38px; line-height: 1.1; }
  body[data-work-layout="magazine"] .work-meta .s{ font-size: 18px; margin-top: 12px; }

  /* ---- Work layout: overlay ---- */
  body[data-work-layout="overlay"] .work-card{ position: relative; gap: 0; }
  body[data-work-layout="overlay"] .work-thumb{ aspect-ratio: 4/5; border-radius: 24px; }
  body[data-work-layout="overlay"] .work-thumb::before{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55) 100%);
  }
  body[data-work-layout="overlay"] .work-meta{
    position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
    color: #fff; padding: 0;
  }
  body[data-work-layout="overlay"] .work-meta .t{ color: #fff; }
  body[data-work-layout="overlay"] .work-meta .s{ color: rgba(255,255,255,.78); }

  /* hide body by default; layouts that want it show it */
  .work-meta .b{ display: none; }

  /* ---- Work layout: stack (horizontal cards, image left/text right) ---- */
  body[data-work-layout="stack"] .work-grid{
    grid-template-columns: 1fr;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
  }
  body[data-work-layout="stack"] .work-card{
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
  body[data-work-layout="stack"] .work-thumb{
    flex: 0 0 324px;
    width: 324px;
    height: 216px;
    aspect-ratio: auto;
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 18px 36px -16px rgba(0,0,0,.18);
  }
  body[data-work-layout="stack"] .work-thumb::after{
    background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 14px, transparent 14px 28px);
  }
  body[data-work-layout="stack"] .work-meta{
    flex: 1; padding: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  body[data-work-layout="stack"] .work-meta .t{
    font-size: clamp(17px, 1.92vw, 27px);
    font-weight: 600;
    letter-spacing: -.02em;
  }
  body[data-work-layout="stack"] .work-meta .s{ display: none; }
  body[data-work-layout="stack"] .work-meta .b{
    display: block;
    font-size: 17px;
    line-height: 1.65;
    margin: 14px 0 0;
    color: var(--ink-2);
    max-width: 70ch;
  }

  /* ---------- RECENT EXPERIENCE ---------- */
  .exp{
    margin-top: 140px;
    scroll-margin-top: 200px;
  }
  .exp-head{
    display:flex; align-items:baseline; justify-content:flex-start; gap: 22px;
    margin-bottom: 56px;
    flex-wrap: wrap;
  }
  .exp-head h3{
    margin: 0;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1;
    display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  }

  /* shared bits used across layouts */
  .exp-eyebrow{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(22,22,22,.55);
    margin-bottom: 12px;
    display: none; /* shown by specific layouts */
  }
  .exp-feature{
    position: relative;
    background: var(--sage);
    border-radius: 28px;
    padding: 38px 38px 28px;
    min-height: 320px;
    overflow: hidden;
    color: var(--ink);
    box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 18px 40px -18px rgba(56,80,40,.35);
  }
  .exp-feature-text{ position: relative; z-index: 2; }
  .exp-role{
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .exp-company{
    margin-top: 6px;
    color: rgba(22,22,22,.66);
    font-weight: 500;
    font-size: 18px;
  }
  .exp-watermark{
    position: absolute;
    right: -10px; bottom: -36px;
    font-size: 280px;
    line-height: 1;
    font-weight: 800;
    color: rgba(255,255,255,.55);
    pointer-events:none;
    user-select:none;
    letter-spacing: -.04em;
  }
  .exp-date{
    position: relative; z-index: 2;
    display: inline-block;
    margin-top: 36px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(2px);
  }

  .exp-copy p{
    margin: 0 0 14px;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.55;
    max-width: 50ch;
  }
  .exp-copy p:last-child{ margin-bottom: 0; }

  .exp-photos{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .exp-photo{
    aspect-ratio: 1/1.05;
    border-radius: 14px;
    background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 10px, transparent 10px 20px),
      var(--sage-2);
    position: relative;
    display:flex; align-items:center; justify-content:center;
  }
  .exp-photo-label{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(22,22,22,.32);
  }

  /* ===================================================
     LAYOUT 1 — CARD  (default: featured card + side stack)
     =================================================== */
  body[data-exp-layout="card"] .exp-grid,
  .exp-grid{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
  }
  body[data-exp-layout="card"] .exp-right{
    display:flex; flex-direction: column; gap: 32px;
    padding-top: 12px;
  }
  body[data-exp-layout="card"] .exp-photos{
    background: var(--paper);
    border-radius: 22px;
    padding: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 36px rgba(0,0,0,.06);
  }

  /* ===================================================
     LAYOUT 2 — BANNER  (full-width hero strip)
     =================================================== */
  body[data-exp-layout="banner"] .exp-grid{
    display: block;
  }
  body[data-exp-layout="banner"] .exp-feature{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 56px 56px 56px;
    min-height: 0;
  }
  body[data-exp-layout="banner"] .exp-feature-text .exp-role{
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.05;
  }
  body[data-exp-layout="banner"] .exp-feature-text .exp-company{
    font-size: 22px;
    margin-top: 10px;
  }
  body[data-exp-layout="banner"] .exp-watermark{
    font-size: 360px;
    right: -30px;
    bottom: -90px;
    color: rgba(255,255,255,.4);
  }
  body[data-exp-layout="banner"] .exp-date{
    margin-top: 24px;
  }
  body[data-exp-layout="banner"] .exp-right{
    margin-top: 48px;
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 56px;
    align-items: start;
  }
  body[data-exp-layout="banner"] .exp-photos{
    background: var(--paper);
    border-radius: 18px;
    padding: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* ===================================================
     LAYOUT 3 — SPLIT  (left: text+meta, right: photo column)
     =================================================== */
  body[data-exp-layout="split"] .exp-grid{
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: stretch;
  }
  body[data-exp-layout="split"] .exp-left{
    display: flex; flex-direction: column; gap: 32px;
  }
  body[data-exp-layout="split"] .exp-feature{
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
  }
  body[data-exp-layout="split"] .exp-feature .exp-watermark{ display: none; }
  body[data-exp-layout="split"] .exp-eyebrow{ display: block; margin-bottom: 18px; }
  body[data-exp-layout="split"] .exp-feature .exp-date{ display: none; }
  body[data-exp-layout="split"] .exp-feature-text .exp-role{
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.03em;
  }
  body[data-exp-layout="split"] .exp-feature-text .exp-company{
    font-size: 24px;
    margin-top: 14px;
    color: var(--ink-2);
  }
  body[data-exp-layout="split"] .exp-right .exp-copy{ display:none; }
  body[data-exp-layout="split"] .exp-left .exp-copy{
    display: block;
    border-top: 1px solid rgba(22,22,22,.12);
    padding-top: 28px;
  }
  body[data-exp-layout="split"] .exp-photos{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
    height: 100%;
  }
  body[data-exp-layout="split"] .exp-photo{
    aspect-ratio: auto;
    min-height: 180px;
    border-radius: 18px;
  }

  /* "exp-copy" appears in both columns; layout decides which */
  body[data-exp-layout="split"] .exp-feature::after{
    content: ""; display: block;
  }

  /* ===================================================
     LAYOUT 4 — EDITORIAL  (centered, magazine feature)
     =================================================== */
  body[data-exp-layout="editorial"] .exp-grid{
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
  body[data-exp-layout="editorial"] .exp-feature{
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    text-align: center;
  }
  body[data-exp-layout="editorial"] .exp-feature .exp-watermark,
  body[data-exp-layout="editorial"] .exp-feature .exp-date{ display: none; }
  body[data-exp-layout="editorial"] .exp-eyebrow{ display: block; margin-bottom: 18px; }
  body[data-exp-layout="editorial"] .exp-feature-text .exp-role{
    font-size: clamp(44px, 5.4vw, 80px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.03em;
    max-width: 18ch; margin: 0 auto;
  }
  body[data-exp-layout="editorial"] .exp-feature-text .exp-company{
    font-size: 22px;
    margin-top: 16px;
    font-style: italic;
    font-family: "Kite One", serif;
    color: var(--ink-2);
  }
  body[data-exp-layout="editorial"] .exp-right{
    margin-top: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 56px;
  }
  body[data-exp-layout="editorial"] .exp-copy{
    columns: 2;
    column-gap: 56px;
    max-width: 760px;
    text-align: left;
  }
  body[data-exp-layout="editorial"] .exp-copy p{
    break-inside: avoid;
    max-width: none;
  }
  body[data-exp-layout="editorial"] .exp-photos{
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
  }
  body[data-exp-layout="editorial"] .exp-photo{
    aspect-ratio: 4/5;
    border-radius: 4px;
    background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 10px, transparent 10px 20px),
      var(--paper);
    border: 1px solid rgba(22,22,22,.08);
  }

  /* ===================================================
     LAYOUT 5 — SCRAPBOOK  (playful, taped polaroids)
     =================================================== */
  body[data-exp-layout="scrapbook"] .exp-grid{
    display: block;
    position: relative;
    min-height: 620px;
    padding: 40px 0 80px;
  }
  body[data-exp-layout="scrapbook"] .exp-left{
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  body[data-exp-layout="scrapbook"] .exp-feature{
    transform: rotate(-2deg);
    border-radius: 22px;
    background: var(--sage);
    padding: 32px 32px 24px;
    min-height: 240px;
  }
  body[data-exp-layout="scrapbook"] .exp-feature::before{
    /* washi tape */
    content:""; position:absolute;
    top:-14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
    width: 96px; height: 22px;
    background: var(--tape);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    z-index: 3;
  }
  body[data-exp-layout="scrapbook"] .exp-watermark{
    font-size: 200px;
    right: -10px; bottom: -28px;
    color: rgba(255,255,255,.55);
  }
  body[data-exp-layout="scrapbook"] .exp-right{
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
    align-items: end;
    max-width: 980px;
    margin-left: auto; margin-right: auto;
  }
  body[data-exp-layout="scrapbook"] .exp-copy{
    font-family: "Kite One", "Caveat", cursive;
    transform: rotate(-1deg);
    padding: 0 8px;
  }
  body[data-exp-layout="scrapbook"] .exp-copy p{
    font-family: inherit;
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-2);
  }
  body[data-exp-layout="scrapbook"] .exp-photos{
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
  }
  body[data-exp-layout="scrapbook"] .exp-photo{
    flex: 0 0 auto;
    width: 150px;
    aspect-ratio: 3/4;
    background: var(--paper);
    border-radius: 4px;
    padding: 10px 10px 36px;
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 28px -10px rgba(0,0,0,.18);
    position: relative;
  }
  body[data-exp-layout="scrapbook"] .exp-photo::before{
    /* inner image area */
    content:""; position:absolute;
    inset: 10px 10px 36px;
    background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 10px, transparent 10px 20px),
      var(--sage-2);
  }
  body[data-exp-layout="scrapbook"] .exp-photo::after{
    /* washi tape */
    content:""; position:absolute;
    top:-10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
    width: 60px; height: 14px;
    background: var(--tape);
    border-radius: 2px;
  }
  body[data-exp-layout="scrapbook"] .exp-photo-label{
    position: absolute; bottom: 10px; left: 0; right: 0;
    text-align: center;
    font-family: "Kite One", "Caveat", cursive;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--ink-2);
  }
  body[data-exp-layout="scrapbook"] .exp-photo:nth-child(1){ transform: rotate(-5deg); }
  body[data-exp-layout="scrapbook"] .exp-photo:nth-child(2){ transform: rotate(2deg) translateY(-10px); }
  body[data-exp-layout="scrapbook"] .exp-photo:nth-child(3){ transform: rotate(-3deg) translateY(8px); }

  /* ===================================================
     LAYOUT 6 — INTERNSHIP  (matches the "My Internship" reference)
     =================================================== */
  body[data-exp-layout="internship"] .exp-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: center;
    padding-top: 12px;
  }
  body[data-exp-layout="internship"] .exp-left{
    display: flex; flex-direction: column; gap: 28px;
  }
  body[data-exp-layout="internship"] .exp-role-line{
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  body[data-exp-layout="internship"] .exp-role-line .exp-role,
  body[data-exp-layout="internship"] .exp-role-line .exp-at{
    font-size: clamp(19px, 2.08vw, 29px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  body[data-exp-layout="internship"] .exp-at-wrap{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    transform: translateY(-3px);
  }
  body[data-exp-layout="internship"] .exp-logo{
    display: inline-block;
    height: clamp(21px, 2.08vw, 29px);
    width: auto;
    object-fit: contain;
  }
  body[data-exp-layout="internship"] .exp-copy p{
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.65;
    max-width: none;
  }
  body[data-exp-layout="internship"] .exp-right{
    position: relative;
    overflow: visible;
    /* let the carousel bleed past the wrap to the viewport's right edge */
    margin-right: calc(50% - 50vw);
    padding-right: 0;
  }
  body[data-exp-layout="internship"] .exp-photos{
    /* viewport: clips the moving track, extends to the right edge */
    display: block;
    overflow: hidden;
    background: transparent;
    padding: 0;
    box-shadow: none;
    width: 100%;
    max-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 80px), transparent 100%);
  }
  body[data-exp-layout="internship"] .exp-track{
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
    animation: exp-carousel 32s linear infinite;
    will-change: transform;
  }
  /* hover-slowdown is driven via JS (playbackRate) so the carousel
     continues from its current position instead of jumping */
  body[data-exp-layout="internship"] .exp-photo{
    flex: 0 0 clamp(220px, 22vw, 300px);
    aspect-ratio: 5/4;
    border-radius: 18px;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 12px, transparent 12px 24px),
      #F3B96A;
    box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 14px 32px -16px rgba(170,110,30,.4);
    display: flex; align-items: center; justify-content: center;
  }
  body[data-exp-layout="internship"] .exp-photo-label{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: .22em;
    color: rgba(120,75,15,.55);
  }
  body[data-exp-layout="internship"] .exp-scooter-wrap{
    position: absolute;
    top: -59px;
    left: clamp(260px, 48%, 560px);
    width: 67px;
    height: auto;
    z-index: 3;
    animation: scoot 7s ease-in-out infinite;
  }
  body[data-exp-layout="internship"] .exp-scooter{
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(-2deg);
    animation: bump 3s ease-in-out infinite;
  }
  @keyframes scoot{
    0%, 100%{ transform: translateX(0); }
    50%     { transform: translateX(-14px); }
  }
  @keyframes bump{
    /* mostly riding flat, with an occasional speed-bump jolt */
    0%, 88%   { transform: rotate(-2deg) translateY(0); }
    91%       { transform: rotate(-5deg) translateY(-8px); }
    93%       { transform: rotate(-1deg) translateY(2px); }
    95%       { transform: rotate(-2.5deg) translateY(-3px); }
    97%, 100% { transform: rotate(-2deg) translateY(0); }
  }
  @keyframes exp-carousel{
    /* track holds 2 identical sets; shift exactly one set + one gap to loop seamlessly */
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 8px)); }
  }
  @media (prefers-reduced-motion: reduce){
    body[data-exp-layout="internship"] .exp-track,
    body[data-exp-layout="internship"] .exp-scooter,
    body[data-exp-layout="internship"] .exp-scooter-wrap{ animation: none; }
  }

  /* ---- Work layout: sticker (magazine, alternating, colored cards) ---- */
  body[data-work-layout="sticker"] #projects{ padding-bottom: 240px; }
  body[data-work-layout="sticker"] .work-grid{
    grid-template-columns: 1fr;
    gap: 120px;
    max-width: 1200px;
    margin: 0 auto;
  }
  body[data-work-layout="sticker"] .work-card{
    flex-direction: row;
    align-items: center;
    gap: 80px;
    cursor: default;
  }
  body[data-work-layout="sticker"] .work-card:nth-child(even){
    flex-direction: row-reverse;
  }
  body[data-work-layout="sticker"] .work-thumb{
    flex: 0 0 30%;
    aspect-ratio: 4/3;
    border-radius: 24px;
    border: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 40px rgba(0,0,0,.06);
    transform: none !important;
  }
  body[data-work-layout="sticker"] .work-card:nth-child(1) .work-thumb{ background: #C9E25A; }
  body[data-work-layout="sticker"] .work-card:nth-child(2) .work-thumb{ background: #E96A4F; }
  body[data-work-layout="sticker"] .work-card:nth-child(3) .work-thumb{ background: #6FA8D6; }
  body[data-work-layout="sticker"] .work-thumb::after{ display: none; }
  body[data-work-layout="sticker"] .work-meta{
    flex: 1;
    padding: 0;
    text-align: left;
  }
  body[data-work-layout="sticker"] .work-meta .t{
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  body[data-work-layout="sticker"] .work-meta .s{
    margin-top: 10px;
    font-size: 16px;
    color: var(--ink-3);
    font-weight: 500;
  }
  body[data-work-layout="sticker"] .work-meta .b{
    display: block;
    margin: 22px 0 0;
    font-size: clamp(16px, 1.1vw, 19px);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 44em;
  }
  @media (max-width: 860px){
    body[data-work-layout="sticker"] .work-grid{ gap: 64px; }
    body[data-work-layout="sticker"] .work-card,
    body[data-work-layout="sticker"] .work-card:nth-child(even){
      flex-direction: column;
      gap: 24px;
    }
    body[data-work-layout="sticker"] .work-thumb{ flex: 1 1 auto; width: 100%; }
  }

  /* ---------- ABOUT ---------- */
  #about{
    padding-top: 100px;
    padding-bottom: 80px;
    background: var(--bg);
  }
  .about-heading{
    margin: 0 0 24px;
    font-family: "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .about-actions{
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .about-resume-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #E07A5F;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
  }
  .about-resume-btn:hover{ background: #C8674F; }
  .about-link-action{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s ease;
  }
  .about-link-action:hover{ opacity: .7; }
  .about-link-action svg,
  .about-resume-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

  .about-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
    align-items: start;
    margin-bottom: 80px;
  }
  .about-text{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .about-text p{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
  }
  .about-hl{
    color: #919E29;
    font-weight: 700;
  }
  .about-text .about-italic{
    font-family: "Kite One", cursive;
    font-style: normal;
    font-size: 15px;
    margin: 0 0.3em;
  }
  .about-photo-wrap{
    width: 252px;
    flex-shrink: 0;
  }
  .about-photo-wrap img{
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
  }

  /* Two-column row: gallery carousel on the left, "What I Enjoy Doing for Fun" on the right */
  .about-fun-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }
  .about-fun-text{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .about-fun-heading{
    margin: 0 0 4px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink);
  }
  .about-fun-text p{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
  }

  /* Gallery: single-row, auto-scrolling carousel constrained to its column */
  .about-gallery-wrap{
    position: relative;
    overflow: hidden;
    padding: 16px 0;
    min-width: 0;
  }
  .about-gallery{
    display: flex;
    gap: 20px;
    width: max-content;
    animation: about-gallery-scroll 30s linear infinite;
  }
  .about-gallery-item{
    position: relative;
    height: 192px;
    flex-shrink: 0;
  }
  .about-gallery-item img{
    height: 100%;
    width: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
  }
  .about-gallery-item::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 56px;
    height: 14px;
    background: rgba(224, 122, 95, .4);
    z-index: 1;
    pointer-events: none;
  }
  .about-gallery-item:nth-child(odd)::before{
    transform: translateX(-50%) rotate(3deg);
    background: rgba(224, 122, 95, .35);
  }
  @keyframes about-gallery-scroll{
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
  }
  @media (prefers-reduced-motion: reduce){
    .about-gallery{ animation: none; }
  }

  /* Experiences heading (above involvement) */
  .about-experiences-heading{
    margin: 120px 0 56px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink);
  }

  /* Involvement section */
  .about-involvement-grid{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    margin-top: 0;
    padding-left: 40px;
  }
  .about-involvement-label{
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.546px;
    color: #1E1E1E;
    white-space: nowrap;
  }
  .about-involvement-list{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .about-involvement-item{
    display: flex;
    flex-direction: column;
  }
  .about-involvement-item + .about-involvement-item{
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .about-involvement-title{
    margin: 0 0 4px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink);
  }
  .about-involvement-title strong{
    font-weight: 700;
  }
  .about-involvement-date{
    margin: 0 0 14px;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .about-involvement-desc{
    margin: 0 0 20px;
    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
  }
  .about-involvement-photos{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .about-involvement-photos img{
    height: 98px;
    width: auto;
    border-radius: 8px;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* Achievements section (same layout as Involvement) */
  .about-achievements-grid{
    margin-top: 96px;
  }
  @media (max-width: 860px){
    .about-involvement-grid{ grid-template-columns: 1fr; gap: 24px; }
  }
  @media (max-width: 860px){
    .about-grid{ grid-template-columns: 1fr; gap: 32px; }
    .about-photo-wrap{ width: 100%; max-width: 360px; }
  }

  /* ---------- FOOTER ---------- */
  .site-footer{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    font-family: "Kite One", cursive;
    font-size: 16px;
    color: #1E1E1E;
    text-align: left;
  }
  .site-footer p{
    margin: 0;
  }
  .site-footer p + p{
    margin-top: 6px;
  }

  /* ---------- NAV (sticky bottom pill) ---------- */
  .nav{
    position: fixed; left:50%; bottom: 28px; transform: translateX(-50%);
    z-index: 50;
    display:flex; align-items:center; gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
  }
  .nav a{
    display:inline-flex; align-items:center; gap:8px;
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600; font-size: 15px;
    transition: background .2s ease, color .2s ease;
    white-space: nowrap;
  }
  .nav a:hover{ background: rgba(126, 148, 119, .15); color: #5C7256; }
  .nav a.active{ background: #7E9477; color: #fff; }
  .nav .home-icon{
    width:18px; height:18px; flex-shrink:0;
  }
  .nav .home-icon path{stroke: currentColor; stroke-width: 1.8; fill:none; stroke-linejoin: round; stroke-linecap: round}

  /* ---------- "Show UI" placeholder, present in the original ---------- */
  .show-ui{
    position: fixed; top: 16px; left: 16px; z-index: 40;
    padding: 8px 14px;
    background: rgba(255,255,255,.7);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.05);
    color: var(--ink-2);
    font-size: 13px; font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    cursor: default;
  }

  /* responsive */
  @media (max-width: 860px){
    .work-grid{grid-template-columns: 1fr; gap: 28px}
    .exp{ margin-top: 96px; }
    .exp-grid,
    body[data-exp-layout="card"] .exp-grid,
    body[data-exp-layout="split"] .exp-grid{ grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
    body[data-exp-layout="banner"] .exp-feature,
    body[data-exp-layout="banner"] .exp-right{ grid-template-columns: 1fr !important; }
    body[data-exp-layout="editorial"] .exp-copy{ columns: 1; }
    body[data-exp-layout="scrapbook"] .exp-right{ grid-template-columns: 1fr; }
    body[data-exp-layout="scrapbook"] .exp-photos{ flex-wrap: wrap; }
    .exp-watermark{ font-size: 200px !important; }
  }

  /* ---------- HOME: tablet and below ---------- */
  @media (max-width: 1024px){
    .home-copy{
      padding: 0 24px 22vh;
      max-width: 100%;
    }
    .home-heading{
      font-size: clamp(36px, 7vw, 72px);
    }
    .home-heading em{
      font-size: clamp(40px, 7.4vw, 76px);
    }
    .home-portrait{
      width: clamp(180px, 28vw, 280px);
    }
  }

  /* ---------- HOME: mobile ---------- */
  @media (max-width: 640px){
    .home-stage{
      align-items: center;
    }
    .home-copy{
      padding: 0 20px;
    }
    .home-heading{
      font-size: clamp(33px, 9.4vw, 51px);
      line-height: 1.1;
    }
    .home-heading em{
      font-size: clamp(37px, 10.5vw, 57px);
    }
    .home-heading .star-mark{ display: none; }
    .home-tag{
      margin-top: 18px;
      font-size: 15px;
    }
    .home-portrait{
      width: clamp(195px, 57vw, 260px);
      right: -8px;
    }

    .nav{ display: none; }

    /* Project cards: stack image over title, hide description */
    body[data-work-layout="stack"] .work-card{
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
    }
    body[data-work-layout="stack"] .work-thumb{
      flex: 1 1 auto;
      width: 100%;
      height: auto;
      aspect-ratio: 16/10;
    }
    body[data-work-layout="stack"] .work-meta .b{ display: none; }

    /* About: shrink action buttons by ~30% */
    .about-actions{
      gap: 12px;
      margin-bottom: 24px;
    }
    .about-resume-btn,
    .about-link-action{
      gap: 6px;
      font-size: 11px;
    }
    .about-resume-btn{
      padding: 8px 17px;
    }
    .about-resume-btn svg,
    .about-link-action svg{
      width: 13px;
      height: 13px;
    }

    /* Tighter spacing under section titles */
    #projects h2{ margin-bottom: 28px; row-gap: 4px; }
    #projects h2 .quip{ color: var(--ink-3); }
    .exp-head{ margin-bottom: 20px; row-gap: 12px; }
    .exp-head h3{ row-gap: 12px; }
    .exp-head .quip{ color: var(--ink-3); }
    .about-experiences-heading{ margin-bottom: 20px; }

    /* About fun: stack description over gallery */
    .about-fun-grid{
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

    /* Match green-box bottom padding to about-section top padding */
    #projects{ padding-bottom: 100px; }

    /* Internship role line: larger, left-aligned with description */
    body[data-exp-layout="internship"] .exp-role-line .exp-role,
    body[data-exp-layout="internship"] .exp-role-line .exp-at{
      font-size: 22px;
    }
    body[data-exp-layout="internship"] .exp-logo{
      height: 22px;
    }

    /* Experiences: sticky section labels (Involvement / Achievements) */
    .about-involvement-grid{
      display: block;
      padding-left: 0;
    }
    .about-involvement-label{
      position: sticky;
      top: 0;
      z-index: 5;
      margin-bottom: 16px;
      padding: 12px 0;
      background: var(--bg);
    }

    /* Footer: centered with even padding */
    .site-footer{
      padding: 40px;
      text-align: center;
    }

    /* Internship: stack description over carousel, carousel full viewport width */
    body[data-exp-layout="internship"] .exp-grid{
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
    body[data-exp-layout="internship"] .exp-right{
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
    body[data-exp-layout="internship"] .exp-photos{
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
    body[data-exp-layout="internship"] .exp-scooter-wrap{
      top: -46px;
      left: auto;
      right: 12%;
      width: 54px;
    }
  }

  /* ---------- HOME: very small screens ---------- */
  @media (max-width: 380px){
    .home-heading{ font-size: 31px; }
    .home-heading em{ font-size: 35px; }
    .home-tag{ font-size: 14px; margin-top: 14px; }
    .home-portrait{ width: 182px; }
  }

  /* ---------- handwriting helpers (used by About variations) ---------- */
  .hand{font-family: "Caveat", "Kalam", cursive; font-weight: 600}
  .hand-b{font-family: "Caveat", "Kalam", cursive; font-weight: 700}
  .pen{font-family: "Kalam", "Caveat", cursive; font-weight: 400}

  /* ---------- INTERNSHIP CAROUSEL: real photos ---------- */
  body[data-exp-layout="internship"] .exp-photo{
    background: var(--paper);
    overflow: hidden;
  }
  body[data-exp-layout="internship"] .exp-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- ABOUT CARD ---------- */
  .about-root{ padding-top: 16px; }
  .about-head{
    display: flex; justify-content: flex-start; align-items: baseline;
    gap: 18px; margin-bottom: 36px;
  }
  .about-h2{
    margin: 0; text-align: left;
    font-size: 40px; font-weight: 600; letter-spacing: -0.025em;
  }
  .about-card{
    background: var(--paper);
    border-radius: 28px;
    padding: 36px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 44px;
    box-shadow: var(--shadow-soft);
  }
  .about-left{ display: flex; flex-direction: column; gap: 14px; }
  .about-photo{
    width: 260px; height: 340px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: var(--paper);
    background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 12px, transparent 12px 24px);
    display: flex; align-items: center; justify-content: center;
  }
  .about-photo img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .about-photo-label{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(22,22,22,.32);
  }
  .about-caption{ text-align: center; }
  .about-right{
    display: flex; flex-direction: column; gap: 28px; padding-top: 8px;
  }
  .about-bio{
    margin: 0; font-size: 22px; line-height: 1.45;
    color: var(--ink); max-width: 640px; font-weight: 500;
  }
  .about-sections-grid{
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px;
  }
  .about-label{ margin-bottom: 8px; }
  .about-label .hand-b{ font-size: 26px; color: #4a6b3a; }
  .about-list{
    margin: 0; padding: 0 0 0 20px; list-style: disc;
    color: var(--ink-2); font-size: 15.5px; line-height: 1.7; font-weight: 500;
  }
  .about-list li{ break-inside: avoid; }
  .about-hobbies-list{ column-count: 2; column-gap: 16px; }
  .about-list-note{ color: var(--ink-3); }
  .about-links-row{
    display: flex; flex-wrap: wrap; gap: 18px;
    padding-top: 22px;
    border-top: 1px dashed rgba(0,0,0,.12);
  }
  .about-link{
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 14px 8px 0;
  }
  .about-link-label{ color: var(--ink-3); font-size: 13px; font-weight: 500; }
  .about-link-value{ font-weight: 600; }
  @media (max-width: 860px){
    .about-card{ grid-template-columns: 1fr; gap: 28px; padding: 24px; }
    .about-photo{ width: 100%; height: 260px; }
    .about-sections-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- Home intro: "hello!" first, then the rest ---------- */
  @keyframes home-fade-in{
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .home-heading .line:nth-child(1){
    opacity: 0;
    animation: home-fade-in .5s ease-out .15s forwards;
  }
  .home-heading .line:nth-child(2),
  .home-copy .home-tag,
  .home-portrait{
    opacity: 0;
    animation: home-fade-in .6s ease-out .5s forwards;
  }
  @media (prefers-reduced-motion: reduce){
    .home-heading .line:nth-child(1),
    .home-heading .line:nth-child(2),
    .home-copy .home-tag,
    .home-portrait{
      opacity: 1;
      animation: none;
    }
  }