/* Shared styles for /works/<piece>/ pages. Generated from the approved Sun page; edit here. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/geist-sans.woff2') format('woff2-variations');}
  @font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/geist-mono.woff2') format('woff2-variations');}
  :root{
    --stone:#E9E5DF; --stone-2:#E3DFD7; --field:#F8F6F1; --ink:#17130F; --ink-2:#3B352E;
    --muted:#7C7269; --line:#D6D1C8; --accent:#8C2E22; --night:#100D0A;
    --sans:'Geist',-apple-system,'Helvetica Neue',Arial,sans-serif;
    --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
    --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(1.25rem,5vw,5.5rem);
  }
  *{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.5;
    -webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--accent);color:#F6F4F0}
  .mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .wrap{padding-inline:var(--pad);max-width:1480px;margin:0 auto}

  /* nav */
  nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
    padding:1.05rem var(--pad);background:rgba(233,229,223,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:.8rem}
  .brand img{height:34px;width:auto}
  .bname{font-weight:560;letter-spacing:.14em;font-size:.82rem;text-transform:uppercase}
  .bname small{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.26em;color:var(--muted);font-weight:400;margin-top:.2rem}
  .navlinks{display:flex;align-items:center;gap:1.8rem}
  .navlinks a{font-size:.82rem;color:var(--ink-2)}
  .navlinks a:hover{color:var(--ink)}
  .navlinks .enq{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);
    border-radius:100px;padding:.5rem 1.05rem;color:var(--ink);transition:all .4s var(--ease)}
  .navlinks .enq:hover{background:var(--ink);color:var(--stone)}
  @media(max-width:760px){.navlinks a:not(.enq){display:none}}

  /* piece */
  .crumb{padding-top:clamp(1.6rem,3vw,2.6rem);padding-bottom:1.2rem}
  .crumb a{color:var(--muted)} .crumb a:hover{color:var(--ink)}
  .piece{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5.5rem);align-items:start;padding-bottom:clamp(4rem,8vw,7rem)}
  .viewer{position:sticky;top:92px}
  .plate{background:var(--stone-2);border-radius:4px;overflow:hidden;cursor:zoom-in;position:relative}
  .plate img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
  .plate:hover img{transform:scale(1.02)}
  .zoomhint{position:absolute;right:1rem;bottom:1rem;background:rgba(23,19,15,.78);color:var(--stone);font-family:var(--mono);
    font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.45rem .8rem;border-radius:100px}

  .info h1{font-size:clamp(3.4rem,7vw,6.4rem);font-weight:420;letter-spacing:-.045em;line-height:.92;margin:.2rem 0 1.1rem}
  .info .sub{font-size:1.12rem;color:var(--ink-2);font-weight:370;line-height:1.55;max-width:34ch;margin:0 0 2rem}
  .status{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-2);margin-bottom:1.6rem}
  .status i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
  dl{margin:0 0 2.2rem;border-top:1px solid var(--line)}
  dl div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
  dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
  dd{margin:0;color:var(--ink)}
  .ctas{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.6rem}
  .btn{display:flex;align-items:center;justify-content:space-between;gap:.7rem;font-family:var(--mono);font-size:.74rem;
    letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--stone);padding:1.15rem 1.5rem;border-radius:100px;
    transition:background .4s var(--ease)}
  .btn:hover{background:var(--accent)}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
  .btn.ghost:hover{background:var(--ink);color:var(--stone)}
  .assure{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
  .assure li{font-size:.86rem;color:var(--ink-2);display:flex;gap:.6rem;align-items:baseline}
  .assure li::before{content:"";width:14px;height:1px;background:var(--accent);flex:none;transform:translateY(-4px)}

  /* story */
  .story{background:var(--stone-2);padding-block:clamp(4.5rem,9vw,8rem)}
  .story .grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem)}
  .story h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:430;letter-spacing:-.03em;line-height:1.05;margin:.6rem 0 0}
  .story .body p{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.62;color:var(--ink-2);font-weight:370;margin:0 0 1.3rem;max-width:58ch}

  /* process */
  .process{padding-block:clamp(4.5rem,9vw,8rem)}
  .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:2.2rem}
  .sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:430;letter-spacing:-.03em;margin:0}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
  .steps figure{margin:0}
  .steps img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
  .steps figcaption{margin-top:.9rem;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
  .steps figcaption b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--muted);font-weight:400;margin-bottom:.35rem}
  @media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}

  /* film band */
  .film{background:var(--night);color:var(--stone);padding-block:clamp(4rem,8vw,6.5rem);text-align:center}
  .film h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:430;letter-spacing:-.03em;margin:.7rem 0 1.6rem}
  .film .mono{color:rgba(233,229,223,.6)}
  .film a{display:inline-flex;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
    text-transform:uppercase;border:1px solid rgba(233,229,223,.5);border-radius:100px;padding:1rem 1.5rem;transition:all .4s var(--ease)}
  .film a:hover{background:var(--stone);color:var(--ink)}

  /* more */
  .more{padding-block:clamp(4.5rem,9vw,8rem)}
  .more .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
  .more a img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;transition:transform 1s var(--ease)}
  .more a:hover img{transform:scale(1.02)}
  .more .t{display:flex;justify-content:space-between;margin-top:.8rem;font-size:.95rem}
  .more .t span:last-child{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  @media(max-width:700px){.more .grid{grid-template-columns:1fr 1fr}}

  footer{border-top:1px solid var(--line);padding-block:2.4rem;font-size:.82rem;color:var(--muted)}
  footer .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
  footer a{color:var(--ink-2)} footer a:hover{color:var(--ink)}

  /* lightbox */
  dialog.lb{padding:0;border:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
  dialog.lb::backdrop{background:rgba(16,13,10,.94)}
  .lb .stage{width:100%;height:100%;display:grid;place-items:center;overflow:auto;cursor:zoom-out}
  .lb img{max-width:96vw;width:auto;height:auto;max-height:92vh}
  body.lb-open{overflow:hidden}
  .lb .close{position:fixed;top:1rem;right:1rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(233,229,223,.4);
    background:transparent;color:var(--stone);font-size:1.5rem;cursor:pointer}

  .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
  .rv.in{opacity:1;transform:none}
  @media(max-width:900px){
    .piece{grid-template-columns:1fr}.viewer{position:static}
    .story .grid{grid-template-columns:1fr;gap:1rem}
  }
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.plate img,.more a img{transition:none}}