/* Hero, dark mode and grid tweaks, 7 October 2026 (Joseph's phone reference). Loaded last. */

/* Dark mode: charcoal rather than near-black, frames a step lighter. */
body.dark{--paper:#282828;--surface:#303030;--card:#333333;--line:#ffffff1f}
html:has(body.dark){background:linear-gradient(#282828 50%,var(--night) 50%) fixed}

/* Eyebrow: optically level with the headline's first letter, and closer to it. */
.agency-heading .studio-eyebrow{margin-bottom:10px;padding-left:2px}
@media(max-width:600px){.agency-heading .studio-eyebrow{margin-bottom:8px;padding-left:1px}}

/* Toggles as words again: "Dark mode (Y)" / "Monochrome (N)", stacked. */
.settings .theme-toggle,.settings .mono-toggle{font-size:11px!important;line-height:1.3!important;width:auto!important;height:auto!important;display:inline-flex!important;gap:6px;border-radius:0!important;white-space:nowrap;padding:2px 0}
.settings .theme-toggle span,.settings .mono-toggle span{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}
.agency-info>.settings .theme-toggle{grid-column:1;grid-row:1;margin:0}
.agency-info>.settings .mono-toggle{grid-column:1;grid-row:2;margin:0!important}
.agency-info>.settings .studio-status{grid-row:1/3}
/* Status shows the visitor's screen size and device again (no booking line). */
.studio-status .status-label,.studio-status .status-value{display:none!important}
.studio-status .dev-info{display:flex!important;flex-direction:column;gap:3px;font-size:11px;font-variant-numeric:tabular-nums}
.studio-status{pointer-events:none;cursor:default}

/* Thinner panel. */
/* Phone hero panel, matched to Joseph's reference screenshot (about 388 × 136). */
@media(max-width:600px){
  .agency-info{min-height:0!important;row-gap:4px!important;padding-bottom:20px!important}
  .agency-info>.clock-block{margin-top:24px!important}
  .agency-info>.settings{margin-top:12px!important}
  .agency-info>.palette-controls{top:calc(var(--flow-top,84px) + 70px)!important}
  .agency-info .city{font-family:Basis,Arial,sans-serif!important;font-size:10.5px!important;letter-spacing:.02em!important}
  .agency-info .time{font-size:10.5px!important}
  .agency-info>.settings .theme-toggle,.agency-info>.settings .mono-toggle{font-size:10.5px!important}
  .agency-info .palette-controls{transform:translateY(8px) scale(.9)!important;transform-origin:right center}
  .settings .theme-toggle,.settings .mono-toggle{gap:4px}
}

/* Project numbers sit on the second line, level with the descriptor. */
.project-meta{align-items:end!important}
.project-meta .number{padding-top:0!important;align-self:end;line-height:inherit}

/* Frames: images sit inside a soft card, like the reference. */
html.tf-framed .tf-work .portfolio:not(.is-list) .project:not(.project-wip) .project-art{background:#ecebe8;border-radius:4px;overflow:hidden}
body.dark .tf-work .portfolio:not(.is-list) .project:not(.project-wip) .project-art{background:var(--card)}
.settings .theme-toggle::after,.settings .mono-toggle::after{content:none!important;display:none!important}
.settings .theme-toggle>span,.settings .mono-toggle>span{display:inline!important;opacity:.85}
@media(max-width:600px){
  .agency-info>.settings .studio-status{left:51.5%;transform:translateY(-50%);align-items:flex-start;text-align:left}
  .agency-info>.settings{row-gap:1px}
  .studio-status .dev-info{font-size:10.5px!important;gap:2px}
}

/* Frames on phones: a thinner frame so the photos keep their size. */
@media(max-width:600px){html.tf-framed .tf-work .portfolio:not(.is-list) .project-art{padding:4.5% 4.5% 0!important}}

/* Clock city in the body font at every size (was the mono label face on desktop). */
.agency-info .city,.header-under-inner .city{font-family:Basis,Arial,sans-serif!important;letter-spacing:.02em!important}
/* Swatch centred on the toggles and screen-size lines. */
@media(min-width:601px){.agency-info>.palette-controls{transform:translateY(-7px)}}

/* "Selected work" line and grid/list toggle removed (heading kept for screen readers). */
.tf-work-heading{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;padding:0!important;margin:0!important;border:0!important}

/* Original Basis for the hero panel, the supporting line and project titles, descriptors and numbers. Teka stays for headings and long reading. */
@font-face{font-family:BasisClassic;src:url('shared/fonts/Basis-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
.agency-info,.agency-info>p,.agency-info .city,.agency-info .time,.agency-info .settings button,.agency-info .dev-info,.project-meta,.project-meta small,.project-meta .number{font-family:BasisClassic,Basis,Arial,sans-serif!important}

/* Touch screens: no hover state on project cards (it stuck on while scrolling). */
@media (hover:none){
  .project:hover img,.project:hover .project-art>img{transform:none!important}
  .project:hover .number{color:inherit!important}
  .project:hover .project-art,.project:active .project-art{background:inherit}
  html.tf-framed .tf-work .portfolio:not(.is-list) .project:not(.project-wip):hover .project-art{background:#ecebe8}
  body.dark .tf-work .portfolio:not(.is-list) .project:not(.project-wip):hover .project-art{background:var(--card)}
}

/* "Under wraps": with frames on, it sits in the frame's top margin on desktop, lined up with the photo; a compact tag on the photo on phones. */
html.tf-framed .tf-work .portfolio:not(.is-list) .project-art{container-type:inline-size}
html.tf-framed .tf-work .portfolio:not(.is-list) .tf-wraps{left:13cqw;top:calc(6.5cqw - 8px);padding:0;background:none;border-radius:0;color:var(--ink);font-size:9px;letter-spacing:.08em;gap:7px}
html.tf-framed .tf-work .portfolio:not(.is-list) .tf-wraps:before{width:6px;height:6px;background:var(--accent);box-shadow:0 0 0 0 #F46A43aa}
@media(max-width:600px){
  html.tf-framed .tf-work .portfolio:not(.is-list) .tf-wraps{left:calc(4.5cqw + 6px);top:calc(4.5cqw + 6px);padding:5px 7px 4px;background:#18181Bd9;color:#F5F6F7;border-radius:3px;font-size:8.5px;gap:6px;backdrop-filter:blur(4px)}
}
/* Without the "Selected work" row, the grid starts a little closer to the hero. */
.agency{padding-bottom:64px!important}
@media(max-width:600px){.agency{padding-bottom:30px!important}}

/* Hero rhythm, 8 Oct. Desktop: smaller headline so it clears the panel with a proper gutter. */
@media(min-width:1101px){.agency h1{font-size:clamp(40px,4.05vw,74px)!important;max-width:15.5ch}}
/* Phones: eyebrow → headline 14px, headline → supporting line 16px, supporting line → panel 26px. */
@media(max-width:600px){
  .agency{row-gap:16px!important}
  .agency-heading .studio-eyebrow{margin-bottom:14px!important;line-height:1.2!important}
  .agency h1{line-height:1.06!important}
  .agency-info>p{padding-bottom:26px!important;line-height:1.5}
}
/* Under wraps dot: a slow breath, not a blink. */
html.tf-framed .tf-work .portfolio:not(.is-list) .tf-wraps:before{animation:wrapsBreath 4.8s ease-in-out infinite!important;box-shadow:none!important}
@keyframes wrapsBreath{0%,60%,100%{opacity:1;transform:scale(1)}30%{opacity:.35;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){html.tf-framed .tf-work .portfolio:not(.is-list) .tf-wraps:before{animation:none!important}}