:root {
  --carbon: #0b0b0a;
  --paper: #f3ede1;
  --chalk: #fffdf8;
  --brick: #e24c2a;
  --river: #2f6179;
  --steel: #85847f;
  --spruce: #31594f;
  --crimson: #893237;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--carbon); background: var(--paper); font-family: "Archivo", Arial, sans-serif; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1000; border: 6px solid #050505; pointer-events: none; }
body:has(dialog[open]) { overflow: hidden; }
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #9ed4eb; outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: .75rem 1rem; background: var(--chalk); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.announcement { height: 28px; overflow: hidden; color: var(--chalk); background: var(--carbon); font-family: "IBM Plex Mono", monospace; font-size: 10px; line-height: 28px; letter-spacing: .11em; white-space: nowrap; }
.announcement div { width: max-content; min-width: 200%; animation: rail 30s linear infinite; }
.announcement span { margin: 0 2.75rem; color: #b9d9e6; }
@keyframes rail { to { transform: translateX(-50%); } }

.site-header { height: 72px; padding: 0 2.25vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; border-bottom: 1px solid var(--carbon); background: rgba(243, 237, 225, .96); position: relative; z-index: 20; }
.wordmark { display: grid; grid-template-columns: auto 5px auto; align-items: stretch; width: fit-content; gap: .5rem; text-decoration: none; font-family: "Archivo Black", Arial Black, sans-serif; font-size: 16px; line-height: .83; letter-spacing: -.04em; }
.wordmark i { width: 5px; min-height: 31px; display: block; background: var(--brick); }
.wordmark span { align-content: center; }
.site-header nav { display: flex; gap: clamp(1.5rem, 3vw, 3.6rem); }
.site-header nav a, .header-action { position: relative; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-decoration: none; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--brick); transition: right 160ms ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.header-action { justify-self: end; }
.header-action span { margin-left: .5rem; color: var(--brick); }

.utility { margin: 0; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.utility--light { color: var(--chalk); }
.button { min-height: 56px; padding: 0 1.4rem; border: 1px solid var(--carbon); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: "Archivo Black", Arial Black, sans-serif; font-size: 12px; letter-spacing: .035em; cursor: pointer; transition: transform 120ms ease, color 160ms ease, background 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(2px); }
.button-primary { color: var(--chalk); background: var(--brick); border-color: var(--brick); }
.button-primary:hover { color: var(--carbon); background: var(--chalk); }
.button-dark { color: var(--chalk); background: var(--carbon); }

.hero { min-height: 800px; position: relative; overflow: hidden; padding: 68px 2.25vw 50px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(560px, 7fr); gap: 20px; background: var(--paper); }
.hero-ghost { position: absolute; right: -10vw; top: 6%; width: 76vw; max-width: 1050px; opacity: .055; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-left: clamp(0px, 1.6vw, 24px); }
.hero h1 { max-width: 670px; margin: 1.1rem 0 1.5rem; font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(50px, 4.4vw, 64px); line-height: .9; letter-spacing: -.072em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-deck { max-width: 455px; margin: 0 0 2rem; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.48; }
.hero-copy .button { width: 230px; }
.text-link { width: fit-content; margin: 1.4rem 0 1.75rem; display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.text-link span { color: var(--brick); }
.fulfillment { margin: 0; color: #595956; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .06em; }
.fulfillment span { margin: 0 .45rem; color: var(--brick); }

.hero-product { min-height: 650px; position: relative; display: grid; align-items: center; justify-items: center; }
.hero-block { position: absolute; width: 58%; height: 76%; right: 6%; top: 14%; background: var(--brick); }
.tee-stage { --tee-color: #2d2d2b; display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #7a7771; }
.tee-stage--hero { width: min(88%, 640px); max-height: 700px; z-index: 2; border: 1px solid rgba(11,11,10,.15); }
.tee-base { width: 100%; height: 100%; display: block; object-fit: cover; }
.garment-tint { position: absolute; inset: 0; background: var(--tee-color); opacity: .42; mix-blend-mode: color; pointer-events: none; }
.tee-art { width: 47%; height: auto; position: absolute; left: 50%; top: 29%; transform: translateX(-50%); opacity: .96; filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }
[data-stage="pepper"] { --tee-color: #2c2c2a; }
[data-stage="black"] { --tee-color: #050505; }
[data-stage="ivory"] { --tee-color: #eee7d7; background: #c9c0ad; }
[data-stage="denim"] { --tee-color: #365a6c; }
[data-stage="crimson"] { --tee-color: #843137; }
[data-stage="spruce"] { --tee-color: #31584f; }
.inventory-tag { position: absolute; z-index: 3; padding: .5rem .65rem; border-top: 1px solid var(--carbon); background: rgba(243,237,225,.9); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; }
.inventory-tag--one { left: 2%; top: 22%; }
.inventory-tag--two { right: 0; top: 39%; }
.inventory-tag--three { left: 4%; bottom: 15%; }
.hero-price { position: absolute; z-index: 3; right: 0; bottom: 1%; display: flex; flex-direction: column; align-items: flex-end; }
.hero-price strong { font-family: "Archivo Black", Arial Black, sans-serif; font-size: 48px; line-height: .9; }
.hero-price span { margin-top: .45rem; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .08em; }

.shop { display: grid; grid-template-columns: minmax(340px, 34%) 1fr; align-items: start; color: var(--chalk); background: var(--carbon); }
.buy-panel { min-height: 100vh; position: sticky; top: 0; padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 4vw, 5rem) 3rem 3vw; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.17); }
.buy-panel h2 { margin: 1.1rem 0 1.35rem; font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(42px, 4vw, 68px); line-height: .9; letter-spacing: -.055em; }
.shop-intro { max-width: 390px; margin: 0 0 2rem; color: #c9c6bf; line-height: 1.5; }
.selection-summary { padding-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.28); }
.selection-summary p, .selection-summary strong { margin: 0; font-size: 13px; }
.selection-summary strong { font-family: "Archivo Black", Arial Black, sans-serif; font-size: 24px; }
.selected-variant { margin: .65rem 0 1.6rem; color: var(--brick); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .07em; }
.sizes { padding: 0; margin: 0 0 1.25rem; border: 0; }
.sizes legend { margin-bottom: .75rem; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; }
.sizes button { min-width: 44px; min-height: 44px; margin: 0 .25rem .4rem 0; border: 1px solid rgba(255,255,255,.38); color: var(--chalk); background: transparent; cursor: pointer; }
.sizes button:hover, .sizes button.is-selected { color: var(--carbon); background: var(--chalk); }
.buy-button { width: 100%; color: var(--carbon); background: var(--brick); border-color: var(--brick); }
.buy-button.is-ready { background: var(--chalk); border-color: var(--chalk); }
.checkout-note, .prototype-note { font-family: "IBM Plex Mono", monospace; font-size: 9px; line-height: 1.5; letter-spacing: .03em; }
.checkout-note { margin: .8rem 0 0; color: #bdb9b0; text-align: center; }
.checkout-note span { color: var(--brick); }
.prototype-note { margin: 1.5rem 0 0; padding-left: .8rem; border-left: 2px solid var(--brick); color: #8f8d87; }
.color-grid { padding: clamp(2rem, 4vw, 4rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 2rem); }
.color-card { min-width: 0; padding: 0; border: 0; color: var(--chalk); background: transparent; text-align: left; cursor: pointer; }
.color-card .tee-stage { width: 100%; border: 1px solid rgba(255,255,255,.15); transition: border-color 160ms ease, transform 160ms ease; }
.color-card:hover .tee-stage { transform: translateY(-3px); border-color: var(--brick); }
.color-card.is-selected .tee-stage { outline: 3px solid var(--brick); outline-offset: -3px; }
.card-meta { padding: .9rem .15rem 0; display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .5rem; font-size: 10px; letter-spacing: .06em; }
.card-meta b { color: var(--brick); font-family: "IBM Plex Mono", monospace; }
.card-meta strong { font-size: 11px; }
.card-meta i { color: #8c8983; font-family: "IBM Plex Mono", monospace; font-style: normal; }
.color-card.is-selected .card-meta i { color: var(--chalk); }

.print-section { padding: clamp(5rem, 8vw, 9rem) 3vw 0; overflow: hidden; background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: end; gap: 2rem; }
.section-heading h2, .facts-heading h2, .story h2, .final-cta h2 { margin: 1rem 0 0; font-family: "Archivo Black", Arial Black, sans-serif; letter-spacing: -.06em; }
.section-heading h2 { font-size: clamp(48px, 7vw, 108px); line-height: .87; }
.section-heading > p:last-child { max-width: 370px; margin: 0; line-height: 1.55; }
.art-viewer-trigger { width: 100%; margin: 5rem 0 2rem; padding: 4vw 6vw 2rem; border: 1px solid var(--carbon); position: relative; display: block; color: var(--carbon); background: var(--chalk); cursor: zoom-in; }
.art-viewer-trigger img { width: 100%; display: block; }
.art-viewer-trigger > span { margin-top: 1.5rem; display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; }
.art-viewer-trigger b { color: var(--brick); font-size: 20px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.detail-grid div { height: clamp(190px, 22vw, 360px); overflow: hidden; border: 1px solid var(--carbon); background: var(--chalk); }
.detail-grid img { width: 205%; max-width: none; transform: translate(-4%, -10%); }
.detail-grid div:nth-child(2) img { transform: translate(-30%, -28%); }
.detail-grid div:nth-child(3) img { transform: translate(-50%, -48%); }
.found-strip { margin: 4rem -3vw 0; padding: 1.6rem 3vw; display: flex; justify-content: space-between; gap: 2rem; color: var(--chalk); background: var(--river); text-decoration: none; font-size: 12px; letter-spacing: .05em; }
.found-strip strong { font-family: "Archivo Black", Arial Black, sans-serif; }
.found-strip b { margin-left: 1rem; color: var(--paper); }

.facts { padding: clamp(5rem, 8vw, 9rem) 3vw; background: var(--chalk); }
.facts-heading { max-width: 980px; }
.facts-heading h2 { font-size: clamp(46px, 6.4vw, 96px); line-height: .9; }
.fact-grid { margin-top: 5rem; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--carbon); border-bottom: 1px solid var(--carbon); }
.fact-grid article { min-height: 240px; padding: 1.25rem 2rem 2rem 0; }
.fact-grid article + article { padding-left: 2rem; border-left: 1px solid var(--carbon); }
.fact-grid span { color: var(--brick); font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.fact-grid h3 { margin: 3.6rem 0 .8rem; font-family: "Archivo Black", Arial Black, sans-serif; font-size: 17px; }
.fact-grid p { margin: 0; color: #54534f; font-size: 14px; line-height: 1.6; }
.on-demand { margin-top: 3rem; padding: 2rem 0; display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; border-top: 1px solid var(--carbon); }
.on-demand strong { font-family: "Archivo Black", Arial Black, sans-serif; font-size: 22px; }
.on-demand p { max-width: 750px; margin: 0; line-height: 1.6; }

.story { min-height: 760px; display: grid; grid-template-columns: 7fr 5fr; color: var(--chalk); background: var(--carbon); }
.story-art { position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.18); }
.story-art img { position: absolute; width: 150%; max-width: none; left: -26%; top: -18%; opacity: .88; }
.story-copy { padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 5vw, 6rem); align-content: center; }
.story h2 { max-width: 630px; font-size: clamp(48px, 6vw, 92px); line-height: .9; }
.story-copy > p:not(.utility) { max-width: 620px; margin: 2rem 0; color: #ccc8c0; font-size: 17px; line-height: 1.7; }
.story blockquote { margin: 3rem 0 0; color: var(--paper); font-family: "Newsreader", Georgia, serif; font-size: clamp(25px, 2.5vw, 38px); line-height: 1.25; }

.final-cta { min-height: 62vh; padding: clamp(5rem, 8vw, 9rem) 3vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--carbon); background: var(--brick); }
.final-cta h2 { font-size: clamp(72px, 12vw, 180px); line-height: .78; }
.final-cta .button { margin-top: 3rem; min-width: 270px; }

footer { padding: 3rem 3vw; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 3rem; color: var(--chalk); background: var(--carbon); border-top: 1px solid rgba(255,255,255,.18); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .05em; }
.footer-wordmark { color: var(--chalk); }
footer nav { display: flex; gap: 1.5rem; }
footer nav a { text-decoration: none; }

dialog { padding: 0; border: 0; }
dialog::backdrop { background: rgba(0,0,0,.82); }
.art-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; color: var(--chalk); background: var(--carbon); }
.dialog-bar { height: 92px; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.25); }
.dialog-bar h2 { margin: .25rem 0 0; font-family: "Archivo Black", Arial Black, sans-serif; font-size: 28px; }
.dialog-bar button, .dialog-close { min-width: 54px; min-height: 44px; border: 1px solid var(--chalk); color: var(--chalk); background: transparent; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.dialog-art { height: calc(100vh - 92px); padding: 3rem; overflow: auto; text-align: center; }
.dialog-art img { width: min(1500px, 150vw); max-width: none; }
.checkout-dialog { width: min(620px, calc(100vw - 2rem)); padding: clamp(2rem, 5vw, 4rem); color: var(--carbon); background: var(--paper); }
.checkout-dialog h2 { margin: 1rem 0 2rem; font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(38px, 6vw, 64px); line-height: .9; letter-spacing: -.05em; }
.dialog-close { position: absolute; right: 1rem; top: 1rem; color: var(--carbon); border-color: var(--carbon); font-size: 24px; }
.checkout-dialog dl { margin: 0 0 2rem; border-top: 1px solid var(--carbon); }
.checkout-dialog dl div { padding: .9rem 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--carbon); }
.checkout-dialog dt { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; }
.checkout-dialog dd { margin: 0; font-family: "Archivo Black", Arial Black, sans-serif; }
.checkout-dialog > p:not(.utility) { line-height: 1.6; }
.checkout-dialog .button { margin-top: 1rem; width: 100%; }

@media (min-width: 1001px) and (max-width: 1350px) {
  .hero-copy { min-width: 0; }
  .hero h1 { font-size: 54px; }
  .hero h1 span { white-space: normal; }
}

@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 4rem 1rem 1rem; }
  .hero-product { min-height: 690px; }
  .shop { grid-template-columns: 1fr; }
  .buy-panel { min-height: auto; position: static; padding: 5rem 4vw; }
  .color-grid { padding-top: 0; }
  .section-heading { grid-template-columns: 1fr 2fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--carbon); padding-left: 0; }
  .fact-grid article:nth-child(4) { border-top: 1px solid var(--carbon); }
  .story { grid-template-columns: 1fr; }
  .story-art { min-height: 600px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .announcement { height: 24px; line-height: 24px; }
  .site-header { height: 60px; padding: 0 1rem; }
  .header-action { font-size: 9px; }
  .hero { padding: 0 1rem 3rem; }
  .hero-ghost { width: 150vw; top: 45%; right: -55%; }
  .hero-copy { padding: 3.5rem 0 1rem; }
  .hero h1 { margin-top: 1rem; font-size: clamp(40px, 11.8vw, 48px); }
  .hero h1 span { white-space: normal; }
  .hero-deck { font-size: 16px; }
  .hero-copy .button { width: 100%; }
  .hero-product { min-height: 500px; }
  .tee-stage--hero { width: 100%; }
  .hero-block { width: 68%; height: 72%; right: -1rem; }
  .inventory-tag--one { left: -1rem; }
  .inventory-tag--two { right: -1rem; }
  .hero-price { right: .5rem; bottom: -1rem; }
  .hero-price strong { font-size: 38px; }
  .buy-panel { padding: 4rem 1rem 2rem; }
  .color-grid { padding: 1rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .color-card { flex: 0 0 85vw; scroll-snap-align: start; }
  .section-heading { display: block; }
  .section-heading h2 { font-size: 50px; }
  .section-heading > p:last-child { margin-top: 1.5rem; }
  .print-section { padding: 5rem 1rem 0; }
  .art-viewer-trigger { margin-top: 3rem; padding: 2rem 1rem 1rem; }
  .detail-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .detail-grid div { flex: 0 0 84vw; scroll-snap-align: start; }
  .found-strip { margin: 3rem -1rem 0; padding: 1.5rem 1rem; flex-direction: column; }
  .facts { padding: 5rem 1rem; }
  .facts-heading h2 { font-size: 48px; }
  .fact-grid { margin-top: 3rem; grid-template-columns: 1fr; }
  .fact-grid article, .fact-grid article + article, .fact-grid article:nth-child(3) { min-height: auto; padding: 1.5rem 0 2.25rem; border-left: 0; border-top: 1px solid var(--carbon); }
  .fact-grid article:first-child { border-top: 0; }
  .fact-grid h3 { margin-top: 2rem; }
  .on-demand { grid-template-columns: 1fr; gap: 1rem; }
  .story-art { min-height: 430px; }
  .story-copy { padding: 4rem 1rem; }
  .story h2 { font-size: 48px; }
  .final-cta { padding: 5rem 1rem; }
  .final-cta h2 { font-size: 72px; }
  .final-cta .button { width: 100%; }
  footer { padding: 3rem 1rem; grid-template-columns: 1fr; gap: 1.5rem; }
  .dialog-bar { height: 78px; padding: .75rem 1rem; }
  .dialog-bar h2 { font-size: 20px; }
  .dialog-art { height: calc(100vh - 78px); padding: 2rem 1rem; text-align: left; }
  .dialog-art img { width: 210vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The front-facing model is a layered image, not a simulated 3D object. */
.site-header { position: absolute; top: 28px; left: 0; right: 0; color: #f7fbfe; background: transparent; border-color: #050505; }
.site-header .wordmark i { background: #050505; }
.site-header nav a::after { background: #050505; }
.header-action span { color: #fff; }
.hero--stage { min-height: max(760px, calc(100svh - 28px)); display: block; padding: 0; isolation: isolate; color: #f7fbfe; background: #6f93a7; }
.hero-scene { position: absolute; inset: 0; z-index: -2; background: #7196ae url("./assets/flint-made-hero-architectural-backdrop.webp") center center / cover no-repeat; }
.hero-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,39,50,.55), transparent 34%, transparent 63%, rgba(15,39,50,.32)), linear-gradient(0deg, rgba(7,21,28,.72), transparent 36%); }
.hero-meta { position: absolute; z-index: 3; top: 120px; left: 3vw; right: 3vw; display: flex; justify-content: space-between; gap: 1rem; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .11em; }
.hero-meta b { margin: 0 .65rem; color: #050505; }
.hero-backtype { position: absolute; z-index: 0; top: 26%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(130px, 24vw, 400px); line-height: .68; letter-spacing: -.105em; color: rgba(238,248,252,.32); pointer-events: none; user-select: none; }
.hero-backtype span:last-child { margin-left: 14vw; }
.hero-person { position: absolute; z-index: 2; left: 51%; bottom: -1px; height: min(91%, 1040px); aspect-ratio: 1086 / 1448; transform: translateX(-50%); filter: drop-shadow(34px 28px 22px rgba(5,19,26,.27)); }
.hero-person img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; opacity: 1; transition: opacity .16s ease, transform .35s ease; }
.hero-person .hat-overlay { position: absolute; inset: 0; }
.hero-person img.is-switching { opacity: .16; transform: translateY(7px) scale(.987); }
.hat-overlay { clip-path: polygon(38% 0, 51% 0, 58% 3%, 60% 10%, 60% 16%, 55% 16%, 52% 13%, 44% 10%, 34% 13%, 27% 16%, 27% 11%, 29% 7%, 34% 3%); pointer-events: none; }
.hero-message { position: absolute; z-index: 4; top: 28%; left: 2%; width: min(330px, 25vw); padding: 1.1rem; text-align: center; text-shadow: 0 2px 18px rgba(10,24,31,.5); }
.hero-message .utility { font-size: 12px; }
.hero-message h1 { margin: 1rem 0 .8rem; font-size: clamp(54px, 5.3vw, 92px); line-height: .82; letter-spacing: -.07em; }
.hero-flint-art { display: block; width: 100%; aspect-ratio: 5280 / 2663; overflow: hidden; }
.hero-flint-art img { display: block; width: 103.03%; max-width: none; height: auto; margin-left: -1.515%; margin-top: -1.515%; }
.hero-made-word { display: block; margin-top: .04em; text-align: center; }
.hero-message p:not(.utility) { max-width: 300px; margin: 0 auto 1.7rem; font-size: 17px; line-height: 1.42; }
.hero-message a { display: inline-flex; gap: 2rem; padding-bottom: .55rem; border-bottom: 1px solid #050505; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-decoration: none; }
.hero-controls { position: absolute; z-index: 5; left: 50%; bottom: 6%; width: min(1180px, 91%); min-height: 92px; padding: .65rem; display: grid; grid-template-columns: 155px minmax(0, 1fr) 148px; gap: .5rem; align-items: center; transform: translateX(-50%); border: 2px solid #050505; border-radius: 20px; color: #122e3a; background: rgba(232,245,250,.72); box-shadow: 0 18px 48px rgba(8,28,39,.22); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.control-intro { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.control-intro span { color: #42606d; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; }
.control-intro strong { font-family: "Archivo Black", Arial Black, sans-serif; font-size: 15px; letter-spacing: -.03em; }
.control-options { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
.look-option { min-height: 66px; padding: .45rem .35rem; border: 1px solid transparent; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32rem; color: #284553; background: transparent; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.look-option:hover { transform: translateY(-2px); background: rgba(255,255,255,.5); }
.look-option.is-active { border-color: #050505; color: #102d3b; background: rgba(255,255,255,.7); box-shadow: 0 3px 9px rgba(21,54,69,.08); }
.swatch { width: 20px; height: 20px; display: block; border: 2px solid #050505; border-radius: 50%; box-shadow: none; }
.swatch-red { background: #e21e25; }.swatch-white { background: #fafaf8; }.swatch-black { background: #161719; }.swatch-blue { background: #2268a3; }
.control-shop { min-height: 66px; padding: 0 .75rem; border-radius: 13px; display: flex; align-items: center; justify-content: space-between; gap: .4rem; color: #fff; background: #102e3d; font-family: "Archivo Black", Arial Black, sans-serif; font-size: 11px; text-decoration: none; }
.control-shop:hover { background: #244e62; }
.hero-scroll { position: absolute; z-index: 4; bottom: 1.8%; left: 5%; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-decoration: none; }
.hero-scroll span { margin-left: .75rem; }
.model-card-stage { aspect-ratio: 4 / 5; position: relative; overflow: hidden; display: block; border: 1px solid #050505; background: radial-gradient(circle at 50% 20%, #b2c9d5, #54778b 64%, #1b3544); transition: transform .2s ease, border-color .2s ease; }
.model-card-stage::before { content: "FLINT"; position: absolute; left: 5%; right: 5%; top: 18%; color: rgba(255,255,255,.11); font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(50px, 7vw, 130px); text-align: center; letter-spacing: -.09em; }
.model-card-stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 1%; height: 12%; border-radius: 50%; background: rgba(6,18,24,.33); filter: blur(18px); }
.model-card-stage img { width: 100%; height: 102%; position: absolute; z-index: 1; left: 0; bottom: -4%; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(13px 12px 10px rgba(2,12,18,.2)); }
.model-card-stage--white { background: radial-gradient(circle at 50% 20%, #e3edf1, #8aaeba 60%, #335263); }
.model-card-stage--black { background: radial-gradient(circle at 50% 20%, #a6c1d1, #466b82 60%, #122c3e); }
.model-card-stage--blue { background: radial-gradient(circle at 50% 20%, #acc9df, #527fa2 60%, #183e5a); }
.color-card:hover .model-card-stage { transform: translateY(-3px); border-color: #050505; }
.color-card.is-selected .model-card-stage { outline: 3px solid #050505; outline-offset: -3px; }
.card-meta { font-size: 12px; }.card-meta strong { font-size: 13px; }
.checkout-note { font-size: 12px; }
.selected-variant { font-size: 13px; }
.sizes legend { font-size: 12px; }
@media (max-width: 1000px) {
  .hero--stage { min-height: 820px; }
  .hero-backtype { font-size: clamp(130px, 24vw, 240px); }
  .hero-person { left: 65%; height: 83%; }
  .hero-message { top: 28%; width: 34vw; }
  .hero-controls { grid-template-columns: 130px minmax(0, 1fr); bottom: 5%; }
  .control-shop { grid-column: 1 / -1; min-height: 42px; justify-content: center; }
  .hero-scroll { display: none; }
}
@media (max-width: 640px) {
  body::after { border-width: 4px; }
  .site-header { top: 24px; }
  .hero--stage { min-height: max(750px, calc(100svh - 24px)); }
  .hero-meta { display: none; }
  .hero-backtype { top: 27%; font-size: 35vw; }
  .hero-backtype span:last-child { margin-left: 3vw; }
  .hero-person { left: 60%; height: 70%; bottom: 16%; }
  .hero-message { top: 11%; left: 1rem; width: min(160px, 43vw); padding: .65rem; z-index: 4; text-align: left; }
  .hero-message .utility { display: block; margin-bottom: .55rem; font-size: 9px; }
  .hero-message h1 { width: min(34vw, 132px); margin: 0; font-size: clamp(34px, 9.3vw, 44px); white-space: nowrap; }
  .hero-message p:not(.utility), .hero-message a { display: none; }
  .hero-controls { left: 1rem; bottom: 1rem; width: calc(100% - 2rem); padding: .4rem; grid-template-columns: 1fr; gap: .3rem; transform: none; border-radius: 16px; }
  .control-intro { padding: .45rem .55rem 0; flex-direction: row; justify-content: space-between; align-items: center; }
  .control-intro span { font-size: 10px; }
  .control-intro strong { font-size: 13px; }
  .control-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .look-option { min-height: 45px; flex-direction: row; gap: .5rem; font-size: 11px; }
  .swatch { width: 18px; height: 18px; }
  .control-shop { grid-column: auto; min-height: 40px; }
}

/* Screen two carries the architectural setting into a closer product view. */
.shop--atelier { display: block; color: #050505; background: #c8dbe3; }
.shop-topline { min-height: 58px; padding: 0 3vw; border-top: 1px solid #050505; border-bottom: 1px solid #050505; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .09em; }
.shop-layout { min-height: min(920px, 100svh); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(520px, .95fr); }
.shop-visual { min-height: 820px; position: relative; overflow: hidden; background: linear-gradient(0deg, rgba(9,30,43,.62), transparent 45%), url("./assets/flint-made-hero-architectural-backdrop.webp") center center / cover no-repeat; }
.shop-visual::after { content: ""; position: absolute; inset: 0; border-right: 1px solid #050505; pointer-events: none; }
.shop-visual img { width: auto; height: 93%; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); object-fit: contain; object-position: center bottom; filter: drop-shadow(18px 18px 15px rgba(2,17,26,.28)); opacity: 1; transition: opacity .16s ease, transform .28s ease; }
.shop-visual img.is-switching { opacity: .1; transform: translateX(-50%) translateY(8px) scale(.99); }
.shop-visual-label, .shop-visual-counter { position: absolute; z-index: 2; padding: .45rem .6rem; border: 1px solid #050505; color: #050505; background: rgba(232,245,250,.88); font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .11em; }
.shop-visual-label { top: 30px; left: 30px; }.shop-visual-counter { bottom: 30px; right: 30px; }
.shop--atelier .buy-panel { min-height: 0; position: static; padding: clamp(3rem, 4.5vw, 5.5rem); border-right: 0; display: flex; flex-direction: column; justify-content: center; }
.shop--atelier .buy-panel h2 { margin: .75rem 0 1.2rem; max-width: 650px; font-size: clamp(51px, 4.6vw, 84px); line-height: .87; }
.shop--atelier .shop-intro { max-width: 510px; margin: 0 0 1.2rem; color: #050505; font-size: 17px; line-height: 1.5; }
.shop--atelier .shop-intro a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.art-link { width: fit-content; min-height: 44px; margin: 0 0 2.3rem; padding: .45rem 0; border: 0; border-bottom: 1px solid #050505; display: flex; align-items: center; gap: 2rem; color: #050505; background: transparent; cursor: pointer; font: 700 12px "IBM Plex Mono", monospace; letter-spacing: .07em; }
.art-link:hover { color: #050505; border-color: #050505; }
.shop--atelier .selection-summary { padding: 1rem 0 0; border-top: 1px solid #050505; display: flex; align-items: baseline; gap: 1rem; }
.shop--atelier .selection-summary p { font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.shop--atelier .selected-variant { margin: 0; color: #050505; font: 700 13px "IBM Plex Mono", monospace; text-align: right; }
.shop--atelier .color-grid { margin: 1rem 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; overflow: visible; }
.shop--atelier .color-card { min-width: 0; color: #050505; }
.shop--atelier .model-card-stage { aspect-ratio: 1 / 1; border-color: #050505; background: #8facbb; }
.shop--atelier .model-card-stage::before { display: none; }
.shop--atelier .model-card-stage::after { display: none; }
.shop--atelier .model-card-stage img { width: 100%; height: auto; left: 7%; bottom: -35%; object-fit: contain; }
.shop--atelier .model-card-stage .hat-overlay { filter: none; }
.shop-visual .hat-overlay { filter: none; }
.shop--atelier .card-meta { padding: .55rem 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem; font-size: 11px; }
.shop--atelier .card-meta b { display: none; }
.shop--atelier .card-meta strong { font-size: 11px; }
.shop--atelier .card-meta i { width: 100%; font-size: 10px; color: #050505; }
.shop--atelier .color-card.is-selected .card-meta i { color: #050505; }
.shop--atelier .sizes { margin-bottom: .8rem; }
.shop--atelier .sizes legend { color: #050505; font-size: 12px; }
.shop--atelier .sizes button { border-color: #050505; color: #050505; }
.shop--atelier .sizes button:hover, .shop--atelier .sizes button.is-selected { color: #050505; background: #fff; }
.shop--atelier .buy-button { width: min(100%, 500px); color: #050505; background: #e8f5fa; border-color: #050505; }
.shop--atelier .buy-button.is-ready, .shop--atelier .buy-button:hover { color: #050505; background: #fff; border-color: #050505; }
.shop--atelier .checkout-note { width: min(100%, 500px); color: #050505; text-align: left; }
.shop--atelier .checkout-note span { color: #050505; }
.shop-signoff { min-height: 74px; padding: 0 3vw; border-top: 1px solid #050505; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #050505; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.shop-signoff b { margin: 0 .5rem; color: #050505; }
.shop-signoff a { text-decoration: none; border-bottom: 1px solid #050505; padding-bottom: .25rem; }
.shop-signoff a:hover { color: #050505; }
@media (max-width: 1100px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-visual { min-height: 620px; }
  .shop--atelier .buy-panel { padding: 4rem 4vw; }
}
@media (max-width: 640px) {
  .shop-topline { min-height: 46px; padding: 0 1rem; font-size: 10px; }
  .shop-visual { min-height: 510px; }
  .shop-visual img { width: auto; height: min(94%, 125vw); }
  .shop-visual-label { top: 16px; left: 16px; }.shop-visual-counter { bottom: 16px; right: 16px; }
  .shop--atelier .buy-panel { padding: 2.5rem 1rem 4rem; }
  .shop--atelier .buy-panel h2 { font-size: clamp(44px, 12vw, 62px); }
  .shop--atelier .shop-intro { font-size: 16px; }
  .shop--atelier .color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .shop--atelier .card-meta strong { font-size: 12px; }
  .shop--atelier .card-meta i { font-size: 11px; }
  .shop--atelier .sizes button { min-width: 43px; }
  .shop-signoff { min-height: 70px; padding: 0 1rem; font-size: 10px; }
}

/* The third screen turns the original print into a searchable citywide roll call. */
.blocks { min-height: 100svh; color: #f7fbfe; background: radial-gradient(circle at 15% 0, #315d71 0, #183b4d 32%, #102b39 72%, #0c2431 100%); }
.blocks-topline { min-height: 58px; padding: 0 3vw; border-top: 1px solid #050505; border-bottom: 1px solid #050505; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .09em; }
.blocks-inner { max-width: 1840px; margin: 0 auto; }
.blocks-intro { padding: clamp(3.5rem, 7vw, 7rem) 3vw 5rem; }
.blocks-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); align-items: end; gap: clamp(3rem, 9vw, 10rem); padding-bottom: 4.5rem; }
.blocks-heading .utility { color: #b9d2dc; }
.blocks h2 { margin: 1rem 0 1.8rem; font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(74px, 8.4vw, 150px); line-height: .8; letter-spacing: -.09em; }
.blocks h2 em { display: inline-block; font-style: normal; padding-bottom: .12em; border-bottom: 8px solid #050505; }
.blocks-deck { max-width: 550px; margin: 0; color: #d4e4ea; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.blocks-deck strong { color: #fff; text-decoration: underline; text-decoration-color: #050505; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.blocks-search { align-self: center; width: 100%; padding-top: 3rem; }
.blocks-search label { display: block; margin-bottom: 1rem; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .09em; }
.blocks-search-field { min-height: 70px; padding: 0 1.4rem; border: 2px solid #050505; border-radius: 100px; display: flex; align-items: center; gap: .7rem; color: #112d3a; background: #d6e8ee; box-shadow: 0 15px 40px rgba(0,0,0,.16); transition: background .16s ease, box-shadow .16s ease; }
.blocks-search-field:focus-within { background: #f7fbfe; box-shadow: 0 0 0 3px #a6cadb; }
.blocks-search-field svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.blocks-search input { min-width: 0; width: 100%; height: 60px; border: 0; outline: 0; color: #0b2532; background: transparent; font-size: clamp(17px, 1.4vw, 21px); }
.blocks-search input::placeholder { color: #607988; opacity: 1; }
.blocks-search p { margin: .85rem .25rem 0; color: #c4dce5; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .04em; }
.blocks-list { margin: 0; padding: 0; columns: 4; column-gap: clamp(1.6rem, 3vw, 4rem); list-style: none; }
.blocks-list li { min-height: 47px; padding: .75rem 0 .68rem; border-bottom: 1px solid rgba(4,10,13,.9); break-inside: avoid; color: #f6fbfd; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.25; letter-spacing: -.02em; }
.blocks-list li:hover { color: #b9d9e6; }
.blocks-empty { margin: 3rem 0 0; font-size: 18px; }
.blocks-bottom { min-height: 80px; padding: 1.4rem 3vw; border-top: 1px solid #050505; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.blocks-bottom div { display: flex; gap: 2rem; }
.blocks-bottom a { padding-bottom: .3rem; border-bottom: 1px solid #050505; text-decoration: none; }
.blocks-bottom a:hover { color: #b9d9e6; }
@media (max-width: 1000px) {
  .blocks-heading { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 3.5rem; }
  .blocks-search { padding-top: 0; max-width: 620px; }
  .blocks-list { columns: 3; }
}
@media (max-width: 700px) {
  .blocks-topline { min-height: 46px; padding: 0 1rem; font-size: 10px; }
  .blocks-intro { padding: 4rem 1rem 3rem; }
  .blocks h2 { font-size: clamp(64px, 14vw, 100px); }
  .blocks h2 em { border-bottom-width: 5px; }
  .blocks-heading { padding-bottom: 2.5rem; }
  .blocks-search-field { min-height: 60px; }
  .blocks-search input { height: 55px; }
  .blocks-list { columns: 2; column-gap: 1.2rem; }
  .blocks-list li { min-height: 43px; font-size: 15px; }
  .blocks-bottom { padding: 1.5rem 1rem; align-items: flex-start; flex-direction: column; font-size: 10px; }
}
@media (max-width: 420px) {
  .blocks-list { columns: 1; }
  .blocks h2 { font-size: 15vw; }
}

/* Compact navigation keeps all three screens reachable on touch devices. */
.nav-toggle { display: none; }
.checkout-dialog { border: 2px solid #050505; background: #d6e8ee; }
.dialog-art-hint { margin: 0 0 1.5rem; color: #d6e8ee; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .08em; text-align: left; }
.dialog-art-hint span { margin-left: .4rem; font-size: 16px; }
@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 1rem; }
  .nav-toggle { min-width: 72px; min-height: 44px; padding: .55rem .7rem; border: 1px solid #050505; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; color: #fff; background: rgba(16,46,61,.85); cursor: pointer; font: 700 10px "IBM Plex Mono", monospace; letter-spacing: .08em; }
  .nav-toggle i { width: 14px; height: 10px; display: block; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .site-header nav { position: absolute; top: calc(100% - 1px); left: 1rem; right: 1rem; padding: .5rem 1rem; border: 1px solid #050505; display: none; flex-direction: column; gap: 0; color: #050505; background: #d6e8ee; box-shadow: 0 15px 30px rgba(0,0,0,.2); }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { min-height: 48px; border-bottom: 1px solid #050505; display: flex; align-items: center; font-size: 12px; }
  .site-header nav a:last-child { border-bottom: 0; }
  .site-header nav a::after { display: none; }
  .site-header nav a:hover, .site-header nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
  .hero-controls { grid-template-columns: 145px minmax(0, 1fr); }
  .control-intro span { font-size: 10px; white-space: nowrap; }
}
@media (max-width: 640px) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-action { display: none; }
  .hero-controls { grid-template-columns: 1fr; }
  .shop-visual-label { display: none; }
  .shop--atelier .sizes button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 360px) {
  .shop--atelier .selection-summary { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .shop--atelier .selected-variant { text-align: left; }
}

/* Editorial finishing system: crisp controls and continuous architectural color. */
.site-header {
  background: linear-gradient(90deg, rgba(8, 31, 44, .71), rgba(10, 36, 51, .42));
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  border-bottom: 1px solid #050505;
}
.site-header nav a, .header-action { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; }
.hero-scene::after { background: linear-gradient(0deg, #0b2736 0%, rgba(7, 21, 28, .72) 19%, transparent 39%), linear-gradient(90deg, rgba(15, 39, 50, .55), transparent 34%, transparent 63%, rgba(15, 39, 50, .32)); }
.header-action { padding: .85rem .95rem; border: 1px solid rgba(255, 255, 255, .7); transition: color .18s ease, background .18s ease; }
.header-action:hover { color: #102b39; background: #f7fbfe; }
.header-action:hover span { color: #102b39; }
.hero-controls { border-radius: 5px; background: rgba(226, 241, 247, .84); box-shadow: 0 22px 50px rgba(3, 19, 29, .28); }
.look-option { border-radius: 2px; letter-spacing: .055em; }
.look-option.is-active { color: #f7fbfe; background: #102b39; box-shadow: none; }
.look-option.is-active .swatch { border-color: #f7fbfe; }
.control-shop { border: 1px solid #050505; border-radius: 2px; background: #050505; transition: color .18s ease, background .18s ease; }
.control-shop:hover { color: #050505; background: #f7fbfe; }
.hero-scroll { font-weight: 600; }

.shop--atelier { background: #c9dfe9; }
.shop-topline {
  min-height: 180px;
  position: relative;
  padding-top: 34px;
  align-items: flex-start;
  color: #f4fbff;
  background: linear-gradient(180deg, #0b2736 0%, rgba(11, 39, 54, .96) 20%, rgba(11, 39, 54, 0) 100%), linear-gradient(90deg, #8cadc3 0%, #b8d1df 56%, #e9f6fb 56.05%, #dcedf4 100%);
  border: 0;
}
.shop-topline::before { content: none; }
.shop-topline strong { font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(17px, 2vw, 28px); letter-spacing: -.035em; }
.shop-layout { grid-template-columns: minmax(0, 1.12fr) minmax(520px, .88fr); }
.shop-visual { min-height: 900px; background: linear-gradient(0deg, rgba(5, 21, 32, .89), rgba(5, 21, 32, .2) 35%, rgba(5, 21, 32, .1) 70%), url("./assets/flint-made-hero-architectural-backdrop.webp") center center / cover no-repeat; }
.shop-visual::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 180px; background: linear-gradient(90deg, #8cadc3, #b8d1df); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); pointer-events: none; }
.shop-visual-backnumber { position: absolute; z-index: 0; top: 12%; left: 50%; transform: translateX(-50%); color: rgba(243, 251, 255, .25); font-family: "Archivo Black", Arial Black, sans-serif; font-size: clamp(220px, 30vw, 490px); line-height: 1; letter-spacing: -.12em; pointer-events: none; }
.shop-visual::after { z-index: 3; inset: auto 0 0; height: 185px; border: 0; background: linear-gradient(180deg, transparent, #c9dfe9); }
.shop-visual img { z-index: 2; height: 89%; filter: drop-shadow(22px 20px 17px rgba(1, 10, 18, .38)); }
.shop-visual-label, .shop-visual-counter, .shop-visual-caption { z-index: 4; }
.shop-visual-label, .shop-visual-counter { padding: .6rem .85rem; background: #f4fbff; }
.shop-visual-caption { position: absolute; left: 4%; bottom: 4%; display: grid; gap: .65rem; color: #102b39; text-shadow: 0 1px 12px rgba(247, 251, 254, .5); pointer-events: none; }
.shop-visual-caption span { font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .17em; }
.shop-visual-caption strong { font: 600 clamp(20px, 2.35vw, 38px)/.94 "Archivo Black", Arial Black, sans-serif; letter-spacing: -.055em; }
.shop--atelier .buy-panel { position: relative; justify-content: flex-start; padding: clamp(3rem, 4vw, 5rem) clamp(2rem, 3.7vw, 5rem); background: linear-gradient(160deg, #e9f6fb 0%, #c2dce8 58%, #c9dfe9 100%); isolation: isolate; }
.shop--atelier .buy-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(18, 54, 71, .1) calc(25% - 1px), rgba(18, 54, 71, .1) 25%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 120px, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 120px, #000 70%, transparent 100%); pointer-events: none; }
.shop--atelier .buy-panel > .utility { width: fit-content; padding: .55rem .7rem; color: #f7fbfe; background: #102b39; }
.shop--atelier .buy-panel h2 { margin: 1.4rem 0 1.5rem; font-size: clamp(54px, 4.8vw, 90px); line-height: .86; }
.shop--atelier .buy-panel h2 em { display: inline-block; margin-top: .08em; font: italic 600 .8em/.92 "Newsreader", Georgia, serif; letter-spacing: -.065em; }
.shop--atelier .shop-intro { max-width: 580px; font-size: clamp(17px, 1.15vw, 20px); line-height: 1.5; }
.art-link { margin-bottom: 2.2rem; font-size: 11px; transition: gap .18s ease; }
.art-link:hover { gap: 2.5rem; }
.shop--atelier .selection-summary { border-top-width: 2px; }
.shop--atelier .selected-variant { font-size: 15px; }
.shop--atelier .color-grid { margin-top: 1.2rem; gap: .85rem; }
.shop--atelier .model-card-stage { background: #9ab9c8; border-width: 2px; }
.shop--atelier .color-card.is-selected .model-card-stage { outline: 2px solid #f7fbfe; outline-offset: -6px; }
.shop--atelier .card-meta strong { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .02em; }
.shop--atelier .card-meta i { font-weight: 600; }
.shop--atelier .sizes button { margin-right: .35rem; min-width: 48px; min-height: 48px; background: rgba(247, 251, 254, .3); font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.shop--atelier .sizes button:hover, .shop--atelier .sizes button.is-selected { color: #f7fbfe; background: #102b39; }
.shop--atelier .buy-button { min-height: 62px; color: #f7fbfe; background: #102b39; font-size: 13px; letter-spacing: .055em; }
.shop--atelier .buy-button.is-ready, .shop--atelier .buy-button:hover { color: #102b39; background: #f7fbfe; }
.shop-signoff { min-height: 180px; padding-top: 72px; padding-bottom: 28px; align-items: flex-end; color: #f7fbfe; background: linear-gradient(180deg, #c9dfe9 0%, #719bad 42%, #315d71 100%); border: 0; }
.shop-signoff b { color: #f7fbfe; }
.shop-signoff a { border-bottom-color: #f7fbfe; }
.shop-signoff a:hover { color: #bcd8e6; }
.blocks { background: linear-gradient(180deg, #315d71 0%, #244b5d 240px, #102b39 68%, #0c2431 100%); }
.blocks-topline { border: 0; }
.blocks h2 em { font: italic 600 .86em/.85 "Newsreader", Georgia, serif; letter-spacing: -.055em; }
.blocks-search-field { border-radius: 4px; background: #e8f3f8; }
.blocks-search-field:focus-within { box-shadow: 0 0 0 3px #9dc8db, 0 15px 40px rgba(0, 0, 0, .16); }

@media (max-width: 1100px) {
  .shop-topline { background: linear-gradient(180deg, #0b2736 0%, #21495d 38%, #8aabc2 100%); }
  .shop-visual::before { background: #8aabc2; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-visual { min-height: 720px; }
  .shop--atelier .buy-panel { padding: 4rem 4vw; }
  .shop-visual-caption strong { font-size: clamp(26px, 4.5vw, 42px); }
}
@media (max-width: 640px) {
  .site-header { background: rgba(12, 39, 52, .76); }
  .hero-controls { border-radius: 4px; }
  .shop-topline { min-height: 148px; padding: 28px 1rem 0; }
  .shop-topline strong { font-size: 14px; }
  .shop-topline span:last-child { display: none; }
  .shop-visual { min-height: 570px; }
  .shop-visual img { height: min(95%, 130vw); }
  .shop-visual::before { font-size: 50vw; }
  .shop-visual-caption { bottom: 4%; }
  .shop-visual-caption strong { font-size: 24px; }
  .shop--atelier .buy-panel { padding: 3.2rem 1rem 3.7rem; }
  .shop--atelier .buy-panel h2 { font-size: clamp(47px, 12.5vw, 66px); }
  .shop--atelier .color-grid { gap: .7rem; }
  .shop-signoff { min-height: 156px; padding: 68px 1rem 23px; }
}

/* Find your block: the name map. The print's FLINT block sits beside the list; searching or
   tapping a name dims the rest of the print and zooms to where that name is printed. */
.blocks-explorer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4.5rem); }
.name-map { position: sticky; top: 1.5rem; margin: 0; }
.name-map-frame { position: relative; overflow: hidden; aspect-ratio: 5440 / 2800; border: 1px solid #050505; background: #07161e; box-shadow: 0 30px 60px rgba(0, 0, 0, .28); }
.name-map-stage { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.name-map-stage img { width: 100%; height: 100%; display: block; }
.name-map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.name-map-dim { fill: rgba(5, 16, 22, .82); opacity: 0; transition: opacity .3s ease; }
.name-map-stage.is-filtered .name-map-dim { opacity: 1; }
.name-map-mark { fill: none; stroke: var(--brick); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.name-map-hit { cursor: pointer; pointer-events: all; }
.name-map-hit:hover { stroke: rgba(255, 255, 255, .75); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.name-map figcaption { min-height: 44px; margin-top: .4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #c4dce5; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .08em; }
#name-map-reset { min-height: 44px; padding: 0; border: 0; color: #f7fbfe; background: none; font: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
#name-map-reset span { color: var(--brick); }
#name-map-reset:hover { color: #b9d9e6; }
.blocks-results { min-width: 0; }
.blocks-explorer .blocks-list { columns: 2; }
.blocks-list li { min-height: 0; padding: 0; }
.blocks-list li button { width: 100%; min-height: 47px; padding: .75rem 0 .68rem; border: 0; color: inherit; background: none; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: padding .16s ease, color .16s ease; }
.blocks-list li button:hover { color: #b9d9e6; }
.blocks-list li button[aria-pressed="true"] { padding-left: .8rem; color: #fff; font-weight: 700; box-shadow: inset 4px 0 0 var(--brick); }
.blocks-list li button:focus-visible { outline: 2px solid #f7fbfe; outline-offset: -2px; }
.blocks-list mark { color: #fff; background: none; text-decoration: underline; text-decoration-color: var(--brick); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blocks-more { display: none; }
@media (max-width: 1000px) {
  .blocks-explorer { grid-template-columns: 1fr; }
  .name-map { position: relative; top: auto; }
  .blocks-explorer .blocks-list { columns: 3; }
}
@media (max-width: 700px) {
  .name-map { position: sticky; top: 0; z-index: 3; margin: 0 -1rem; padding: .75rem 1rem 0; background: #12303f; box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .55); }
  .name-map figcaption { font-size: 10px; }
  .blocks-explorer .blocks-list { columns: 2; column-gap: 1.2rem; }
  .blocks-list li button { min-height: 44px; }
  .blocks-list.is-collapsed li:nth-child(n + 31) { display: none; }
  .blocks-more:not([hidden]) { width: 100%; min-height: 52px; margin-top: 1.5rem; display: block; border: 1px solid #f7fbfe; color: #f7fbfe; background: none; font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .09em; cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  .name-map-stage, .name-map-dim, .blocks-list li button { transition: none; }
}