/* Champions for GREEN site. Rules in C4G Website/design-loop/design-system.md.
   Linen and sand bands, forest and near black bands, brass only for numbers and kickers. */
:root {
  --linen: #F5F0E6;
  --sand: #E8E0CF;
  --forest: #243D32;
  --char: #1A1A17;
  --char-line: #3A3A35;
  --ink-2: #3A3A35;
  --slate: #5C6B66;
  --brass: #B08D4F;
  --brass-ink: #82632B;
  --brass-light: #C9A66B;
  --on-dark: #D8D2C4;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --wrap: 1280px;
  --pad: 96px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--linen); color: var(--char); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--forest); }
a:hover { color: var(--char); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 700; }
p { margin: 0; }
figure { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--forest); color: var(--linen); padding: 10px 16px; }

/* Type */
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.02em; }
.display em { font-style: italic; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.015em; }
.kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.lead { font-size: 19px; max-width: 560px; color: var(--ink-2); }

/* Buttons */
.btn { display: inline-block; text-decoration: none; padding: 16px 26px; border-radius: 2px; font: 700 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; border: 0; cursor: pointer; }
.btn-solid { background: var(--forest); color: var(--linen); }
.btn-solid:hover { background: var(--char); color: var(--linen); }
.btn-light { background: var(--linen); color: var(--forest); }
.btn-light:hover { background: var(--sand); color: var(--forest); }
.btn-line { border: 1px solid var(--forest); color: var(--forest); background: transparent; padding: 15px 24px; }
.textlink { font-weight: 700; font-size: 15px; text-underline-offset: 5px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }

/* Header */
.site-head { background: var(--linen); border-bottom: 1px solid var(--sand); position: sticky; top: 0; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--char); }
.brand img { width: 52px; height: 49px; object-fit: contain; }
.brand span { font-weight: 500; font-size: 15px; letter-spacing: 0.22em; white-space: nowrap; }
.brand b { font-weight: 700; color: var(--forest); }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--char); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.nav .btn { color: var(--linen); padding: 12px 20px; }
.menu { display: none; }

/* Photos */
.ph { position: relative; overflow: hidden; background: var(--sand); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.on-white { background: #fff; }
.ph.on-white img { object-fit: contain; }
.concept { position: absolute; left: 10px; bottom: 10px; z-index: 3; font: 700 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(245,240,230,0.94); color: var(--char); padding: 5px 7px; border-radius: 2px; }
.ph.studio { background: #F6F6F6; }
.ph.studio img { object-fit: contain; }
.card .ph.studio { aspect-ratio: 1 / 1; }
.card .ph.studio img { padding: 0; }
.hero-img.on-white { background: #fff; }
.hero-img.on-white img { object-fit: contain; }

/* Home hero: one photo, edge to edge */
.hero-full { position: relative; min-height: min(88vh, 820px); display: flex; align-items: center; background: var(--char); color: var(--linen); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right 20%; }
.hero-concept { left: 24px; bottom: 16px; }
.hero-six { display: flex; align-items: center; gap: 16px; max-width: 520px; }
.hero-six b { font-family: var(--serif); font-weight: 400; font-size: 88px; line-height: 0.8; color: var(--brass); }
.hero-six span { font-size: 18px; line-height: 1.4; color: var(--linen); }
.counts-head { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark); margin-top: 8px; }
.hero-full::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,14,12,0.94) 0%, rgba(14,14,12,0.86) 38%, rgba(14,14,12,0.35) 58%, rgba(14,14,12,0) 72%); z-index: 1; }
.hero-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 24px; padding-top: 80px; padding-bottom: 96px; }
.hero-inner .display { max-width: 680px; }
.hero-inner .lead { color: var(--on-dark); }
.hero-inner .lead b { color: var(--linen); }
.hero-inner .kicker { color: var(--brass); }
.hero-inner .mono { color: var(--on-dark); }
.hero-inner .textlink { color: var(--linen); }
.photo-note { position: absolute; z-index: 2; right: 24px; bottom: 18px; font: 400 11px/1.3 var(--mono); letter-spacing: 0.05em; color: var(--on-dark); text-transform: uppercase; }

/* Sections */
.sec { padding: var(--pad) 0; }
.sec-sand { background: var(--sand); }
.sec-white { background: #fff; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 36px; }
.sec-lead { max-width: 640px; color: var(--ink-2); margin: -16px 0 36px; }

/* Card rails: one backdrop, one angle per row */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card { text-decoration: none; color: var(--char); display: flex; flex-direction: column; gap: 6px; }
.card .ph { aspect-ratio: 4 / 5; margin-bottom: 10px; }
.card .ph.on-white img { padding: 8%; }
.card strong { font-size: 17px; }
.card span { font: 400 12px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
.card:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* Full-bleed split bands */
.band { color: var(--linen); }
.band-forest { background: var(--forest); }
.band-char { background: var(--char); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; }
.split-text { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 80px 64px 80px max(48px, calc((100vw - var(--wrap)) / 2 + 24px)); }
.split-rev .split-text { padding: 80px max(48px, calc((100vw - var(--wrap)) / 2 + 24px)) 80px 64px; }
.split-text p { color: var(--on-dark); max-width: 460px; }
.band .kicker { color: var(--brass-light); }
.band-char .kicker { color: var(--brass); }
.split-img { min-height: 100%; }
.split-text .giant { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 48px); line-height: 1.1; color: var(--linen); max-width: 520px; }
.giant span { display: block; font-size: clamp(120px, 14vw, 200px); line-height: 0.85; color: var(--brass-light); letter-spacing: -0.04em; margin-bottom: 8px; }
.band-char .giant span { color: var(--brass); }
.counts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.counts li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--on-dark); }
.counts b { font-family: var(--serif); font-weight: 400; font-size: 36px; color: var(--brass-light); }

/* Color tiles: the tile is the color */
.colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.color { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 24px; text-decoration: none; overflow: hidden; }
.color strong { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; position: relative; z-index: 2; }
.color span { font: 400 12px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; position: relative; z-index: 2; }
.c-white { background: #FFFFFF; color: var(--char); border: 1px solid #CFC6B3; }
.c-navy { background: #1E2A44; color: #fff; }
.c-black { background: #121212; color: #fff; }
.c-custom { color: var(--linen); background: #3E5A4D; }
.color .tile-cap { position: absolute; left: 8%; right: 8%; top: 14%; background: transparent; z-index: 1; }
.color .tile-cap img { object-fit: contain; }
.color .tile-cap .concept { display: none; }
.c-navy { background: #2B3A5C; }
.c-black { background: #3B3B37; }
.c-custom .ph:not(.tile-cap) { position: absolute; inset: 0; z-index: 0; }
.colors-note { margin-top: 14px; }
.c-custom .ph img { opacity: 0.8; }
.c-custom .concept { top: 10px; bottom: auto; z-index: 2; }
.c-custom::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(14,14,12,0.85), rgba(14,14,12,0) 55%); }
a.color:hover strong { text-decoration: underline; text-underline-offset: 6px; }

/* People wearing it */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.person .ph { aspect-ratio: 4 / 5; }
.person figcaption { padding-top: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }

/* Steps */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.steps3 li { border-top: 2px solid var(--forest); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.steps3 b { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; color: var(--brass-ink); }
.steps3 strong { font-size: 20px; }
.steps3 span { color: var(--ink-2); }

/* Closing band */
.closing .wrap { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.closing .display { font-size: clamp(40px, 5vw, 64px); }
.closing p { color: var(--on-dark); max-width: 560px; margin: 0 auto; }

/* Inner page hero */
.page-hero { padding: 64px 0 var(--pad); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.page-hero-grid > div { display: flex; flex-direction: column; gap: 22px; }
.hero-img { aspect-ratio: 4 / 3; }

/* Hats: what you get */
.get { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.get-img { aspect-ratio: 4 / 5; }
.get-img img { object-position: center 35%; }
.get .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.line-more { margin-top: 24px; color: var(--ink-2); }
.split-text .onlink { color: var(--linen); font-weight: 700; }
.btn-wide { padding: 18px 30px; font-size: 14px; }

/* Proof band */
.proof .wrap { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.proof-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; width: 100%; }
.proof-nums li { display: flex; flex-direction: column; gap: 8px; color: var(--on-dark); font-size: 16px; border-top: 1px solid var(--char-line); padding-top: 20px; }
.proof-nums b { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 8vw, 120px); line-height: 0.9; color: var(--brass); letter-spacing: -0.03em; }

/* Learn extras */
.flow-img { aspect-ratio: 21 / 8; margin-bottom: 10px; }
.flow-note { margin-bottom: 24px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack p { color: var(--ink-2); }

/* Specs */
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #CFC6B3; border: 1px solid #CFC6B3; }
.specs li { background: var(--sand); padding: 28px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--ink-2); }
.specs b { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-ink); }
.specs li { font-size: 19px; color: var(--char); }

.terms { width: 100%; margin-top: 32px; border-collapse: collapse; font-size: 16px; }
.terms th, .terms td { text-align: left; padding: 14px 0; border-bottom: 1px solid #CFC6B3; }
.terms th { font-weight: 500; }
.terms td { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }

.deco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.deco .ph { aspect-ratio: 1 / 1; }
.deco .ph img { object-position: center 30%; }
.deco figcaption { padding-top: 10px; font-weight: 700; font-size: 15px; }

/* Apparel */
.line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.line li { display: grid; grid-template-columns: 76px 1fr; column-gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--sand); }
.line b { grid-row: span 2; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; color: var(--brass-ink); }
.line strong { font-size: 18px; }
.line span { font-size: 15px; color: var(--slate); }
.prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prints .ph { background: #fff; }
.prints .ph { aspect-ratio: 900 / 1056; }

/* Learn */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--sand); border: 1px solid var(--sand); }
.flow li { background: var(--linen); padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.flow b { font-family: var(--mono); font-size: 13px; color: var(--brass-ink); }
.flow strong { font-size: 18px; }
.flow span { font-size: 15px; color: var(--ink-2); }
.faq { margin: 0; }
.faq dt { font-weight: 700; font-size: 18px; padding-top: 22px; border-top: 1px solid #CFC6B3; }
.faq dd { margin: 6px 0 22px; color: var(--ink-2); }

/* Request */
.request-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.request-grid > div:first-child { display: flex; flex-direction: column; gap: 22px; }
.next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.next li { display: flex; gap: 14px; align-items: baseline; }
.next b { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--brass-ink); min-width: 20px; }
.form { background: #fff; border: 1px solid var(--sand); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 15px; }
.form input, .form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #CFC6B3; border-radius: 2px; background: var(--linen); color: var(--char); }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form legend { font-weight: 500; font-size: 15px; margin-bottom: 8px; padding: 0; }
.form .chip { flex-direction: row; align-items: center; gap: 8px; border: 1px solid #CFC6B3; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 400; }
.form .chip input { accent-color: var(--forest); padding: 0; }
.form .btn { align-self: flex-start; }
.form-err { color: #8A2B1E; font-weight: 500; }
.form small { font-weight: 400; font-size: 13px; color: var(--slate); }
.form input[type="date"] { color-scheme: light; font-family: var(--sans); min-height: 48px; }
.webmail { font-size: 15px; }
@media (min-width: 1081px) { .request-grid > div:first-child { position: sticky; top: 110px; } }
.sent { background: #fff; border: 1px solid var(--sand); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.sent[hidden], .form[hidden] { display: none; }
.sent pre { white-space: pre-wrap; font: 14px/1.5 var(--mono); background: var(--linen); padding: 16px; margin: 0; max-height: 320px; overflow: auto; }

/* Footer */
.site-foot { background: var(--char); color: var(--on-dark); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding-top: 64px; padding-bottom: 40px; }
.site-foot h3 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-foot a { color: var(--linen); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.foot-brand img { width: 64px; height: 60px; object-fit: contain; background: var(--linen); border-radius: 50%; padding: 4px; }
.foot-legal { border-top: 1px solid var(--char-line); }
.foot-legal .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 20px; padding-bottom: 24px; font: 12px/1.5 var(--mono); letter-spacing: 0.03em; }

.phone-bar { display: none; }

@media (max-width: 1080px) {
  .rail, .people, .colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-text, .split-rev .split-text { padding: 64px 24px; }
  .split-img { aspect-ratio: 4 / 3; order: 2; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .page-hero-grid, .request-grid, .get { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .proof-nums { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 760px) {
  :root { --pad: 64px; }
  body { font-size: 16px; padding-bottom: 76px; }
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; border: 1px solid var(--forest); color: var(--forest); padding: 10px 14px; border-radius: 2px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--linen); border: 1px solid var(--sand); min-width: 220px; display: flex; flex-direction: column; padding: 8px; }
  .menu nav a { text-decoration: none; color: var(--char); padding: 12px 14px; font-weight: 500; }
  .brand span { font-size: 12px; letter-spacing: 0.14em; }
  .brand img { width: 44px; height: 41px; }
  .hero-full { min-height: 0; align-items: flex-end; }
  .hero-bg { object-position: 78% 20%; }
  .hero-six b { font-size: 64px; }
  .hero-six span { font-size: 16px; }
  .get .specs { grid-template-columns: minmax(0, 1fr); }
  .flow-img { aspect-ratio: 4 / 3; }
  .hero-full::before { background: linear-gradient(0deg, rgba(14,14,12,0.95) 0%, rgba(14,14,12,0.85) 55%, rgba(14,14,12,0.35) 100%); }
  .hero-inner { padding-top: 300px; padding-bottom: 48px; gap: 16px; }
  .hero-concept { left: 16px; top: 16px; bottom: auto; }
  .hero-full .actions { display: none; }
  .rq-more .next, .rq-more .mono { display: none; }
  .lead { font-size: 17px; }
  .split-text, .split-rev .split-text { padding: 56px 16px; }
  .rail, .people, .colors { gap: 12px; }
  .color { padding: 16px; }
  .color strong { font-size: 26px; }
  .steps3, .specs, .line, .flow { grid-template-columns: minmax(0, 1fr); }
  .prints, .deco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .form, .sent { padding: 20px; }
  .terms td { white-space: nowrap; padding-left: 12px; }
  .phone-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--forest); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .phone-bar a { display: block; text-align: center; background: var(--linen); color: var(--forest); text-decoration: none; padding: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

.card .ph.fill { aspect-ratio: 5 / 6; }
.card .ph.fill img { object-fit: cover; }

.prints .ph { border: 1px solid var(--sand); }
.line-more b { font-weight: 700; }
.form-note { font-size: 14px; color: var(--slate); margin-top: -6px; }
.rq-more { display: flex; flex-direction: column; gap: 22px; }
.rq-more .mono { margin-top: 4px; }
@media (max-width: 760px) {
  .card .concept, .person .concept { font-size: 9px; padding: 4px 5px; left: 6px; bottom: 6px; }
}
.c-custom::after { display: none; }

/* Round 5 */
.card .ph.apparel { aspect-ratio: 5 / 6; background: #fff; border: 1px solid var(--sand); }
.card .ph.apparel img { object-fit: contain; }
.prints { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.deco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.form .chip { position: relative; user-select: none; }
.form .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .chip:has(input:checked) { background: var(--forest); border-color: var(--forest); color: var(--linen); }
.form .chip:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.form input[type="date"] { appearance: none; -webkit-appearance: none; background: var(--linen); }
.form input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
body.no-bar { padding-bottom: 0 !important; }
@media (max-width: 1080px) { .prints { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .color .tile-cap { top: 10%; left: 10%; right: 10%; }
  .color strong { font-size: 22px; }
}

/* Round 6 */
.card .ph.studio img { transform: scale(1.1); transform-origin: right center; }
.c-white { border: 1px solid #CFC6B3; }
.card .concept, .person .concept { top: 8px; bottom: auto; left: 8px; }
.methods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--sand); border: 1px solid var(--sand); }
.methods li { background: var(--linen); padding: 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.methods b { font-size: 18px; }
.methods span { font-size: 15px; color: var(--ink-2); }
.line-note { margin-top: 28px; padding: 20px 24px; background: var(--sand); display: flex; flex-direction: column; gap: 6px; }
.print figcaption { padding-top: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); }
.rq-proof { border-top: 1px solid #CFC6B3; padding-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.rq-proof b { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; color: var(--brass-ink); }
.rq-proof span { color: var(--ink-2); }
@media (max-width: 1080px) { .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .methods { grid-template-columns: minmax(0, 1fr); } .rq-more .rq-proof { display: none; } }

/* Round 7 */
.card .ph.cap img { transform: none; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #CFC6B3; margin-right: 8px; vertical-align: 0; }
.card .concept, .person .concept { top: auto; bottom: 8px; left: 8px; font-size: 9px; padding: 3px 5px; background: rgba(245,240,230,0.82); font-weight: 400; }
.split-text .counts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 36px; }
.line-note { background: transparent; padding: 0; margin-top: 20px; }

/* Round 8 */
.card .ph.apparel { border: 0; }
.specs b { font: 400 30px/1.1 var(--serif); letter-spacing: -0.01em; text-transform: none; color: var(--char); }
.specs li span { font-size: 15px; color: var(--ink-2); }
.styles-line { margin-top: 20px; color: var(--ink-2); }
.methods { background: transparent; border: 0; gap: 20px; }
.methods li { background: transparent; border-top: 2px solid var(--forest); padding: 18px 0 0; }
.counts li { flex-wrap: nowrap; }
.counts b { white-space: nowrap; }
.giant span { margin-bottom: 14px; }
@media (max-width: 760px) { .counts li { flex-wrap: wrap; } .counts b { flex-basis: auto; } }

/* Round 9 */
.ph.studio { background: #ECE6DA; }
.hero-img.wide { aspect-ratio: 2 / 1; }
.specs b { font: 700 20px/1.2 var(--sans); color: var(--char); }
.split-text .counts { grid-template-columns: repeat(2, max-content); }
.counts li { flex-wrap: nowrap; }
.sw[style*="#fff"] { background: #fff; border-color: #9C9484; }
.proof-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.print figcaption { padding-top: 0; }
@media (max-width: 760px) {
  .split-text .counts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; }
  .counts li { flex-wrap: wrap; gap: 2px 8px; }
  .counts b { font-size: 30px; }
  .proof-nums { grid-template-columns: minmax(0, 1fr); }
}

/* Round 10 */
.hero-bg { object-position: right center; }
.ph.zoom img { transform: scale(var(--z, 1.6)); transform-origin: var(--o, 50% 30%); }
.ph.z1 { --z: 1.9; --o: 52% 28%; }
.ph.z2 { --z: 2.1; --o: 50% 26%; }
.ph.z3 { --z: 1.5; --o: 66% 20%; }
.ph.z4 { --z: 1.15; --o: 50% 20%; }
.person figcaption { text-transform: none; letter-spacing: 0; font: 400 15px/1.4 var(--sans); color: var(--ink-2); }

/* Round 10 fixes */
@media (max-width: 760px) {
  .hero-bg { object-position: 72% 30%; }
  .hero-full::before { background: linear-gradient(0deg, rgba(14,14,12,0.96) 0%, rgba(14,14,12,0.9) 42%, rgba(14,14,12,0.25) 68%, rgba(14,14,12,0) 100%); }
  .hero-inner { padding-top: 340px; }
  .counts li { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .counts li b { line-height: 1.1; }
}
.split-text .counts li { flex-direction: column; align-items: flex-start; gap: 0; }

/* What we make collage */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 16px; }
.bento .bt { position: relative; margin: 0; overflow: hidden; background: #0E0E0C; }
.bento .bt .ph { position: absolute; inset: 0; background: transparent; }
.bento .bt .ph img { width: 100%; height: 100%; object-fit: cover; }
.bento .ph.contain-dark { background: #121212; }
.bento .ph.contain-dark img { object-fit: contain; padding: 6%; }
.bento .ph.contain-white { background: #fff; }
.bento .ph.contain-white img { object-fit: cover; object-position: center 60%; }
.bento .b-big { grid-column: span 2; grid-row: span 2; }
.bento .b-wide { grid-column: span 2; }
.bento .b-tall { grid-row: span 2; }
.bento figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 3; background: rgba(245,240,230,0.94); color: var(--char); font: 700 13px/1.2 var(--sans); padding: 7px 10px; border-radius: 2px; }
.bento .concept { left: auto; right: 8px; bottom: auto; top: 8px; }
.bento.mini { grid-auto-rows: 210px; }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; } .bento .b-tall { grid-row: span 2; } }
@media (max-width: 760px) { .bento { grid-auto-rows: 150px; gap: 10px; } .bento figcaption { font-size: 12px; left: 8px; bottom: 8px; padding: 5px 7px; } }
@media (max-width: 760px) {
  .terms th, .terms td { display: block; text-align: left; white-space: normal; padding: 4px 0; border: 0; }
  .terms tr { display: block; padding: 10px 0; border-bottom: 1px solid #CFC6B3; }
  .bento .b-wide, .bento .b-big { grid-column: span 2; }
}