@font-face{font-family:'Satoshi';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/satoshi-variable.woff2') format('woff2');}
:root{
    --body-font:'Satoshi',Arial,sans-serif;
    --accent-font:'ivypresto-headline',Georgia,serif;
    --ground:#ffffff;
    --ink:#16181b;
    --label:#9aa3ab;
    --g-ground:#ffffff;
    --g-ink:#1c1b18;
    --g-label:#918d84;
    --g-mat:#f5f3ef;
  }
  [hidden]{ display:none !important; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--body-font);
    font-weight:200;
    -webkit-font-smoothing:antialiased;
  }
  body.view-work{ background:var(--g-ground); color:var(--g-ink); }
  body:not(.view-work){ overflow:hidden; }

  /* ============ splash ============ */
  #water{
    position:fixed; inset:0; width:100%; height:100%; display:block;
    touch-action:none; z-index:0;
  }
  body:not(.view-work) #water{ cursor:crosshair; }
  #splash, #work-page{ position:relative; z-index:1; }
  #splash .label, #splash .splash-nav a{
    font-size:11px; font-weight:200;
    letter-spacing:0.22em; text-transform:uppercase;
    color:var(--label);
    user-select:none;
  }
  #splash .splash-nav{
    position:fixed; top:28px; left:50%; transform:translateX(-50%); z-index:2;
    display:flex; gap:26px;
  }
  #splash .splash-nav a{
    text-decoration:none; cursor:pointer;
    transition:color 0.4s ease;
  }
  #splash .splash-nav a:hover, #splash .splash-nav a:focus-visible{ color:var(--ink); }
  #splash .splash-nav a:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
  #splash .label{ position:fixed; pointer-events:none; z-index:2; }
  #splash .tr{ top:28px; right:32px; }
  /* chrome waits for the intro */
  #splash .splash-nav, #splash .label.tr{
    opacity:0; transition:opacity 1.2s ease;
  }
  #splash.chrome-in .splash-nav, #splash.chrome-in .label.tr{ opacity:1; }
  #splash .wordmark{
    position:fixed; inset:0; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; margin:0; pointer-events:none;
  }
  #splash .wordmark{ gap:10px; }
  #splash .wordmark .name{
    font-family:var(--accent-font);
    font-weight:100; font-style:italic; font-size:clamp(26px,2.4vw,38px);
    letter-spacing:0.02em; line-height:1.3; color:#3c444a;
  }
  #splash .wordmark .role{
    font-size:clamp(17px,1.45vw,22px); font-weight:200; letter-spacing:0.01em;
    line-height:1.45; text-align:center; color:#5d6a72;
  }
  body.gl-ok #splash .wordmark{ visibility:hidden; }

  /* ============ work page ============ */
  #work-page{
    font-family:var(--body-font);
    font-size:14px; line-height:1.5; color:var(--g-ink);
  }
  #work-page header{
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; justify-content:center; align-items:center;
    padding:26px 40px 32px;
    background:transparent;
  }
  #work-page nav{ display:flex; gap:26px; }
  #work-page nav a{
    font-size:11px; font-weight:200; letter-spacing:0.14em; text-transform:lowercase;
    color:var(--g-ink); text-decoration:none;
  }
  #work-page nav a:hover, #work-page nav a:focus-visible{ color:var(--g-label); }
  #work-page nav a:focus-visible{ outline:1px solid var(--g-ink); outline-offset:4px; }
  #work-page .brand{
    font-family:var(--accent-font);
    font-size:20px; font-weight:400; letter-spacing:0.34em; text-transform:uppercase;
    padding-left:0.34em;
    white-space:nowrap;
  }
  #work-page .brand a{ color:var(--g-ink); text-decoration:none; }
  #work-page .meta-right{
    justify-self:end;
    font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--g-ink);
    font-variant-numeric:tabular-nums;
  }
  #work-page main{ padding:180px 0 60px; }
  .row{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    column-gap:24px;
    margin:0 40px 40px;
  }
  figure{ margin:0; position:relative; }
  .piece{ position:relative; }
  /* light lost beneath a submerged object */
  .piece::before{
    content:''; position:absolute; z-index:0;
    left:2%; right:2%; top:14%; bottom:-7%;
    background:radial-gradient(50% 44% at 50% 58%, rgba(45,58,60,0.34), rgba(45,58,60,0) 70%);
    filter:blur(24px);
  }
  .piece svg, .piece img{
    position:relative; z-index:1; display:block; width:100%; height:auto;
    filter:saturate(0.82) contrast(0.94);
  }
  /* a slow drift, as if floating on the surface */
  @keyframes bob{
    from{ transform:translateY(-5px) rotate(-0.4deg); }
    to{   transform:translateY(6px)  rotate(0.4deg); }
  }
  .piece{ animation:bob 7s ease-in-out infinite alternate; }
  .f-b .piece{ animation-duration:8.5s; animation-delay:-3s; }
  .f-c .piece{ animation-duration:7.8s; animation-delay:-5s; }
  .f-d .piece{ animation-duration:9.2s; animation-delay:-1.5s; }
  @media (prefers-reduced-motion: reduce){
    .piece{ animation:none; }
  }
  /* when the pieces are drawn into the water itself, the DOM copies stand down */
  body.pieces-live #work-page .piece{ animation:none; }
  body.pieces-live #work-page .piece svg{ visibility:hidden; }
  body.pieces-live #work-page .piece::before{ display:none; }
  #work-page figcaption{ margin-top:22px; text-align:center; }
  .eyebrow{
    font-size:10px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--g-label); margin-bottom:8px;
  }
  .eyebrow em{ font-style:normal; color:#a9a49a; }
  .title{
    font-family:var(--accent-font); font-style:italic; font-weight:100;
    font-size:22px; line-height:1.2; margin:0 0 6px;
    letter-spacing:0.01em;
  }
  .detail{ font-size:12.5px; color:#4c4a44; margin:0 auto; max-width:34em; }

  .f-a{ grid-column:3 / span 6; }
  .f-b{ grid-column:9 / span 3; margin-top:18vh; align-self:start; }
  .f-c{ grid-column:2 / span 3; margin-top:10vh; }
  .f-d{ grid-column:6 / span 6; margin-top:2vh; }

  .soon{
    min-height:46vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; margin:0 40px;
  }
  .soon-label{
    font-family:var(--accent-font); font-style:italic; font-weight:100;
    font-size:clamp(26px,2.4vw,38px); color:var(--g-ink); margin:0;
  }
  .soon-note{
    font-size:12px; font-weight:200; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--g-label); margin:0;
  }
  .scroll-hint{
    text-align:center;
    font-size:10px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase;
    color:var(--g-label);
    margin:10vh 0 8vh;
  }
  /* surfacing: rises from beneath the water — blurred and pale, then sharp */
  .reveal{
    opacity:0; transform:translateY(38px) scale(0.97);
    filter:blur(14px) saturate(0.7);
    transition:opacity 1.5s ease, transform 1.5s ease, filter 1.8s ease;
  }
  .reveal.in{ opacity:1; transform:none; filter:blur(0) saturate(1); }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }
  @media (max-width: 860px){
    #work-page header{ padding:18px 20px 24px; }
    #work-page main{ padding-top:130px; }
    .row{ margin:0 20px 24px; row-gap:64px; }
    .f-a,.f-b,.f-c,.f-d{ grid-column:1 / -1; margin-top:0; }
    .f-b,.f-c{ width:70%; }
    .f-b{ margin-left:auto; }
    .piece .index{ display:none; }
    .era{ margin:12vh 20px; }
  }