:root { --paper:#fff; --ink:#000; --rule:1px solid var(--ink); color-scheme:light; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-padding-top:2rem; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid currentColor; outline-offset:6px; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
.shell { width:min(100% - 8rem,1440px); margin-inline:auto; }
.meta { font-family:Consolas,'Courier New',monospace; font-size:.75rem; line-height:1.5; letter-spacing:.055em; text-transform:uppercase; }
.skip-link { position:absolute; top:1rem; left:1rem; z-index:9; padding:1rem; color:#fff; background:#000; transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:112px; border-bottom:var(--rule); gap:2rem; }
.brand { display:flex; align-items:center; gap:1rem; }
.brand-name { font-weight:800; font-size:1.125rem; line-height:1.05; letter-spacing:-.045em; }
nav { display:flex; gap:2.25rem; font-size:.875rem; }
nav a { padding:.75rem 0; border-bottom:1px solid transparent; }
nav a:hover { border-bottom-color:currentColor; }
.hero-topline { display:flex; justify-content:space-between; gap:2rem; padding-top:2rem; }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:2.5rem; padding:3.5rem 0 3rem; }
h1 { font-size:clamp(4rem,7.8vw,8.5rem); line-height:.88; font-weight:900; letter-spacing:-.078em; }
.hero-tagline { font-size:clamp(1.25rem,2vw,1.65rem); letter-spacing:-.04em; margin-top:2rem; }
.hero-mark { max-width:480px; width:100%; justify-self:end; }
.hero-mark img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.hero-mark figcaption { display:flex; justify-content:space-between; gap:1rem; padding:1rem .5rem 0; }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:1.5rem 0 3rem; border-bottom:var(--rule); }
.hero-bottom p { font-size:1rem; line-height:1.6; }
.text-link { display:inline-block; font-size:.875rem; line-height:1.6; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; padding-block:.4rem; }
.text-link:hover { text-decoration-thickness:2px; }
.projects { padding-block:6rem; }
.section-heading { display:grid; grid-template-columns:1fr 2fr; gap:2rem; align-items:start; margin-bottom:4rem; }
h2 { font-size:clamp(2.5rem,4.2vw,4.7rem); line-height:1.04; letter-spacing:-.06em; font-weight:800; }
.project-row { display:grid; grid-template-columns:1fr 2fr 1.6fr; gap:2rem; border-top:var(--rule); padding:2.5rem 0; }
.project-row:last-child { border-bottom:var(--rule); }
.part-number { font-family:Consolas,'Courier New',monospace; font-size:.875rem; padding-top:.55rem; }
h3 { font-size:clamp(2rem,3.1vw,3.5rem); line-height:1.06; font-weight:800; letter-spacing:-.055em; overflow-wrap:anywhere; }
.project-detail { display:flex; align-items:flex-start; flex-direction:column; justify-content:space-between; gap:1.5rem; padding-top:.3rem; }
.project-detail p { font-size:1rem; line-height:1.6; max-width:28ch; }
.project-discipline { margin-bottom:.75rem; }
.curated-projects { border-left:var(--rule); margin-left:2rem; padding-left:2rem; }
.supervision-label { padding:1.25rem 0; }
.curated-projects .project-row { grid-template-columns:.75fr 2fr 1.6fr; }
.about { padding-block:6rem; background:var(--ink); color:var(--paper); }
.about-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:5rem; }
.about h2 { margin-top:2.5rem; }
.about-copy { padding-top:4rem; }
.about-copy p { font-size:1.2rem; line-height:1.65; max-width:44ch; }
.about-copy p + p { margin-top:1.5rem; }
.about-copy .about-signoff { margin-top:2rem; font-size:.875rem; }
.contact { padding-block:5rem 6rem; }
.contact-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:5rem; align-items:center; margin-top:2.5rem; }
.contact h2 { font-size:clamp(3rem,6vw,7rem); }
.contact-details { font-size:1.125rem; line-height:1.6; }
.contact-aside { margin-top:1rem; font-size:.875rem; }
.contact h2 { font-size:clamp(2.5rem,4.5vw,5rem); }
.contact-game { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:3rem; margin-top:3rem; border:var(--rule); padding:2.5rem; }
.kit-panel { display:flex; flex-direction:column; justify-content:center; width:100%; min-width:0; align-self:center; }
.assembly-labels { display:grid; grid-template-columns:57.25% 42.75%; text-align:center; margin-bottom:1rem; }
.assembly-stage { position:relative; width:100%; aspect-ratio:2190 / 1254; isolation:isolate; scroll-margin-block:2rem; }
.sprue-frame { display:block; width:100%; height:100%; pointer-events:none; }
/* Reuse the approved mark as sprites; all coordinates refer to its 1254px source. */
.kit-part { position:absolute; left:calc(var(--x) / 2190 * 100%); top:calc(var(--y) / 1254 * 100%); width:calc(var(--w) / 2190 * 100%); height:calc(var(--h) / 1254 * 100%); overflow:hidden; padding:0; border:0; background:transparent; color:#000; transform:translate(0,0); -webkit-tap-highlight-color:transparent; }
.kit-part img { position:absolute; width:calc(1254 / var(--w) * 100%); height:calc(1254 / var(--h) * 100%); max-width:none; left:calc(var(--x) / var(--w) * -100%); top:calc(var(--y) / var(--h) * -100%); pointer-events:none; user-select:none; }
.kit-part.is-assembled { transform:translate(calc(var(--dx) / var(--w) * 100%),calc(var(--dy) / var(--h) * 100%)) rotate(var(--rotation,0deg)); transition:transform 700ms cubic-bezier(.4,0,.18,1); z-index:2; cursor:default; }
.kit-part:hover:not(:disabled),.kit-part.is-highlighted { opacity:.6; }
.kit-head { --x:232; --y:242; --w:290; --h:288; --dx:1353; --dy:-108; border-radius:50%; }
.kit-torso { --x:674; --y:241; --w:363; --h:372; --dx:874; --dy:169; }
.kit-left-arm { --x:221; --y:617; --w:130; --h:309; --dx:1214; --dy:-142; --rotation:12deg; transform-origin:50% 21%; }
.kit-right-arm { --x:402; --y:616; --w:133; --h:308; --dx:1491; --dy:-141; --rotation:-12deg; transform-origin:50% 21%; }
.kit-left-leg { --x:681; --y:649; --w:151; --h:433; --dx:882; --dy:111; }
.kit-right-leg { --x:881; --y:650; --w:149; --h:431; --dx:866; --dy:110; }
.kit-progress { margin-top:1rem; }
progress { display:block; width:100%; height:6px; margin-top:.75rem; border:none; background:#eee; accent-color:#000; }
progress::-webkit-progress-bar { background:#eee; }
progress::-webkit-progress-value { background:#000; transition:width .2s; }
.assembly-panel { align-self:center; }
.assembly-panel h3 { font-size:clamp(1.8rem,2.5vw,2.5rem); margin-top:1.5rem; }
.assembly-panel h3:focus-visible { outline:1px dashed currentColor; outline-offset:6px; }
#assembly-hint { font-size:1rem; line-height:1.5; margin-top:.75rem; min-height:3em; }
.parts-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-block:1.5rem; }
button { font:inherit; }
button { cursor:pointer; }
button:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.part-button { min-height:48px; background:#fff; border:var(--rule); padding:.75rem; text-align:left; font-size:1rem; }
.part-button:hover:not(:disabled) { background:#000; color:#fff; }
.part-button:disabled { cursor:default; background:#000; color:#fff; text-decoration:line-through; }
.game-feedback { font-size:.875rem; line-height:1.5; min-height:3em; }
.text-button { display:inline-block; color:inherit; background:none; border:0; padding:.5rem 0; margin-top:.5rem; font-size:.875rem; text-decoration:underline; text-underline-offset:4px; }
.correspondence-link { display:block; width:fit-content; margin-bottom:.5rem; }
.correspondence-heading { margin-block:3rem 2rem; }
.correspondence-heading h3 { margin-block:1rem; font-size:clamp(1.8rem,3vw,3rem); }
.correspondence-heading>p:last-child { font-size:1.125rem; line-height:1.5; }
.contact-address { display:inline-block; max-width:100%; font-size:clamp(1.125rem,2.6vw,2rem); line-height:1.5; letter-spacing:-.03em; text-decoration:underline; text-underline-offset:6px; overflow-wrap:anywhere; user-select:all; }
.correspondence-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:1.5rem; }
.correspondence-actions .text-button { margin-top:0; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; border:var(--rule); background:#000; color:#fff; padding:1rem 1.5rem; min-height:48px; font-size:1rem; white-space:nowrap; }
.primary-button:hover { background:#fff; color:#000; }
#copy-status { min-height:1.5em; margin-top:1rem; font-size:.875rem; line-height:1.5; }
.noscript-note { margin-top:2rem; font-size:1rem; }
[hidden] { display:none !important; }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; padding-block:1.5rem; border-top:var(--rule); font-size:.875rem; }
@media(min-width:1600px) { .hero-grid { padding-block:5rem; } }
@media(max-width:900px) {
  .shell { width:calc(100% - 3rem); }
  .hero-grid { gap:1rem; }
  h1 { font-size:clamp(3.4rem,8.4vw,6rem); }
  .hero-topline span:last-child { display:none; }
  .hero-mark figcaption span:last-child { display:none; }
  .project-row { grid-template-columns:.3fr 1.4fr 1fr; gap:1.5rem; }
  .about-grid,.contact-grid { gap:2.5rem; }
  .contact-game { grid-template-columns:1fr; gap:2rem; padding:2rem; }
  .kit-panel { max-width:640px; margin-inline:auto; }
  .section-heading { grid-template-columns:1fr 2fr; }
}
@media(max-width:600px) {
  html { scroll-padding-top:1rem; }
  .shell { width:calc(100% - 2.5rem); }
  .site-header { min-height:96px; gap:1rem; }
  .brand-name { font-size:.9375rem; }
  nav { gap:1rem; font-size:.8125rem; }
  .hero-topline { padding-top:1.5rem; font-size:.75rem; }
  .hero-grid { grid-template-columns:1fr; padding:2.5rem 0 2rem; gap:2rem; }
  h1 { font-size:clamp(3.8rem,15.5vw,6rem); letter-spacing:-.07em; }
  .hero-tagline { margin-top:1.5rem; }
  .hero-mark { width:min(100%,330px); justify-self:center; }
  .hero-mark figcaption { font-size:.75rem; }
  .hero-mark figcaption span:last-child { display:block; }
  .hero-bottom { align-items:flex-start; flex-direction:column; gap:1rem; padding-bottom:2rem; }
  .hero-bottom p { font-size:1rem; }
  .projects { padding-block:3.5rem; }
  .section-heading { grid-template-columns:1fr; gap:1.5rem; margin-bottom:2rem; }
  .project-row { grid-template-columns:2rem 1fr; gap:1rem; padding-block:2rem; }
  .curated-projects { margin-left:.5rem; padding-left:1rem; }
  .curated-projects .project-row { grid-template-columns:2.25rem 1fr; }
  .part-number { padding-top:.35rem; }
  h3 { font-size:2.125rem; }
  .project-detail { grid-column:2; gap:.75rem; }
  .desktop-break { display:none; }
  .about { padding-block:3.5rem; }
  .about-grid,.contact-grid { grid-template-columns:1fr; gap:2rem; }
  .about h2 { margin-top:1.5rem; }
  .about-copy { padding-top:0; }
  .about-copy p { font-size:1.125rem; }
  .contact { padding-block:3.5rem; }
  .contact-grid { margin-top:1.5rem; gap:1.5rem; }
  .contact-game { grid-template-columns:1fr; padding:1.25rem; gap:2rem; margin-top:2rem; }
  .kit-panel { max-width:none; }
  .assembly-labels { font-size:.625rem; margin-bottom:.5rem; }
  .assembly-panel h3 { margin-top:1rem; }
  .parts-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin-block:1rem; }
  .part-button { font-size:.875rem; padding:.625rem .4rem; }
  #assembly-hint { min-height:0; }
  .correspondence-actions { align-items:flex-start; gap:1rem; }
  .site-footer { align-items:flex-start; flex-direction:column; gap:.75rem; padding-block:1.5rem 2rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } progress::-webkit-progress-value,.kit-part.is-assembled { transition:none; } }