:root{
      --black:#0C0C0C;
      --white:#FFFFFF;
      --ink: rgba(12,12,12,0.88);
      --muted: rgba(12,12,12,0.56);
      --warm-gray:#B5B1AA;
      --line: rgba(0,0,0,0.09);
      --line2: rgba(0,0,0,0.06);
      --gold:#C6B68A;

      --font-heading:"Libre Baskerville", serif;
      --font-body:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

      --container: 1080px;

      --s1: 10px;
      --s2: 14px;
      --s3: 22px;
      --s4: 34px;
      --s5: 52px;
      --s6: 72px;
      --radius: 14px;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--black);
      font-family:var(--font-body);
      line-height:1.65;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
      background:
        radial-gradient(900px 520px at 18% -10%, rgba(198,182,138,0.10), transparent 58%),
        radial-gradient(820px 520px at 92% 18%, rgba(0,0,0,0.03), transparent 58%),
        linear-gradient(#fff, #fff);
    }

    a{ color:inherit; text-decoration:none; }
    a:focus-visible{
      outline:2px solid var(--gold);
      outline-offset:3px;
      border-radius:10px;
    }

    .container{
      width:min(var(--container), calc(100% - 34px));
      margin:0 auto;
    }

    /* =========================
       LOCKED HEADER (IDENTICAL)
       ========================= */
    header{
      position: sticky;
      top:0;
      z-index:20;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 0;
      gap: 12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
      white-space:nowrap;
      color: rgba(12,12,12,0.72);
    }
    .wordmark{
      font-family: var(--font-heading);
      font-weight: 400;
      letter-spacing: 0.2px;
      font-size: 14px;
      color: rgba(12,12,12,0.70);
    }
    .mark{
      width: 34px;
      height: 34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .navlinks{
      display:flex;
      gap: 16px;
      flex-wrap:wrap;
      justify-content:flex-end;
      font-size: 13px;
    }
    .navlinks a{
      position:relative;
      padding: 8px 2px;
      color: rgba(12,12,12,0.74);
    }
    .navlinks a::after{
      content:"";
      position:absolute;
      left:0; right:0;
      bottom:4px;
      height:1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin:left;
      transition: transform 160ms ease;
    }
    .navlinks a:hover::after{ transform: scaleX(1); }
    .navlinks a[aria-current="page"]{
      color: rgba(12,12,12,0.92);
    }
    .navlinks a[aria-current="page"]::after{
      transform: scaleX(1);
    }

    main{ padding: var(--s5) 0 var(--s6); }
    section{ padding: var(--s6) 0; }
    section:first-child{ padding-top: var(--s5); }

    .eyebrow{
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(12,12,12,0.50);
      margin: 0 0 12px;
    }
    .hard-divider{
      border-top: 1px solid var(--line);
      padding-top: var(--s5);
      margin-top: var(--s5);
    }

    /* HERO */
    .heroWork{
      max-width: 92ch;
      padding-top: var(--s6);
      padding-bottom: var(--s4);
      position: relative;
    }
    .heroWork::before{
      content:"";
      position:absolute;
      left: -16px;
      top: 22px;
      width: 1px;
      height: 160px;
      background: rgba(198,182,138,0.62);
    }
    .heroWork h1{
      font-family: var(--font-heading);
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1.05;
      font-size: clamp(42px, 5.1vw, 56px);
      margin: 0 0 10px;
      color: rgba(12,12,12,0.92);
    }
    .heroWork .sub{
      margin: 0 0 14px;
      font-size: clamp(18px, 1.7vw, 23px);
      color: rgba(12,12,12,0.84);
      line-height: 1.45;
    }
    .heroWork .fine{
      margin: 0 0 6px;
      font-size: 14px;
      color: rgba(12,12,12,0.62);
      max-width: 78ch;
    }
    .heroWork .gold-underline{
      display:inline-block;
      position:relative;
      padding-bottom: 2px;
    }
    .heroWork .gold-underline::after{
      content:"";
      display:block;
      width: 150px;
      height: 1px;
      background: var(--gold);
      margin-top: 12px;
    }
    .actions{
      display:flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .cta{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      font-size: 13px;
      letter-spacing: 0.02em;
      padding: 10px 2px;
      position:relative;
      color: rgba(12,12,12,0.90);
      white-space:nowrap;
    }
    .cta::after{
      content:"";
      position:absolute;
      left:0; right:0;
      bottom: 6px;
      height:1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin:left;
      transition: transform 160ms ease;
    }
    .cta:hover::after{ transform: scaleX(1); }

    /* PHILOSOPHY */
    .philo{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      align-items:start;
      max-width: 1100px;
    }
    .philo h2{
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 26px;
      line-height: 1.25;
      margin: 0 0 12px;
      color: rgba(12,12,12,0.92);
    }
    .philo p{
      margin: 0;
      color: rgba(12,12,12,0.60);
      font-size: 14.5px;
      max-width: 76ch;
    }
    .principles{
      border-top: 1px solid var(--line2);
      padding-top: 16px;
    }
    .p-row{
      display:flex;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line2);
    }
    .p-num{
      width: 34px;
      flex: 0 0 34px;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(198,182,138,0.88);
      padding-top: 2px;
    }
    .p-body h3{
      margin: 0 0 4px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.25;
      color: rgba(12,12,12,0.90);
    }
    .p-body p{
      margin: 0;
      color: rgba(12,12,12,0.58);
      font-size: 14px;
    }

    /* =========================
       SELECTED WORK (ULTRA)
       Upgrades applied:
       - rail items now include subtle meta line (Client · Stage)
       - case titles are more human, subtext carries technical detail
       - right meta row made calmer (labels inline, dots removed)
       - selection highlight is classy (left hairline only, no background)
       ========================= */
    .work-head{
      max-width: 96ch;
      margin-bottom: 18px;
    }
    .work-head h2{
      margin: 0 0 8px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 26px;
      line-height: 1.2;
      color: rgba(12,12,12,0.92);
    }
    .work-head p{
      margin: 0 0 10px;
      color: rgba(12,12,12,0.58);
      font-size: 14.5px;
      max-width: 90ch;
    }
    .work-head .curated{
      margin: 0;
      font-size: 13.6px;
      color: rgba(12,12,12,0.52);
      max-width: 90ch;
    }

    .work-split{
      display:grid;
      grid-template-columns: 0.86fr 1.54fr;
      gap: 54px;
      align-items:start;
      margin-top: 30px;
    }

    /* LEFT rail */
    .rail{ padding: 2px 0 0; }
    .rail-top{ padding: 0 0 16px; margin-bottom: 12px; }
    .rail-top .small{
      margin:0 0 8px;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(12,12,12,0.52);
    }
    .rail-top .hint{
      margin:0;
      color: rgba(12,12,12,0.56);
      font-size: 13.6px;
      line-height: 1.7;
      max-width: 46ch;
    }

    .rail-group{ padding: 22px 0 10px; }
    .rail-group + .rail-group{ border-top: 1px solid rgba(0,0,0,0.05); }

    .rail-title{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 12px;
      padding: 0 0 14px;
    }
    .rail-title b{
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(12,12,12,0.50);
      font-weight: 500;
    }
    .rail-title span{ font-size: 12px; color: rgba(12,12,12,0.36); }

    .rail-item{
      width: 100%;
      appearance:none;
      border: 0;
      background: transparent;
      padding: 16px 0;
      cursor:pointer;
      text-align:left;
      position: relative;
      transition: transform 160ms ease, opacity 160ms ease;
    }
    .rail-item:hover{ transform: translateX(2px); }
    .rail-item[aria-selected="true"]{ padding-left: 18px; opacity: 1; }
    .rail-item[aria-selected="true"]::before{
      content:"";
      position:absolute;
      left:0; top: 18px; bottom: 18px;
      width: 2px; border-radius: 2px;
      background: rgba(198,182,138,0.90);
    }
    .rail-item[aria-selected="false"]{ opacity: 0.84; }

    .rail-item .t{
      margin: 0 0 7px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 17px;
      line-height: 1.24;
      color: rgba(12,12,12,0.92);
      letter-spacing: -0.012em;
    }
    .rail-item .s{
      margin:0 0 8px;
      color: rgba(12,12,12,0.54);
      font-size: 13.8px;
      line-height: 1.65;
      max-width: 52ch;
    }
    .rail-item .meta{
      margin:0;
      font-size: 12.6px;
      color: rgba(12,12,12,0.42);
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
    }
    .rail-item .meta .sep{
      width: 3px; height: 3px;
      border-radius: 50%;
      background: rgba(198,182,138,0.52);
      display:inline-block;
      transform: translateY(7px);
      opacity: 0.9;
    }

    /* RIGHT sheet */
    .sheet{
      position: sticky;
      top: 84px;
      padding: 4px 0 0;
    }
    .sheet-inner{
      padding-left: 44px;
      border-left: 1px solid rgba(0,0,0,0.05);
    }
    .sheet-kicker{
      margin: 0 0 14px;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(12,12,12,0.50);
    }
    .sheet-title{
      margin: 0 0 16px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(30px, 2.7vw, 42px);
      line-height: 1.10;
      color: rgba(12,12,12,0.92);
      letter-spacing: -0.02em;
    }

    /* Calmer meta row (no dots, more editorial note) */
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap: 10px 18px;
      align-items:baseline;
      margin: 0 0 22px;
      color: rgba(12,12,12,0.54);
      font-size: 13.6px;
      max-width: 110ch;
    }
    .meta-row span{
      display:inline-flex;
      gap: 8px;
      align-items:baseline;
    }
    .meta-row b{
      font-weight: 500;
      color: rgba(12,12,12,0.70);
    }

    .lead{
      margin: 0 0 34px;
      color: rgba(12,12,12,0.74);
      font-size: 15.8px;
      line-height: 1.88;
      max-width: 112ch;
    }

    .sections{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px 46px;
      align-items:start;
      max-width: 112ch;
    }
    .sec{ padding-top: 8px; }

    /* Section label: clearly a title, still calm */
    .sec .lbl{
      margin: 0 0 12px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 14px;
      letter-spacing: -0.01em;
      color: rgba(12,12,12,0.78);
      text-transform: none;
      position: relative;
    }
    .sec .lbl::after{
      content:"";
      display:block;
      width: 34px;
      height: 1px;
      background: rgba(198,182,138,0.72);
      margin-top: 10px;
      opacity: 0.9;
    }

    .sec p{
      margin:0;
      color: rgba(12,12,12,0.60);
      font-size: 15.1px;
      line-height: 1.84;
    }

    /* Key decisions numbered 01/02/03 */
    .decision-list{
      display:flex;
      flex-direction:column;
      gap: 12px;
      margin: 2px 0 0;
    }
    .decision-line{
      display:grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items:start;
      color: rgba(12,12,12,0.60);
      font-size: 15.1px;
      line-height: 1.84;
    }
    .decision-line .num{
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(198,182,138,0.86);
      padding-top: 3px;
      user-select:none;
    }

    .sec.full{
      grid-column: 1 / -1;
      margin-top: 10px;
    }
    .outcome{
      margin-top: 16px;
      font-size: 13.8px;
      color: rgba(12,12,12,0.74);
    }

    /* HOW I THINK (work-specific, less generic) */
    .think{ max-width: 82ch; }
    .think h2{
      margin: 0 0 10px;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 26px;
      line-height: 1.2;
      color: rgba(12,12,12,0.92);
    }
    .think p{
      margin: 0 0 14px;
      color: rgba(12,12,12,0.60);
      font-size: 14.5px;
      line-height: 1.75;
    }
    .think .anchor{
      margin-top: -2px;
      color: rgba(12,12,12,0.62);
    }
    .think .anchor b{
      font-weight: 500;
      color: rgba(12,12,12,0.80);
    }
    .think-list{
      margin: 0;
      padding: 0;
      list-style:none;
      border-top: 1px solid var(--line2);
    }
    .think-item{
      display:flex;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line2);
    }
    .think-k{
      width: 34px;
      flex: 0 0 34px;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(198,182,138,0.88);
      padding-top: 2px;
    }
    .think-v b{
      display:block;
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 18px;
      margin: 0 0 4px;
      color: rgba(12,12,12,0.90);
    }
    .think-v span{
      color: rgba(12,12,12,0.58);
      font-size: 14px;
      line-height: 1.6;
    }

    /* Contact */
    .contact{ max-width: 72ch; }
    .contact h2{
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: 26px;
      line-height: 1.25;
      margin: 0 0 12px;
      color: rgba(12,12,12,0.92);
    }
    .note{
      margin-top: 12px;
      color: rgba(12,12,12,0.56);
      font-size: 14px;
      max-width: 162ch;
    }

    footer{
      border-top: 1px solid var(--line);
      padding: 26px 0;
      font-size: 12px;
      color: rgba(12,12,12,0.58);
      background: rgba(255,255,255,0.55);
    }

    /* Responsive */
    @media (max-width: 980px){
      section{ padding: var(--s5) 0; }
      .heroWork::before{ left: -12px; height: 120px; }
      .philo{ grid-template-columns: 1fr; }

      .work-split{ grid-template-columns: 1fr; gap: 18px; }
      .sheet{ position: relative; top: 0; padding-top: 10px; }
      .sheet-inner{
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(0,0,0,0.06);
        padding-top: 22px;
      }
      .sections{ grid-template-columns: 1fr; gap: 18px; }
      .sec.full{ margin-top: 8px; }
      .rail-top{ margin-bottom: 8px; }
    }

    @media (max-width: 520px){
      .container{ width: min(var(--container), calc(100% - 26px)); }
      .wordmark{ display:none; }
      .mark{ width: 32px; height: 32px; }
      .heroWork{ padding-top: 54px; padding-bottom: 44px; }
      .rail-item .t{ font-size: 16.2px; }
      .sheet-title{ font-size: 30px; }
      .lead{ font-size: 15.4px; line-height: 1.84; }
      .sec p{ font-size: 15px; }
      .sec .lbl{ font-size: 13.6px; }
      .decision-line{ font-size: 15px; }
      .decision-line .num{ font-size: 10.5px; }
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      .navlinks a::after, .cta::after{ transition:none; }
      .rail-item{ transition:none; }
    }