/* Home, v2.1 polish (job O): say what we do, show the work, one motion vocabulary.
   Layout: an editorial 12 column grid, numbered section heads (01 to 04), framed work (a browser bar for websites, a bezel for the kiosk screen).
   Motion, "the frame opens": on load the headline lines rise out of their mask and the hero photograph opens from an inset frame;
   further down, each work image opens the same way as it enters the screen (CSS scroll-driven animation where the browser has it, static elsewhere).
   transform and clip-path only; LCP and CLS never wait on it; no JS, no rAF, nothing runs at rest.
   Off under prefers-reduced-motion, the Settings motion switch and Lite. */

/* v3: the hero lives in v3.css (section 10). The v2.1 .hs rules are gone. */

/* Home font diet (step 2B, mobile LCP): home only uses Bricolage at 600/700 and the Bodoni italic at 33 px and up,
   so these two faces swap in trimmed cuts of the same fonts (wght 600-700, opsz 28-96). Same descriptors as in
   rb-v2.css / v3.css, so these rules shadow those and the full files are never fetched on home. Look unchanged. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/v3/bricolage-grotesque-600-700.woff2)format("woff2-variations"),url(../fonts/v3/bricolage-grotesque-600-700.woff2)format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+2018-2019,U+201C-201D,U+2026,U+2122,U+2192}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/v3/bodoni-moda-italic-display.woff2)format("woff2-variations"),url(../fonts/v3/bodoni-moda-italic-display.woff2)format("woff2");font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0,U+00B7,U+2018-2019,U+201C-201D,U+2026}

/* Section heads: number, title, a short label */
.sx-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(12px,1.6vw,24px);padding:16px 0 clamp(16px,2vw,28px);border-top:1px solid var(--line-strong)}
.sx-n{font:500 .8125rem/1 var(--font-mono);letter-spacing:.08em;color:var(--red-ink)}
.sx-t{margin:0;font-size:var(--size-h2);line-height:.98;letter-spacing:-.035em}
.sx-t a{display:inline-flex;align-items:center;gap:.3em;min-height:48px;color:var(--ink);text-decoration:none}
.sx-t a::after{content:"";flex:none;width:.32em;height:.32em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-.04em) rotate(45deg);transition:transform .2s var(--ease-out)}
.sx-t a:hover{color:var(--red)}
.sx-t a:hover::after{transform:translate(.1em,-.04em) rotate(45deg)}
.sx-sub{margin:0;font:500 .8125rem/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right}
@media (max-width:699px){
  .sx-head{grid-template-columns:auto minmax(0,1fr)}
  .sx-sub{grid-column:2;text-align:left;margin-top:8px}
}
/* The work head stays one compact line, so the first work image is on the first screen */
.wk .sx-head{grid-template-columns:auto minmax(0,1fr) auto;padding:12px 0 14px}
.wk .sx-t{font-size:clamp(1.375rem,1.2vw + 1rem,2.25rem)}
.wk .sx-sub{grid-column:auto;margin:0}

/* Selected work */
.wk{padding:0 var(--pad-x) clamp(56px,7vw,112px);scroll-margin-top:calc(var(--head-h) + 8px)}
.wk .sx-head,.wk-grid{max-width:var(--max);margin:0 auto}
.wk-all{display:inline-flex;align-items:center;min-height:48px;padding:0 2px;color:var(--ink);font:600 .9375rem/1 var(--font-text);letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.wk-all:hover{text-decoration-color:var(--ink)}
.wk-grid{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,3.4vw,56px) clamp(16px,1.8vw,28px)}
.wk-card{min-width:0}
.wk-link{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
/* The frame */
.wk-media{display:flex;flex-direction:column;position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:14px}
.wk-shot{display:block;position:relative;flex:1;min-height:0;overflow:hidden}
.wk-shot picture{display:contents}
.wk-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.wk-media--site{background:var(--surface-2);padding:0 6px 6px;border:1px solid var(--line)}
.wk-media--site .wk-shot{border-radius:3px}
.wk-bar{flex:none;display:flex;align-items:center;gap:12px;height:30px;padding:0 6px}
.wk-dots{flex:none;width:38px;height:8px;background:radial-gradient(circle,var(--line-strong) 3.5px,transparent 4px) 0 50%/13px 8px repeat-x}
.wk-url{flex:1;min-width:0;height:18px;padding:0 10px;border-radius:9px;background:var(--surface);font:500 .6875rem/18px var(--font-mono);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-media--kiosk{background:#050505;padding:clamp(8px,1vw,14px);border:1px solid var(--line)}
.wk-media--kiosk .wk-shot{border-radius:2px}
.wk-media--kiosk{padding-bottom:0}
.wk-label{flex:none;display:block;height:28px;font:500 .75rem/28px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
[data-theme=light] .wk-media--kiosk{background:var(--surface)}
[data-theme=light] .wk-label{color:#1B1F2A!important}
/* The six kiosk apps, as real screens, under the one shown large */
.wk-apps{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 0}
.wk-apps-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:2px 3px 0}
.wk-apps-row img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:2px;opacity:.72}
.wk-apps-row img.is-on{opacity:1;outline:2px solid var(--red);outline-offset:1px}
.wk-apps .wk-label{height:auto;line-height:1.4}
@media (min-width:1000px){.wk-apps{flex-direction:row;align-items:center;gap:16px}.wk-apps-row{flex:none;width:min(400px,56%)}.wk-apps .wk-label{flex:1;min-width:0}}
@media (max-width:999px){.wk-card.wk-card--hh-kiosks .wk-media{aspect-ratio:auto}.wk-card--hh-kiosks .wk-shot{flex:none;aspect-ratio:16/9}}
.wk-card--museum-mosaic .wk-shot img,.wk-card--hh-site .wk-shot img{object-position:0 0}
.wk-card--replicas .wk-shot img{object-position:50% 40%}
.wk-card--ashlin .wk-shot img{object-position:50% 53%}
/* Caption: number, kind, year on one hairline; then the name, the line, one spec line */
.wk-meta{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);font:500 .75rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.wk-n{color:var(--red-ink)}
.wk-kind{flex:1;min-width:0}
.wk-year{flex:none}
.wk-name{display:flex;align-items:center;gap:.35em;margin:0 0 8px;font-size:clamp(1.375rem,.9vw + 1rem,1.875rem);line-height:1.06;letter-spacing:-.025em}
.wk-name::after{content:"";flex:none;width:.3em;height:.3em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translate(-.3em,-.02em) rotate(45deg);opacity:0;transition:transform .3s var(--ease-out),opacity .2s linear}
.wk-line{margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink-2);max-width:48ch}
.wk-spec{display:block;margin-top:10px;font:500 .8125rem/1.55 var(--font-mono);color:var(--ink-2);max-width:56ch}
.wk-link:hover .wk-name{color:var(--red)}
.wk-link:hover .wk-name::after,.wk-link:focus-visible .wk-name::after{opacity:1;transform:translate(0,-.02em) rotate(45deg)}
/* phones: the kiosk frame grows to fit the six-app strip (see .wk-apps) */
/* The index cell: the work page's own filters */
.wk-index{min-width:0}
.wk-index-link{display:flex;flex-direction:column;height:100%;padding:18px 0 0;border-top:2px solid var(--red);color:var(--ink);text-decoration:none}
.wk-index-t{font:700 clamp(1.375rem,.9vw + 1rem,1.875rem)/1.06 var(--font-display);letter-spacing:-.025em;margin-bottom:14px}
.wk-index-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font:500 .8125rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.wk-index-row span:last-child{color:var(--red-ink)}
.wk-index-all{margin-top:18px;font:600 .9375rem/1 var(--font-text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.wk-index-link:hover .wk-index-t,.wk-index-link:hover .wk-index-all{color:var(--red)}
@media (min-width:700px){
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-card--wide,.wk-index{grid-column:span 2}
  .wk-card--wide .wk-media{aspect-ratio:21/9.5}
  .wk-index-link{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;column-gap:24px;align-items:end}
  .wk-index-t{grid-column:1/-1}
  .wk-index-all{margin:0;padding:12px 0}
}
/* Wide: a 12 column grid with deliberate asymmetry: 7 + 5, then 5 + 4 + 3, then the index beside a wide card */
@media (min-width:1000px){
  .wk-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .wk-card--hh-kiosks{grid-column:1/span 7}
  .wk-card--hh-site{grid-column:8/span 5}
  .wk-card--museum-mosaic{grid-column:1/span 5}
  .wk-card--mm-memory-match{grid-column:6/span 4}
  .wk-card--replicas{grid-column:10/span 3}
  .wk-card--ashlin{grid-column:1/-1}
  .wk-index{grid-column:1/-1}
  .wk-index-link{display:grid;grid-template-columns:minmax(0,3fr) repeat(3,minmax(0,2fr)) auto;column-gap:clamp(20px,2.4vw,40px);align-items:end}
  .wk-index-all{margin-top:18px;padding:0}
  .wk-media,.wk-card--wide .wk-media{aspect-ratio:auto;height:clamp(230px,21vw,320px)}
  .wk-card--museum-mosaic .wk-media,.wk-card--mm-memory-match .wk-media,.wk-card--replicas .wk-media{height:clamp(200px,17vw,260px)}
  .wk-card--ashlin .wk-media{height:clamp(260px,24vw,380px)}
}

/* Studio and Capabilities */
.hx{padding:0 var(--pad-x) clamp(64px,8vw,128px)}
.hx-in{max-width:var(--max);margin:0 auto}
.hx-list,.hc-list{list-style:none;margin:0;padding:0}
.hx-list{display:grid;gap:36px}
.hx-link{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.hx-media{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:14px}
.hx-media .wk-shot{height:100%}
.hx-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hx-text{display:flex;flex-direction:column;min-width:0}
.hx-name{margin-bottom:8px;font:700 clamp(1.375rem,.9vw + 1rem,1.875rem)/1.06 var(--font-display);letter-spacing:-.025em}
.hx-line{font-size:.9375rem;line-height:1.5;color:var(--ink-2);max-width:48ch}
.hx-link:hover .hx-name{color:var(--red)}
.hc-list{border-top:1px solid var(--line)}
.hc-list li{border-bottom:1px solid var(--line)}
.hc-list a{display:flex;align-items:baseline;gap:16px;min-height:56px;padding:16px 0;color:var(--ink);text-decoration:none;font:600 clamp(1.125rem,.8vw + .95rem,1.625rem)/1.2 var(--font-display);letter-spacing:-.015em}
.hc-n{flex:none;min-width:5.2em;font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;color:var(--red-ink)}
.hc-list a:hover{color:var(--red)}
.hc-all a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
@media (min-width:700px){.hx-list{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,1.8vw,28px)}.hx-media{aspect-ratio:auto;height:clamp(300px,36vw,540px)}}
/* Wide: the second piece sits lower, so the two photographs do not line up as a pair of cards */
@media (min-width:1000px){
  .hx-list{grid-template-columns:repeat(12,minmax(0,1fr))}
  .hx-list li:first-child{grid-column:1/span 7}
  .hx-list li:last-child{grid-column:8/span 5}
  .hx--caps .hx-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,1.8vw,28px)}
  .hx--caps .sx-head{grid-column:1/-1}
  .hc-list{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px);border-top:0}
  .hc-list li:nth-child(-n+2){border-top:1px solid var(--line)}
}
/* Phones: Settings shows as an icon in the header, as on every page */
@media (max-width:760px){
  #site-header .rb-set-btn{min-width:48px;min-height:48px;padding:0 12px;justify-content:center}
  #site-header .rb-set-btn .rb-set-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Closing call */
.hend{padding:0 var(--pad-x) clamp(64px,8vw,112px)}
.hend-in{max-width:var(--max);margin:0 auto;display:grid;gap:24px;align-items:end;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line-strong)}
.hend-in .sx-n{align-self:start}
.hend-t{margin:0;font-size:clamp(2.25rem,4.4vw + .6rem,5.25rem);line-height:.94;letter-spacing:-.04em;max-width:16ch}
.hend-t em{display:block}
.hend .v3-btn{justify-self:start}
@media (min-width:900px){.hend-in{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(24px,3vw,48px)}.hend .v3-btn{margin-bottom:.6em}}
@keyframes app-open{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
/* v3: one motion language (v3.css section 9, "the light comes up"). Media boxes carry data-v3-reveal; the v2.1 frame-open is gone. */
@media (prefers-reduced-motion:no-preference){
  html:not(.reduced-motion):not(.rb-lite-boot):not(.is-lite) .wk-apps-row img{animation:app-open .5s var(--ease-out) calc(700ms + var(--k) * 80ms) backwards}  .wk-shot img{transition:transform .7s var(--ease-out)}
  @media (hover:hover) and (pointer:fine){
    html:not(.reduced-motion) :is(.wk-link,.hx-link):hover .wk-shot img{transform:scale(1.03)}
  }
}
@media (prefers-reduced-motion:reduce){.sx-t a::after,.wk-name::after{transition:none}}