:root { color-scheme: light; --bg:#fff; --text:#171914; --muted:#55594f; --accent:#496000; --line:#dbded4; }
html { scroll-padding-top:90px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.shell { margin-inline:clamp(10px, 1.5vw, 24px); }
.top { position:sticky; top:0; z-index:2; margin-inline:0; padding-inline:clamp(10px, 1.5vw, 24px); background:var(--bg); box-shadow:0 1px 0 var(--line); min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.wordmark { justify-self:start; }
.header-note { color:var(--muted); font-size:.82rem; margin:0; }
.wordmark img { display:block; width:104px; height:auto; }
.footer a span { color:var(--accent); }
.contact { justify-self:end; padding:.65rem 1rem; border:1px solid var(--text); background:var(--text); color:#fff; border-radius:4px; white-space:nowrap; font-size:.875rem; font-weight:650; }
.contact:hover, .contact:focus-visible { background:#fff; color:#171914; }
@media (prefers-reduced-motion:no-preference) { .contact { transition:background-color .3s ease-in-out, color .3s ease-in-out; } }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.label { color:var(--muted); margin:0; font-size:.76rem; font-weight:650; letter-spacing:.075em; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
@media (min-width:1200px) { .grid:not(.social-grid) { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.project { display:block; }
.thumb { position:relative; overflow:hidden; background:#eef0ea; aspect-ratio:16/9; }
.thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.watch-overlay { position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none; background:rgb(0 0 0 / 45%); padding:12px; text-align:center; color:#fff; font-size:1rem; font-weight:650; }
.watch-overlay h3 { margin:0; font:inherit; line-height:1.3; }
.project:focus-visible .watch-overlay { opacity:1; }
@media (hover:hover) { .project:hover .watch-overlay { opacity:1; } }
.footer { margin-top:40px; border-top:1px solid var(--line); padding-block:26px 34px; display:flex; justify-content:space-between; align-items:end; gap:14px; flex-wrap:wrap; }
.footer a { display:inline-block; margin-top:7px; font-size:clamp(1rem, 4vw, 1.55rem); }
.footer > p { color:var(--muted); font-size:.85rem; margin:0; }
dialog { width:min(1120px, calc(100% - 32px), calc((100dvh - 110px) * 1.777778)); max-height:calc(100dvh - 24px); padding:0; background:transparent; color:#fff; border:0; }
dialog::backdrop { background:rgb(0 0 0 / 88%); }
.player { padding:0; }
.player-head { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:44px; margin-bottom:8px; }
.player-head h2 { margin:0; font-size:clamp(.85rem, 1.5vw, 1rem); font-weight:500; line-height:1.35; }
.player-head button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; opacity:.7; }
.player-head button:hover, .player-head button:focus-visible { opacity:1; }
.player-head button:focus-visible { outline-color:#fff; outline-offset:-4px; }
.video-frame { aspect-ratio:16/9; background:#000; }
iframe { display:block; width:100%; height:100%; border:0; }
@media (max-width:950px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .top { min-height:68px; grid-template-columns:1fr 1fr; }
  .wordmark img { width:88px; }
  .header-note { display:none; }
  .grid { grid-template-columns:1fr; gap:9px; }
}
@keyframes lightbox-enter {
  from { opacity:0; transform:translateY(10px) scale(.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes backdrop-enter {
  from { opacity:0; }
  to { opacity:1; }
}
@media (prefers-reduced-motion:no-preference) {
  .player-head button { transition:opacity .2s ease-in-out; }
  .thumb img { transition:transform .55s ease-in-out; }
  .watch-overlay { transition:opacity .55s ease-in-out; }
  .project:focus-visible img { transform:scale(1.045); }
  @media (hover:hover) { .project:hover img { transform:scale(1.045); } }
  dialog[open] { animation:lightbox-enter .22s ease-out both; }
  dialog[open]::backdrop { animation:backdrop-enter .22s ease-out both; }
}
body:has(dialog[open]) { overflow:hidden; }

.about { margin-top:clamp(42px, 7vw, 92px); max-width:1080px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px, 4vw, 56px); align-items:center; }
.about-photo { display:block; width:100%; height:auto; }
@media (max-width:700px) { .about { grid-template-columns:1fr; max-width:630px; } }
.about h2 { margin:0 0 8px; font-size:1.35rem; letter-spacing:-.025em; }
.about p { margin:0; color:var(--muted); }
.about p + p { margin-top:12px; }

@media (prefers-reduced-motion:no-preference) {
  .grid article { transition:opacity .65s ease-out; }
  .grid article.awaiting-reveal:not(:focus-within) { opacity:0; }
  .grid article:focus-within { transition:none; }
}

.social-grid { margin-top:9px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.social-grid .thumb { aspect-ratio:9/16; }
@media (min-width:1200px) { .social-grid { grid-template-columns:repeat(7,minmax(0,1fr)); } }
dialog.portrait-player { width:min(400px, calc(100% - 32px), calc((100dvh - 110px) * .5625)); }
.portrait-player .video-frame { aspect-ratio:9/16; }
@media (max-width:480px) { .social-grid { grid-template-columns:1fr; } }

.reviews { margin-top:clamp(38px, 5vw, 72px); padding-top:28px; border-top:1px solid var(--line); }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px, 4vw, 64px); }
.review { margin:0; display:flex; flex-direction:column; align-items:start; }
.review-stars { font-size:.86rem; letter-spacing:.12em; margin-bottom:12px; }
.review blockquote { margin:0 0 18px; font-size:clamp(.95rem, 1.2vw, 1.08rem); line-height:1.55; }
.review blockquote p { margin:0; }
.review figcaption { margin-top:auto; font-size:.83rem; line-height:1.5; }
.review-name, .review-role { display:block; }
.review-name { font-weight:650; }
.review-role, .review-source { color:var(--muted); }
.review-source { margin:20px 0 0; font-size:.72rem; }
@media (max-width:700px) { .review-grid { grid-template-columns:1fr; gap:28px; } }