/*
Theme Name: Clow Studio
Theme URI: https://clowstudio.com/
Author: Clow Studio
Description: Custom theme built from the Clow Studio preview — warm charcoal, ivory text, sandalwood accents.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: clow-studio
*/

  :root{
    color-scheme: dark;
    --bg:#1b1712; --bg2:#211c16; --surface:#26201a; --surface2:#2e2720;
    --ink:#f5efe3; --muted:#c9bda6; --faint:#9c8f7a;
    --line:#3d3428; --line2:#4a3f30;
    --wood:#c19a6b; --gold:#d8b875; --ivory:#f5efe3; --wood-strong:#d9b384; --wood-deep:#9a774e;
    --radius:14px; --max:1080px; --keymax:560px; --submax:720px;
    /* Fixed-chrome heights: header bar, and header + quick-link bar combined.
       JS re-measures both live and overwrites these; the values here are the
       no-JS fallback (the button row wraps taller on narrow screens). */
    --navh:116px; --chrome:201px;
  }
  @media (max-width:600px){ :root{--chrome:253px} }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:201px}
  @media (max-width:600px){ html{scroll-padding-top:253px} }
  body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:16.5px;line-height:1.65}
  h1,h2,h3{font-family:"Libre Caslon Text",Georgia,serif;line-height:1.12;margin:0;font-weight:700;letter-spacing:-.01em}
  .mono{font-family:"JetBrains Mono",monospace}
  a{color:var(--wood-strong)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--wood-strong);outline-offset:3px;border-radius:4px}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
  section{padding:36px 0}
  .sec-head{max-width:640px;margin:0 auto 30px;text-align:center}
  .sec-head h2{font-size:clamp(28px,4vw,40px);margin-bottom:10px}
  .sec-head p{color:var(--muted);margin:0 auto}
  .kicker{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood);margin-bottom:14px;display:block}

  /* Fixed, not sticky: sticky silently stops sticking inside embedded
     webviews/iframes whose scroll container the page does not control,
     while fixed pins to the viewport in every rendering context. */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(27,23,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  /* The logo is centred on the full header width; the menu button is taken
     out of the flow and pinned to the right edge so it no longer pulls the
     logo off-centre. */
  .nav-in{position:relative;display:flex;align-items:center;justify-content:center;min-height:54px;padding:6px 0}
  .brand{font-family:"Libre Caslon Text",serif;font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
  .brand span{color:var(--wood)}
  /* Header logo art — gold script Clow with STUDIO underneath, from card-front.svg */
  .brand-logo{display:inline-flex;align-items:center;line-height:0}
  .brand-logo img{height:104px;width:auto;display:block}
  @media (max-width:480px){.brand-logo img{height:84px}.menu-btn{width:44px;height:44px}}
  /* Three-line menu button — spaced out to the right edge of the header */
  .menu-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:1px solid var(--line2);border-radius:10px;cursor:pointer;padding:0}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:background .15s ease}
  .menu-btn:hover{border-color:var(--wood)}
  .menu-btn:hover span{background:var(--wood-strong)}
  .menu-btn[aria-expanded="true"]{border-color:var(--wood)}
  /* Right-side slide-in panel holding the sections */
  .panel-overlay{display:none !important}
  .panel-overlay.open{opacity:1}
  .panel-overlay[hidden]{display:none !important}
  .site-panel{position:fixed;top:var(--navh);left:0;right:0;width:100%;max-height:calc(100dvh - var(--navh));overflow-y:auto;background:#211c16;border-bottom:1px solid var(--line2);z-index:80;transform:none;transition:none;display:none;flex-direction:column;padding:18px 22px 28px;min-height:280px;box-shadow:0 18px 50px rgba(0,0,0,.38)}
  .site-panel.open{display:flex}
  .site-panel[hidden]{display:none !important}
  .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
  .panel-label{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood)}
  .panel-close{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;background:transparent;border:1px solid var(--line2);border-radius:10px;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;font-family:inherit;padding:0 0 2px}
  .panel-close:hover{border-color:var(--wood);color:var(--wood-strong)}
  .panel-links{display:flex;flex-direction:column;margin-top:18px}
  .panel-links a{display:block;width:100%;box-sizing:border-box;text-align:left;color:#f5efe3;background:#26201a;text-decoration:none;font-family:"Libre Caslon Text",Georgia,serif;font-size:26px;font-weight:700;line-height:1.2;padding:16px 18px;min-height:56px;border:1px solid #4a3f30;border-radius:12px;margin-bottom:12px}
  
  .panel-links a small{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;color:#c9bda6;font-weight:400;float:right;line-height:2.2}
  .panel-links a:hover,.panel-links a:focus-visible{color:var(--wood-strong)}
  .panel-links a:hover small{color:var(--wood)}
  .panel-foot{margin-top:auto;padding-top:28px;color:var(--faint);font-size:14px;line-height:1.55}
  .panel-foot strong{color:var(--muted);display:block;font-size:14.5px;margin-bottom:2px}
  @media (prefers-reduced-motion: reduce){ .site-panel,.panel-overlay{transition:none} }

  /* Intro — deliberately compact, no large scenic hero delaying the work.
     Kept tight and centred: the kicker, headline, intro and buttons sit
     close together as one group, with little air before the work below. */
  /* Pinned quick-link bar: fixed directly under the fixed header and stays
     visible while the page scrolls underneath it. Solid background so
     content passing beneath never shows through. The main column is padded
     down by the combined chrome height (--chrome) so nothing starts out
     hidden beneath the two fixed bars. */
  .hero{position:fixed;top:var(--navh);left:0;right:0;z-index:40;background:var(--bg);padding:18px 0 16px;border-bottom:1px solid var(--line);text-align:center}
  main#top{padding-top:var(--chrome)}
  .hero .kicker{margin-bottom:10px}
  .hero h1{font-size:clamp(34px,5vw,50px);margin-bottom:10px}
  .hero h1 em{font-style:italic;color:var(--wood-strong);font-weight:400}
  .hero p{color:var(--muted);font-size:18px;max-width:56ch;margin:0 auto 18px}
  /* Pull the first section up so the top of the page reads as one cluster */
  #work{padding-top:24px}
  #work .sec-head{margin-bottom:24px}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15.5px;text-decoration:none;padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;font-family:inherit;min-height:48px}
  .btn-wood{background:var(--wood);color:#1b1712}
  .btn-wood:hover{background:var(--wood-strong)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
  .btn-ghost:hover{border-color:var(--wood)}

  /* Release blocks — same structure on Selected works + /key, per brief */
  .releases{display:grid;gap:56px;justify-items:center}
  .release{max-width:640px;width:100%;margin:0 auto;text-align:center}
  .artwork{border:1.5px dashed var(--line2);border-radius:12px;aspect-ratio:1/1;background:var(--bg2);display:grid;place-items:center;text-align:center;padding:24px;color:var(--faint)}
  .artwork .mono{font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--wood-deep)}
  .artwork p{margin:0 auto;font-size:14.5px;max-width:32ch}
  .release-meta{padding-top:18px}
  .release-meta h3{font-size:24px;margin-bottom:4px;color:var(--faint);font-style:italic;font-weight:400}
  .release-artist{font-size:17px;font-weight:700;margin:0}
  .release-credit{color:var(--muted);margin:2px 0 0;font-size:15px}
  .listen-pending{display:inline-block;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--faint);border:1px solid var(--line);padding:7px 12px;border-radius:999px}
  .listen-link{display:inline-block;margin-top:12px;font-weight:700;text-decoration:none}
  .listen-link:hover{text-decoration:underline}
  .empty-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--muted);font-size:15px;max-width:640px;margin-left:auto;margin-right:auto;text-align:left}
  .empty-note strong{color:var(--ink)}

  /* Selected works — fanned out, but straight.
     The four artworks overlap in a horizontal fan, spread out from one
     large centre work — but every card stays upright, with no rotation
     or tilt. Hovering (or focusing, or tapping) a side work glides it
     to the centre on one long, smooth easing curve shared by every
     moving property, so sweeping the mouse across the fan never feels
     jumpy. Nothing moves on a timer, on scroll, or on its own. The
     detail box stays hidden until a specific artwork is clicked. */
  .works-wrap{max-width:980px;margin:0 auto}
  .works-fan{--cardw:min(360px,64vw);position:relative;height:calc(var(--cardw) + 64px);touch-action:pan-y}
  @media (max-width:640px){ .works-fan{--cardw:min(300px,56vw)} }
  .work-card{position:absolute;left:50%;top:50%;width:var(--cardw);margin:0;padding:0;background:none;border:none;cursor:pointer;font-family:inherit;text-align:inherit;-webkit-tap-highlight-color:transparent;transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}
  .work-art{width:100%;aspect-ratio:1/1;border:1.5px dashed var(--line2);border-radius:16px;background:var(--bg2);display:grid;place-items:center;text-align:center;padding:32px;color:var(--faint);box-shadow:0 14px 30px rgba(0,0,0,.32);transition:border-color .45s ease,box-shadow .5s cubic-bezier(.22,1,.36,1),background-color .45s ease}
  .work-art .mono{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:10px;color:var(--wood-deep)}
  .work-art p{margin:0 auto;font-size:15.5px;max-width:32ch}
  .work-card .work-num{position:absolute;top:14px;left:16px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--wood);background:rgba(27,23,18,.78);border:1px solid var(--line2);border-radius:999px;padding:3px 9px;z-index:1}
  .work-card:hover .work-art{border-color:var(--wood);box-shadow:0 22px 44px rgba(0,0,0,.45)}
  .work-card:focus-visible{outline:none}
  .work-card:focus-visible .work-art{outline:2px solid var(--wood-strong);outline-offset:3px;border-color:var(--wood)}
  .work-card[aria-current="true"] .work-art{border-color:var(--wood);border-style:solid;box-shadow:0 22px 44px rgba(0,0,0,.45)}
  .works-hint{text-align:center;color:var(--faint);font-size:13.5px;margin:20px 0 0;font-family:"JetBrains Mono",monospace;letter-spacing:.04em}
  /* Fan steppers: because the cards overlap like a real fan, these give
     touch and keyboard users a guaranteed way to bring every work to
     the centre, where it can then be tapped for its details. */
  .fan-nav{display:flex;justify-content:center;gap:14px;margin-top:14px}
  .fan-arrow:disabled{opacity:.35;cursor:default}
  .fan-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;font-family:inherit;padding:0 0 3px;transition:border-color .3s ease,color .3s ease}
  .fan-arrow:hover{border-color:var(--wood);color:var(--wood-strong)}
  .work-detail{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;text-align:center}
  .work-detail .mono{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);display:block;margin-bottom:8px}
  .work-detail h3{font-size:25px;margin-bottom:4px;color:var(--faint);font-style:italic;font-weight:400}
  .work-detail .release-artist{font-size:17px}
  .work-detail.swap{animation:workSwap .5s cubic-bezier(.22,1,.36,1)}
  @keyframes workSwap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (max-width:640px){ .work-art{padding:26px} }
  @media (prefers-reduced-motion: reduce){ .work-card,.work-art{transition:none} .work-detail.swap{animation:none} }

  /* Clow Engine — a photo of the rig with a description */
  #engine{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .engine-photo{border-radius:16px;overflow:hidden;border:1px solid var(--line);max-width:820px;margin:0 auto}
  .engine-photo img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
  .engine-photo figcaption{padding:12px 16px;font-size:13.5px;color:var(--faint);background:var(--surface);text-align:center}
  .engine-desc{max-width:640px;margin:26px auto 0;text-align:center}
  .engine-desc p{color:var(--muted);margin:0 0 14px}
  .engine-desc p strong{color:var(--ink)}

  /* About + Contact */
  .about-body{max-width:680px;margin:0 auto;text-align:center}
  .about-body p{color:var(--muted);margin:0 auto 14px}
  .about-body p strong{color:var(--ink)}
  /* About photo — single placeholder slot for now, real photo to follow */
  .about-single{max-width:680px;margin:0 auto 28px}
  .about-photo{border:1.5px dashed var(--line2);border-radius:12px;aspect-ratio:4/3;background:var(--bg2);display:grid;place-items:center;text-align:center;padding:20px;color:var(--faint)}
  .about-photo .mono{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px;color:var(--wood-deep)}
  .about-photo p{margin:0 auto;font-size:14px;max-width:24ch}
  @media (max-width:480px){.about-photo{padding:14px}.about-photo p{font-size:13px}}
  .contact-actions{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto}
  .contact-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:14px 18px;border-radius:12px;text-decoration:none;font-weight:800;font-size:16px;text-align:center}
  .contact-btn-call{background:var(--wood);color:#1b1712}
  .contact-btn-call:hover{background:var(--wood-strong)}
  .contact-btn-quiet{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
  .contact-btn-quiet:hover{border-color:var(--wood);color:var(--wood-strong)}

  /* ===== /key — exact layout from the brief ===== */
  .key-page{max-width:var(--keymax);margin:0 auto;background:var(--bg);border:1px solid var(--line2);border-radius:20px;padding:40px 28px 36px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
  @media (max-width:520px){.key-page{padding:32px 20px 28px}}
  .key-page h2{font-size:28px;text-align:left;margin-bottom:26px}
  .key-page .releases{gap:44px}
  .key-page .release{max-width:none}
  .key-contact{margin-top:52px;border-top:1px solid var(--line);padding-top:36px}
  .key-contact h2{margin-bottom:18px}
  .key-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:14px 18px;border-radius:12px;text-decoration:none;font-weight:800;font-size:16px;margin-bottom:12px;text-align:center}
  .key-btn-call{background:var(--wood);color:#171310}
  .key-btn-call:hover{background:var(--wood-strong)}
  .key-btn-quiet{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
  .key-btn-quiet:hover{border-color:var(--wood);color:var(--wood-strong)}
  .key-portfolio{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
  .key-portfolio a{color:var(--muted);font-weight:600;text-decoration:none;font-size:15.5px}
  .key-portfolio a:hover{color:var(--wood-strong);text-decoration:underline}

  /* Separate-page routing: /key and /discography are their own pages */
  [hidden]{display:none !important}
  .sub-shell{min-height:100vh;background:#171310;padding:28px 20px 56px}
  .sub-topbar{max-width:var(--submax);margin:0 auto 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .sub-topbar .brand{font-size:17px}
  .sub-back{color:var(--muted);text-decoration:none;font-weight:700;font-size:14px}
  .sub-back:hover{color:var(--wood-strong);text-decoration:underline}
  .key-shell .sub-topbar{max-width:var(--keymax)}

  /* Discography — all works, grouped by year, newest first */
  .disco{max-width:var(--submax);margin:0 auto}
  .disco h1{font-size:clamp(30px,5vw,42px);margin-bottom:10px}
  .disco .lede{color:var(--muted);margin:0 0 36px;max-width:58ch}
  .disco-year{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.14em;color:var(--wood);margin:34px 0 6px}
  .disco-list{list-style:none;margin:0;padding:0}
  .disco-row{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:16px 0;border-bottom:1px solid var(--line)}
  .disco-row .t{font-family:"Libre Caslon Text",serif;font-size:19px;color:var(--faint);font-style:italic}
  .disco-row .a{font-weight:700;font-size:15.5px}
  .disco-row .c{color:var(--muted);font-size:14.5px}
  .disco-row .l{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--faint);align-self:start;padding-top:4px;white-space:nowrap}
  .disco-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--muted);font-size:15px;margin-top:36px}
  .disco-note strong{color:var(--ink)}

  footer{border-top:1px solid var(--line);padding:34px 0 44px;color:var(--faint);font-size:14px}
  .foot-in{display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center}
  .foot-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
  .foot-links a{color:var(--muted);text-decoration:none;font-weight:600}
  .foot-links a:hover{color:var(--wood-strong)}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

  /* PROTOTYPE ONLY — exploded work view */
  .explode-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(8,6,4,.10);backdrop-filter:blur(10px) saturate(.9);-webkit-backdrop-filter:blur(10px) saturate(.9);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s ease, visibility 0s linear .35s}
  .explode-backdrop.open{opacity:1;visibility:visible;transition:opacity .35s ease}
  .explode-panel{position:relative;width:100%;max-width:920px;background:#26201a;border:1px solid #4a3f30;border-radius:18px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.92) translateY(14px);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease}
  .explode-art{border:1px dashed #6b5d49;border-radius:14px;min-height:340px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(255,255,255,.02)}
  .explode-art span{color:#f5efe4}.explode-art .mono{color:#d8b875;letter-spacing:.1em}
  .explode-details{display:flex;flex-direction:column;justify-content:center;gap:8px}
  .explode-details h3{font-size:32px;line-height:1.15;margin:4px 0}
  .explode-details .release-artist{font-size:19px;color:#f5efe4}.explode-details .release-credit{color:#cfc6b8}
  .explode-listen{display:inline-block;margin-top:14px;padding:12px 18px;border:1px solid #d8b875;border-radius:999px;color:#f5efe4;font-weight:700;text-decoration:none;width:fit-content}
  .explode-close{position:absolute;top:12px;right:14px;background:none;border:1px solid #4a3f30;color:#f5efe4;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer}

  .explode-backdrop.open .explode-panel{transform:scale(1) translateY(0);opacity:1}
  .explode-backdrop.open .explode-art{animation:fadeUp .55s .08s cubic-bezier(.22,1,.36,1) both}
  .explode-backdrop.open .explode-details>*{animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both}
  .explode-backdrop.open .explode-details>*:nth-child(2){animation-delay:.12s}.explode-backdrop.open .explode-details>*:nth-child(3){animation-delay:.18s}.explode-backdrop.open .explode-details>*:nth-child(4){animation-delay:.24s}.explode-backdrop.open .explode-details>*:nth-child(5){animation-delay:.30s}
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .explode-nav{display:flex;gap:10px;margin-top:18px}
  .explode-nav button{background:none;border:1px solid #4a3f30;color:#f5efe4;border-radius:999px;padding:8px 14px;cursor:pointer;font-size:16px}
  .explode-nav button:hover{border-color:#d8b875}
  .explode-nav button:disabled{opacity:.35;cursor:default}
  .work-card{transition:transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s ease;cursor:pointer}
  .work-card:hover{box-shadow:0 0 0 2px rgba(216,184,117,.6)}
  .work-card:focus-visible{outline:2px solid #d8b875;outline-offset:4px}
  @media (prefers-reduced-motion: reduce){.explode-backdrop,.explode-panel,.work-card{transition:none}.explode-backdrop.open .explode-art,.explode-backdrop.open .explode-details>*{animation:none}}
  @media(max-width:700px){.explode-panel{grid-template-columns:1fr;padding:20px}.explode-art{min-height:240px}}


  .site-footer{border-top:1px solid var(--line2);background:#1a1613;margin-top:64px;padding:48px 0 24px}
  .foot-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;max-width:640px;margin:0 auto}
  .foot-brand p{color:var(--faint);margin:8px 0 0}.foot-brand .foot-quiet{font-size:14px}
  .foot-head{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:12px;line-height:18px;margin:0 0 12px}
  .foot-col a{display:block;color:var(--ivory);text-decoration:none;margin:0 0 12px;line-height:1.5}.foot-col a:hover{color:var(--gold)}
  .foot-base{border-top:1px solid var(--line2);margin-top:36px;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;color:var(--faint);font-size:14px}.foot-base a{justify-self:end}
  .foot-base a{color:var(--ivory);text-decoration:none}
  @media(max-width:700px){.foot-grid{grid-template-columns:1fr}.foot-base{grid-template-columns:1fr;text-align:center}.foot-base a{justify-self:center}}


  #contact{text-align:center;border-top:1px solid var(--line)}
  #contact .sec-head{margin-left:auto;margin-right:auto}
  #contact .contact-actions{margin-left:auto;margin-right:auto}


  .inquiry-form{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;text-align:left;width:100%}
  .inquiry-form label{width:100%}
  .inquiry-form input,.inquiry-form textarea{width:100%;box-sizing:border-box}
  .inquiry-form label{color:var(--ivory);font-size:14px;font-weight:700;display:flex;flex-direction:column;gap:6px}
  .inquiry-form input,.inquiry-form select,.inquiry-form textarea{background:#26201a;border:1.5px solid var(--line2);border-radius:12px;color:var(--ivory);padding:13px 14px;font:inherit;font-weight:400}
  .inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
  .inquiry-note{color:var(--faint);font-size:14px;text-align:center;margin:0}


  .full-disco-link{position:relative;display:inline-block;padding:12px 24px;border:1.5px solid var(--gold);border-radius:999px;background:var(--bg);color:var(--ink);font-size:15px;font-weight:800;text-decoration:none;letter-spacing:.02em;opacity:1;box-shadow:0 0 16px rgba(216,184,117,.50);transition:background .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease}
  .full-disco-link::before{content:"";position:absolute;inset:-16px;border-radius:999px}
  .full-disco-link:hover{background:#f2d98c;color:#1b1712;box-shadow:0 0 28px rgba(216,184,117,.80);transform:translateY(-2px)}
  .full-disco-link .fd-arrow{display:inline-block;transition:transform .35s ease}
  .full-disco-link:hover .fd-arrow{transform:translate(2px,-2px)}


  /* Mobile top buttons: same single-row format as desktop, not a wrapped
     stack of desktop-sized pills. Scale the row down so all four fit in
     one row on a phone, and shrink the fixed hero so it stops eating the
     screen. JS re-measures the hero height live, so scroll offset follows. */
  @media (max-width:600px){
    :root{--chrome:178px}
    html{scroll-padding-top:178px}
    section{padding:28px 0}
    #work{padding-top:20px}
    .hero{padding:12px 0 10px}
    .hero .wrap{padding:0 12px}
    .hero .cta-row{flex-wrap:nowrap;gap:8px}
    .hero .btn{flex:1 1 0;min-width:0;white-space:nowrap;font-size:clamp(11px,3.4vw,13px);padding:10px 6px;min-height:40px;border-radius:8px}
  }