/* DeadBeak home (index.html) and contact (contact.html). Header, footer, buttons, links, hover layer and
   motion states come from styles.css; tokens from tokens.css. Light-theme rules are at the end of this file. */
.studio-page{color:var(--paper-heading)}

/* Section names: a quiet sans label that names the section. Mono stays for status words and code. */
.section-name{margin:0;font:500 var(--step--1)/1.5 var(--font);letter-spacing:0;color:var(--accent-soft)}

/* ---------- Home hero: one bold element and three doors ---------- */
.studio-hero{padding-top:var(--s-6);padding-bottom:var(--s-7)}
.studio-hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:42px;align-items:center;padding:56px 0 var(--s-5)}
.studio-hero h1{font-size:clamp(3.25rem,5.7vw,5.25rem);font-weight:400;line-height:1.055;letter-spacing:var(--track-display);margin:0 0 29px}
.studio-lead{font-size:var(--step-0);line-height:1.75;color:var(--text-soft);max-width:470px;margin:0}

.hero-doors{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);max-width:620px}
.hero-doors>li{display:flex;min-width:0}
.hero-door{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);width:100%;min-height:44px;padding:var(--s-4);border:1px solid var(--frame-line);border-radius:var(--radius-2);background:var(--surface-1);color:var(--white)}
.door-mark{display:inline-block;margin-bottom:var(--s-2);font:400 28px/1 var(--font);color:var(--green);transform:rotate(-10deg)}
.door-mark-uql{font:400 19px/28px var(--mono);letter-spacing:-.2em;transform:none}
.door-name{font-size:var(--step-1);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.door-status{font:400 var(--label)/1.5 var(--mono);letter-spacing:var(--track-label);color:var(--accent-soft)}
.door-status.is-upcoming{color:var(--muted)}
@media (hover:hover) and (pointer:fine){.hero-door:hover .door-name{color:var(--green)}}
.hero-door:focus-visible .door-name{color:var(--green)}
.door-name{transition:color var(--dur-in) var(--ease-ui)}

.beak-art{position:relative;aspect-ratio:1.07;background:radial-gradient(ellipse at 49% 46%,#253924 0,#162219 48%,#101913 75%);border:1px solid var(--dark-line);overflow:hidden;display:grid;place-items:center}
.beak-art::before{content:'';position:absolute;inset:23px;border:1px solid var(--dark-line)}
.beak-art>svg{width:68%;height:68%;color:#b6d69a;filter:drop-shadow(0 15px 30px #080f08)}

/* The beak draws in once: the outline traces (900ms), then the filled shapes fade in under it (300ms).
   With JS off or motion reduced, the trace has no stroke and the plain filled emblem shows. */
.beak-trace{fill:none;stroke:none}
@keyframes studio-beak-trace{0%{stroke-dashoffset:1;opacity:1}75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes studio-beak-fill{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  html.js .beak-trace{stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:0;animation:studio-beak-trace 1200ms var(--ease-out) 160ms backwards}
  html.js .beak-fill{animation:studio-beak-fill 300ms var(--ease-out) 1060ms backwards}
  html.js.motion-pending :is(.beak-trace,.beak-fill){animation-play-state:paused}
}
@media print{.beak-trace{display:none}.beak-fill{animation:none!important;opacity:1!important}}

/* ---------- Sections ---------- */
.studio-section{padding-block:85px}
.studio-section-title{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:50px;margin-bottom:42px}
.studio-section-title .section-name{margin-top:10px}
.studio-section h2{font-size:var(--step-4);font-weight:400;line-height:1.12;letter-spacing:var(--track-h2);margin:0}
.studio-section-title>div>p{font-size:var(--step-0);line-height:1.75;max-width:480px;color:var(--text-soft);margin:22px 0 0}

/* Tool rows: UDB first and wider (available), UQL second with a smaller card (in development).
   Each row is one link target: the heading link stretches over the row, the inner links sit above it. */
.studio-tool{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:55px;padding:39px 0;border-top:1px solid var(--line);align-items:center}
.tool-row{position:relative;transition:transform var(--dur-in) var(--ease-ui),border-color var(--dur-in) var(--ease-ui)}
.tool-row-uql{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.row-link{color:inherit;transition:color var(--dur-in) var(--ease-ui)}
.row-link::after{content:'';position:absolute;inset:0;z-index:1}
.tool-row .tool-links{position:relative;z-index:2}
.tool-visual{display:block;border:1px solid var(--frame-line);background:var(--surface-1);overflow:hidden;transition:border-color var(--dur-in) var(--ease-ui)}
.tool-visual img{aspect-ratio:1.917;object-fit:cover;transition:transform var(--dur-panel) var(--ease-ui)}
.tool-row-uql .tool-visual{max-width:520px}
@media (hover:hover) and (pointer:fine){
  .tool-row:hover{transform:translateY(-2px);border-color:var(--green-40)}
  .tool-row:hover .tool-visual{border-color:var(--green-40)}
  .tool-row:hover .tool-visual img{transform:scale(1.02)}
  .tool-row:hover .row-link{color:var(--green)}
}
@supports selector(:has(a)){
  .tool-row .row-link:focus-visible{outline:none}
  .tool-row:has(.row-link:focus-visible){transform:translateY(-2px);outline:2px solid var(--green);outline-offset:6px}
  .tool-row:has(.row-link:focus-visible) .tool-visual{border-color:var(--green-40)}
  .tool-row:has(.row-link:focus-visible) .tool-visual img{transform:scale(1.02)}
  .tool-row:has(.row-link:focus-visible) .row-link{color:var(--green)}
}
.tool-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:var(--step--1);line-height:1.4;color:var(--muted);border-bottom:1px solid var(--frame-line)}
.tool-visual-footer{font-size:var(--step--1);line-height:1.4;color:var(--muted);padding:11px 16px}
.studio-tool-copy .tool-status{font:var(--label)/1.6 var(--mono);letter-spacing:var(--track-label);color:var(--accent-soft)}
.studio-tool-copy .tool-status.upcoming{color:var(--muted)}
.studio-tool-copy h3{font-size:34px;font-weight:400;line-height:1.15;letter-spacing:var(--track-h2);margin:17px 0 6px}
.tool-row-uql .studio-tool-copy h3{font-size:30px}
.studio-tool-copy .tool-name{font-size:var(--step--1);color:var(--muted)}
.studio-tool-copy p{font-size:var(--step-0);line-height:1.75;color:var(--text-soft);max-width:440px;margin:20px 0}
.tool-links{display:flex;gap:4px 23px;flex-wrap:wrap}
.query-art{padding:26px 28px 18px;min-height:200px}
.query-art .query-label{font-size:var(--step--1);color:var(--muted);margin:0 0 18px}
.query-art pre{font:clamp(12px,1.1vw,14px)/1.9 var(--mono);white-space:pre;overflow:auto;margin:0;color:var(--paper-text)}
.query-art .kw{color:var(--green)}
.query-art .note{color:var(--muted)}

/* Games: a dark band in both themes, one statement, no mono chrome. */
.studio-games{--studio-night:#0b110e;background:var(--studio-night);border-block:1px solid var(--line)}
.game-poster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-7);align-items:center;padding-top:var(--s-5)}
.game-wordmark strong{display:block;font-size:clamp(3rem,5.6vw,4.875rem);line-height:.98;letter-spacing:var(--track-display);font-weight:400;color:var(--accent-soft)}
.game-copy{padding-left:var(--s-7);border-left:1px solid var(--frame-line)}
.game-status{margin:0 0 var(--s-4);font-size:var(--step--1);font-weight:500;color:var(--accent-soft)}
.game-copy h3{font-size:29px;font-weight:400;letter-spacing:var(--track-h2);margin:0 0 20px}
.game-copy p:not(.game-status){font-size:var(--step-0);line-height:1.8;color:var(--text-soft);max-width:370px}
.game-copy p.game-note{border-top:1px solid var(--frame-line);padding-top:22px;margin-top:28px;font-size:var(--step--1);line-height:1.7;color:var(--muted)}

/* Story. The first paragraph lights up word by word as it crosses the viewport (studio.js wraps the words,
   only where scroll-driven animations exist and motion is allowed). Fallback: the paragraph as written. */
.story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:50px}
.story-aside .section-name{margin-top:10px}
.story-aside>p:last-child{max-width:220px;margin-top:var(--s-5);font-size:17px;line-height:1.7;color:var(--muted)}
.story-copy{max-width:670px}
.story-copy h2{margin-bottom:30px}
.story-copy>p{font-size:17px;line-height:1.85;color:var(--text-soft);margin:0 0 23px}
/* The statement rests in full ink, so the fallback (no scroll timelines, reduced motion, JS off) is the final frame. */
.story-copy>p.story-statement{color:var(--white)}
.story-signature{font-size:25px;color:var(--paper-text);margin-top:35px;letter-spacing:var(--track-display)}
.story-signature span{display:block;font-size:var(--step--1);letter-spacing:0;color:var(--muted);margin-top:8px}
@keyframes studio-word-ink{from{color:var(--muted)}to{color:var(--white)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .is-word-lit{view-timeline:--story-words block}
    .is-word-lit .w{animation:studio-word-ink linear both;animation-timeline:--story-words;animation-range:cover calc(10% + var(--p,0) * 42%) cover calc(18% + var(--p,0) * 42%)}
  }
}

/* Docs doorways */
.studio-docs{border-top:1px solid var(--line);padding-top:55px}
.doc-doorways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.doc-doorway{display:block;border-top:1px solid var(--frame-line);padding:26px 0}
.doc-doorway strong{font-size:21px;letter-spacing:var(--track-h2);font-weight:500;transition:color var(--dur-in) var(--ease-ui)}
.doc-doorway p{font-size:15px;line-height:1.7;color:var(--muted);margin:10px 0 0;max-width:430px}
@media (hover:hover) and (pointer:fine){.doc-doorway:hover strong{color:var(--green)}}
.doc-doorway:focus-visible strong{color:var(--green)}

/* Contact band on home */
.studio-contact{border-block:1px solid var(--band-line);background:var(--band);padding-block:52px}
.studio-contact .shell{display:flex;align-items:center;justify-content:space-between;gap:40px}
.studio-contact .section-name{margin-bottom:14px}
.studio-contact h2{font-size:clamp(2.25rem,1.9rem + 1.2vw,2.625rem);line-height:1.15;letter-spacing:var(--track-h2);font-weight:400;margin:0}
.studio-contact p:not(.section-name){font-size:var(--step-0);color:var(--text-soft);line-height:1.7;margin:15px 0 0}

/* ---------- Contact page ---------- */
.contact-main{padding-block:74px 90px}
.contact-main>.section-name{margin-bottom:var(--s-4)}
.contact-main h1{font-size:clamp(3.0625rem,6vw,4.8125rem);line-height:1.04;letter-spacing:var(--track-display);font-weight:400;margin:0 0 27px}
.contact-main>.studio-lead{max-width:620px}
.contact-action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5);margin:35px 0 60px}
.contact-email{display:inline-flex;align-items:center;gap:23px;min-width:0;font-size:clamp(17px,2.7vw,30px);letter-spacing:-.02em;color:var(--green);padding-bottom:13px;border-bottom:1px solid var(--green-40);overflow-wrap:anywhere;transition:border-color var(--dur-in) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.contact-email:hover{border-bottom-color:var(--green)}}
.contact-email:focus-visible{border-bottom-color:var(--green)}
.copy-button{min-width:9.5rem}
.copy-button.is-copied{color:var(--green);border-color:var(--green-40)}
.contact-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px}
.contact-columns>section{border-top:1px solid var(--frame-line);padding-top:27px}
.contact-col-head .section-name{margin-bottom:var(--s-3)}
.contact-columns h2{font-size:28px;letter-spacing:var(--track-h2);line-height:1.2}
.contact-columns p,.contact-columns li{font-size:var(--step-0);line-height:1.8;color:var(--text-soft)}
.contact-columns :is(ul,ol){padding-left:22px}
.contact-columns li{padding-left:6px}
.contact-columns ol>li::marker{font:500 var(--step--1) var(--mono);color:var(--accent-soft)}
.contact-directory{margin-top:38px;padding-top:20px;border-top:1px solid var(--frame-line);display:flex;flex-wrap:wrap;gap:0 24px;font-size:14px;color:var(--accent-soft)}
.contact-directory a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;transition:color var(--dur-in) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.contact-directory a:hover{color:var(--green)}}
.contact-directory a:focus-visible{color:var(--green)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .studio-hero h1{font-size:60px}
  .studio-hero-grid{gap:30px}
  .hero-door{padding:var(--s-3)}
  .studio-tool{gap:35px}
  .game-copy{padding-left:var(--s-6)}
  .studio-section-title,.story-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:35px}
}
@media(max-width:800px){
  .studio-hero{padding-top:0;padding-bottom:var(--s-6)}
  .studio-hero-grid{grid-template-columns:minmax(0,1fr);padding:37px 0 0;gap:35px}
  .studio-hero h1{font-size:clamp(2.8125rem,8vw,4.125rem);line-height:1.08}
  .studio-lead{max-width:550px}
  .hero-doors{margin-top:var(--s-5)}
  .hero-door{padding:var(--s-4)}
  .beak-art{aspect-ratio:1.7;max-width:100%}
  .beak-art>svg{width:50%;height:80%}
  .beak-art::before{inset:16px}
  .studio-section{padding-block:55px}
  .studio-section-title,.story-layout{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:26px}
  .studio-section-title .section-name,.story-aside .section-name{margin-top:0}
  .studio-section-title>div>p{margin-top:18px}
  .studio-tool,.tool-row-uql{grid-template-columns:minmax(0,1fr);gap:26px;padding-block:28px}
  .tool-row-uql .tool-visual{max-width:none}
  .studio-tool-copy h3,.tool-row-uql .studio-tool-copy h3{font-size:30px;margin-top:14px}
  .studio-tool-copy p{margin-block:17px}
  .query-art{min-height:0;padding:22px 20px 16px}
  .game-poster{grid-template-columns:minmax(0,1fr);gap:var(--s-6);padding-top:0}
  .game-wordmark strong{font-size:clamp(3rem,13vw,4.0625rem)}
  .game-copy{padding:var(--s-6) 0 0;border-left:0;border-top:1px solid var(--frame-line)}
  .game-copy h3{font-size:26px}
  .story-aside>p:last-child{display:none}
  .story-copy h2{margin-bottom:25px}
  .story-signature{margin-top:25px}
  .doc-doorways{grid-template-columns:minmax(0,1fr);gap:8px}
  .doc-doorway strong{font-size:20px}
  .studio-contact .shell{display:block}
  .studio-contact .button{margin-top:25px}
  .contact-main{padding-block:48px 55px}
  .contact-columns{grid-template-columns:minmax(0,1fr);gap:34px}
  .contact-action{margin-bottom:40px}
  .contact-email{font-size:clamp(17px,5.2vw,25px);gap:13px}
  .contact-main h1{font-size:clamp(2.5rem,11vw,3.3125rem)}
  .contact-columns h2{font-size:27px}
}
@media(max-width:639.98px){
  /* Doors become rows: mark at the left, name and status beside it. */
  .hero-doors{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .hero-door{display:grid;grid-template-columns:2.25rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s-3);row-gap:2px;align-items:center;padding:var(--s-3) var(--s-4)}
  .door-mark{grid-row:1/3;margin:0;text-align:center}
  .door-name{grid-column:2}
  .door-status{grid-column:2}
}

/* ---------- Light theme. Screenshot frames and the games band keep their dark palette (.island). ---------- */
:root[data-theme="light"] :is(
  .studio-lead, .studio-section-title > div > p, .studio-tool-copy p,
  .studio-tool-copy .tool-name, .studio-tool-copy .tool-status.upcoming,
  .story-aside > p:last-child, .story-copy > p:not(.story-statement),
  .story-signature span, .doc-doorway p, .studio-contact p:not(.section-name),
  .contact-columns p, .contact-columns li
) { color: var(--paper-muted); }
:root[data-theme="light"] .story-signature { color: var(--paper-heading); }
:root[data-theme="light"] .studio-tool-copy .tool-status { color: var(--green); }
:root[data-theme="light"] .beak-art {
  background: radial-gradient(ellipse at 49% 46%, #d7dfc9 0, #e8ebdf 50%, #f1f0e8 80%);
  border-color: var(--dark-line);
}
:root[data-theme="light"] .beak-art::before { border-color: #bdc9b2; }
:root[data-theme="light"] .beak-art > svg { color: #547347; filter: drop-shadow(0 15px 24px #48563821); }
:root[data-theme="light"] .studio-games { border-color: #2a3a2c; }
:root[data-theme="light"] :is(.doc-doorway, .contact-columns > section, .contact-directory) { border-color: var(--dark-line); }
:root[data-theme="light"] .studio-contact { background: #dce5d3; border-color: #b8c7ae; }
:root[data-theme="light"] .contact-email { border-color: #8ca182; }
:root[data-theme="light"] .contact-email:focus-visible { border-bottom-color: var(--green); }
@media (hover:hover) and (pointer:fine){ :root[data-theme="light"] .contact-email:hover { border-bottom-color: var(--green); } }
/* The tool frames stay dark islands (themes.css); these are their inner colours. */
:root[data-theme="light"] :is(.tool-bar, .tool-visual-footer, .query-art .query-label, .query-art .note) { color: #b0bda8; }
:root[data-theme="light"] .query-art pre { color: #d0dfc5; }
:root[data-theme="light"] .query-art .kw { color: #c2ef91; }