/* Calm entry, predictable navigation, and optional exploration. */
body.view-contact #contactView{display:block}
body.view-contact .view-toggle,body.view-grid .view-toggle{display:none}
nav.main button{min-height:44px}
.g-card{text-decoration:none;font-family:inherit}
.g-card:focus-visible{outline:4px solid var(--focus);outline-offset:5px}
.g-hero{max-width:850px;margin-bottom:30px}
.g-hero h1{font-size:clamp(2.15rem,5vw,3.7rem);line-height:1.12}
.g-hero p{font-size:1.05rem;max-width:66ch}
.featured-work{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--edge);border-radius:24px;overflow:hidden;background:var(--panel-solid);margin:0 0 52px}
.feature-photo{position:relative;min-height:320px;background:var(--bg-0)}
.feature-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.feature-photo span{position:absolute;bottom:10px;left:12px;color:#fff;background:rgba(0,0,0,.85);padding:3px 9px;border-radius:6px;font-size:.75rem}
.feature-story{padding:clamp(24px,3vw,40px);align-self:center}
.feature-story h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;margin:8px 0 14px;line-height:1.1}
.feature-deck{font-size:1.05rem;line-height:1.7}
.feature-meta{color:var(--ink-dim);font-size:.85rem;margin:18px 0}
.feature-story .btn-row{margin:22px 0;gap:12px}
.feature-contact{text-decoration:underline;text-underline-offset:4px;font-size:.95rem}
.work-heading{font-size:1.7rem;margin:0 0 20px}
.orbit-controls{display:none;position:fixed;z-index:12;right:24px;bottom:22px;max-width:340px;padding:12px 16px;border:1px solid var(--edge);border-radius:18px;background:var(--panel-solid)}
body.view-orbit:not(.detail-open) .orbit-controls{display:block}
.orbit-controls p{font-size:.8rem;line-height:1.5;margin-top:8px;color:var(--ink-dim)}
.hint,.counter{display:none}
#tip.kbd{border:3px solid var(--focus);background:var(--panel-solid);color:var(--ink);white-space:normal;max-width:80vw;font-size:1rem;bottom:160px}
.hero{top:calc(var(--head-h,96px) + 20px)}
.hero h1{font-size:clamp(1.8rem,4vw,3rem)}
.hero p{max-width:62ch}
.d-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-start;background:var(--panel-solid);padding:8px;border-radius:18px}
.d-top .back-btn:first-child{margin-right:auto}
.detail-inner{padding-top:130px}
#contactView .newsletter{margin-top:0;padding-top:14px}
#contactTitle{font-size:clamp(2rem,5vw,3.1rem);line-height:1.15;max-width:800px;margin:0 auto 20px}
.contact-email{font-size:1.05rem!important;margin-top:24px!important;overflow-wrap:anywhere}
.contact-email a{display:inline-block;padding:10px;text-underline-offset:4px}
.cf-note{line-height:1.6}
body.view-grid .g-wrap,body.view-contact .g-wrap{padding-bottom:50px}
@media(max-width:860px){
  header.top{gap:5px;padding:10px 12px}
  nav.main{gap:2px}
  nav.main button{font-size:.8rem;padding:7px 11px;min-height:44px}
  .featured-work{grid-template-columns:1fr;margin-bottom:32px}
  .feature-photo{min-height:0;aspect-ratio:3/2}
  .feature-story{padding:24px}
  .g-hero .kicker{letter-spacing:.14em}
  .hero{top:calc(var(--head-h,140px) + 12px)}
  .hero .kicker{font-size:.65rem;letter-spacing:.12em;margin-bottom:8px}
  .hero h1{font-size:1.8rem}
  .hero p{font-size:.85rem;line-height:1.5}
  .hero-still{display:none}
  .view-toggle{bottom:12px}
  .orbit-controls{bottom:72px;left:12px;right:12px;max-width:none;padding:10px 12px;display:none}
  .orbit-controls p{font-size:.75rem;margin-top:5px}
  .orbit-controls .pill{padding:8px 14px;min-height:44px}
  #tip.kbd{bottom:210px}
  .d-top{top:8px;left:8px;right:8px;gap:5px}
  .d-top .back-btn{font-size:.8rem;padding:8px 10px;min-height:44px}
  .detail-inner{padding-top:145px}
}
@media(max-width:400px){.g-hero h1{font-size:2rem}.btn-row .btn{max-width:100%;white-space:normal}.d-top .back-btn:first-child{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.orbit-controls,.feature-story button{display:none!important}.featured-work{break-inside:avoid}.feature-photo img{position:static}.feature-photo{min-height:0}body.view-contact #contactView{display:block!important}#contactView{display:none!important}}

/* Night keeps its violet palette with readable white labels on filled controls. */
:root[data-theme="night"]{--grad:linear-gradient(135deg,#5941af,#7047b9);--grad-strong:linear-gradient(135deg,#5941af,#7047b9)}

/* Project text stays below wrapped controls when text is enlarged. */
.detail-inner{padding-top:calc(var(--detail-head-h,105px) + 40px)}

/* Keep image credits separate from the full-size control at narrow widths. */
.d-credit{bottom:76px;left:12px;right:auto;max-width:calc(100% - 24px);border-radius:12px;overflow-wrap:anywhere}
.d-art .zoom{min-height:44px;max-width:calc(100% - 24px);white-space:normal}
