/* Art direction: an independent creative house, presented as an editorial folio. */
html { scroll-padding-top: 100px; }
body { --paper: #fffefb; --cream: #f3f0e9; --ink: #262722; --wine: #510d26; --gold: #ebbd72; --orange: #b54828; }
body .nav { position: fixed; padding: 14px 4vw; background: rgba(255,254,251,.96); border-bottom: 1px solid #26272226; backdrop-filter: blur(18px); }
body .mark img { width: 35px; height: 44px; }
body .mark span { letter-spacing: .04em; font-size: 16px; }
body .nav-links { gap: 26px; }
body .nav-cta { border-radius: 2px; }
body .hero { background: #f3f0e9; padding: 160px 6vw 105px; min-height: 850px; grid-template-columns: 1fr 1fr; gap: 30px; overflow: hidden; }
body .hero::before, body .hero::after { display: none; }
body .hero h1 { font-size: clamp(64px,7.2vw,118px); line-height: .96; letter-spacing: -.055em; max-width: 10ch; }
body .hero h1 em { display: inline-block; }
body .hero-intro { max-width: 420px; font-size: 18px; }
body .eyebrow { font-size: 12px; letter-spacing: .14em; }
body .button { border-radius: 2px; box-shadow: none; min-height: 54px; font-size: 14px; }
body .button:hover { box-shadow: none; }
body .book-stage { min-height: 550px; background: #c7dce0; margin: 0 0 0 12px; border-radius: 50% 50% 0 0; }
body .cover { width: 70%; max-width: 410px; border-radius: 2px 9px 9px 2px; box-shadow: -10px 20px 35px #172b3633; }
body .cover-en { right: 9%; top: 10%; transform: rotate(3deg); }
body .cover-ht { left: -10%; top: 29%; transform: rotate(-13deg) scale(.72); }
body .cover-es { right: -13%; bottom: -7%; transform: rotate(13deg) scale(.66); }
body .language-note { width: 110px; height: 110px; left: 2%; bottom: 2%; transform: none; box-shadow: none; }
body .language-note span { font-size: 10px; }
.folio-index { display: flex; gap: 30px; padding: 22px 6vw; border-bottom: 1px solid #26272230; background: var(--paper); }
.folio-index a { text-decoration: none; font-size: 14px; flex: 1; display: flex; justify-content: space-between; border-bottom: 1px solid #26272230; padding: 10px 0; }
.folio-index a:hover { color: var(--wine); border-color: var(--wine); }
.folio-index small { color: #74756c; }
body .manifesto { padding: 90px 8vw; }
body .manifesto::after { display: none; }
body .manifesto h2 { font-size: clamp(48px,6.5vw,100px); line-height: 1.02; }
body .manifesto-copy { margin-top: 35px; font-size: 18px; }
body .story { padding: 110px 6vw; }
body .story-grid { gap: 65px; grid-template-columns: 1fr 1fr; }
body .story h2 { font-size: clamp(48px,5vw,80px); line-height: 1.02; }
body .story h2 em { color: var(--wine); }
body .page-stack { min-height: 620px; }
body .page-card { margin: 0; cursor: zoom-in; }
body .page-shirt { width: min(38%,250px); aspect-ratio: 3 / 4; right: -3%; bottom: -4%; z-index: 3; transform: rotate(7deg); }
body .page-shirt img { object-position: center; }
body .page-label { font-size: 18px; right: auto; left: 36%; max-width: 200px; }
.inspect-button { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: zoom-in; color: transparent; }
.inspect-button:focus-visible { outline: 4px solid var(--wine); outline-offset: -5px; }
body .principles { background: transparent; border: 0; display: block; }
body .principle { min-height: auto; padding: 16px 0; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); background: transparent; gap: 20px; }
body .principle b { font-size: 24px; }
body .principle span { font-size: 14px; margin: 0; text-align: right; }
body .book-range { padding: 80px 6vw; }
body .book-range h2 { font-size: clamp(44px,4.8vw,76px); line-height: 1.04; }
body .book-topic { min-height: 230px; padding: 28px; }
body .book-topic h3 { font-size: 29px; }
body .languages { min-height: 680px; padding: 85px 8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; background: #d8e5e4; }
body .languages .orbit-cover { display: none; }
body .language-heading { text-align: left; pointer-events: auto; grid-column: 1; grid-row: 1; }
body .language-heading h2 { font-size: clamp(56px,6.5vw,105px); line-height: .97; }
.edition-view { grid-column: 2; grid-row: 1; margin: 0; transform: rotate(3deg); }
.edition-view img { display: block; width: min(100%,470px); height: auto; max-height: 520px; object-fit: contain; border-radius: 3px 12px 12px 3px; box-shadow: -12px 20px 35px #253c4238; }
.edition-view figcaption { margin-top: 25px; font-size: 14px; text-align: center; }
.edition-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
.edition-options a { background: transparent; border: 1px solid #263f4055; padding: 13px 16px; font: 500 14px var(--sans); color: var(--ink); cursor: pointer; text-decoration: none; }
.edition-options a[aria-current="true"], .edition-options a:hover { background: var(--wine); border-color: var(--wine); color: white; }
body .design-studio { min-height: auto; grid-template-columns: .9fr 1.1fr; background: #d3a272; }
body .design-brand { min-height: 650px; padding: 60px; background: #d3a272; border: none; }
body .design-brand::after { display: none; }
body .design-brand img { width: 100%; max-width: none; height: 420px; object-fit: contain; filter: none; }
body .design-brand p { font-size: 28px; max-width: 400px; }
body .design-copy { padding: 80px 6vw; }
body .design-copy h2 { font-size: clamp(50px,5vw,80px); line-height: 1; }
body .design-copy h2 em { color: var(--wine); }
.studio-service { border-bottom: 1px solid var(--line); }
.studio-service summary { padding: 23px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font: 400 27px var(--serif); list-style: none; }
.studio-service summary::-webkit-details-marker { display: none; }
.studio-service summary::after { content: "+"; font: 300 26px var(--sans); margin-left: 14px; }
.studio-service[open] summary::after { content: "−"; }
.studio-service p { margin: 0 0 25px; line-height: 1.7; color: #575a51; }
.studio-service a { display: inline-block; font-size: 14px; margin-bottom: 25px; text-underline-offset: 5px; }
body .soccer { display: none; background: #173d32; padding: 100px 6vw; }
body .soccer h2 { font-size: clamp(54px,6vw,94px); line-height: 1; }
body .soccer::before, body .soccer::after { display: none; }
body .age-grid { gap: 0; margin-top: 55px; border-top: 1px solid #ffffff55; border-bottom: 1px solid #ffffff55; }
body .age-card { border: 0; border-right: 1px solid #ffffff55; min-height: 300px; padding: 35px; }
body .age-card:last-child { border-right: 0; }
body .age-card strong { font-size: 76px; }
body .soccer-mantra { font-size: clamp(26px,4vw,60px); border: 0; margin-top: 35px; }
body .why { padding: 95px 6vw; }
body .why-head { grid-template-columns: 1fr 1fr; }
body .why-head h2 { font-size: clamp(50px,5vw,80px); line-height: 1; }
body .value-grid { display: block; border: 0; background: transparent; }
body .value, body .value:nth-child(2), body .value:nth-child(3) { background: transparent; min-height: auto; padding: 30px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: .3fr 1fr; gap: 30px; }
body .value h3 { font-size: 32px; margin: 0 0 12px; }
body .value > div { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; }
body .value p { font-size: 16px; }
body .purpose { padding: 110px 8vw; }
body .purpose::before, body .purpose::after { display: none; }
body .purpose h2 { font-size: clamp(48px,6.8vw,105px); line-height: 1; }
body .purpose-signoff { font-size: 25px !important; }
body .about-contact { min-height: auto; }
body .about-panel { padding: 85px 6vw; }
body .about-panel h2 { font-size: clamp(45px,4.5vw,70px); line-height: 1.03; }
body .contact-panel { padding: 70px 4vw; background: #e5b585; }
body .contact-panel h3 { font-size: clamp(40px,4.5vw,65px); line-height: 1.02; }
body .contact-line { flex-wrap: wrap; overflow-wrap: anywhere; }
.contact-details { margin-top: 30px; }
.boer-form { margin-top: 40px; padding-top: 30px; border-top: 1px solid #510d2640; }
.form-trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.form-grid label { display: grid; gap: 8px; font: 600 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.form-grid input, .form-grid textarea { width: 100%; border: 1px solid #510d2645; border-radius: 0; background: rgba(255,255,255,.24); color: var(--wine); padding: 13px 14px; font: 400 16px/1.4 var(--sans); }
.form-grid textarea { resize: vertical; min-height: 125px; }
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid var(--wine); outline-offset: 2px; background: rgba(255,255,255,.4); }
.field-wide { grid-column: 1 / -1; }
.form-grid .check-field { display: flex; align-items: center; gap: 11px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.check-field input { width: 18px; height: 18px; accent-color: var(--wine); }
.form-actions { display: flex; align-items: center; gap: 22px; margin-top: 25px; }
.form-actions .button { margin-top: 0; border: 0; cursor: pointer; flex: 0 0 auto; }
.form-actions .button:disabled { cursor: wait; opacity: .72; }
.form-actions p { margin: 0; max-width: 250px; font-size: 12px; line-height: 1.45; opacity: .72; }
.form-status.is-success { opacity: 1; font-weight: 700; }
.form-status.is-error { opacity: 1; color: #7b1428; font-weight: 700; }
body .closing { min-height: auto; padding: 60px 6vw 30px; }
body .closing h2 { font-size: clamp(40px,5vw,75px); line-height: 1.03; }
body .closing footer { margin-top: 50px; }
body .closing::after { display: none; }
.art-dialog { inset: 0; margin: auto; width: min(92vw,850px); height: auto; max-height: 94svh; background: #fffefb; padding: 24px; overflow: auto; }
.art-dialog::backdrop { background: #171d20d9; backdrop-filter: blur(10px); }
.art-dialog img { max-height: 72svh; margin: auto; object-fit: contain; }
.art-dialog .viewer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 20px; }
.art-dialog button { font: 500 14px var(--sans); background: none; padding: 12px; border: 1px solid #26272255; cursor: pointer; }
body a:focus-visible,body button:focus-visible,body summary:focus-visible { outline: 3px solid #b54828; outline-offset: 5px; }
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (min-width: 981px) { body .design-brand { position: sticky; top: 74px; height: 700px; align-self: start; } }
@media (max-width: 980px) {
 body .hero { grid-template-columns: 1fr 1fr; padding: 140px 5vw 70px; min-height: 700px; }
 body .hero h1 { font-size: 64px; }
 body .book-stage { min-height: 390px; }
 body .nav-links { gap: 16px; }
 body .nav .mark span { display: none; }
 body .story-grid,body .design-studio,body .soccer-head,body .about-contact { grid-template-columns: 1fr; }
 body .book-topics { grid-template-columns: repeat(3,1fr); }
 body .book-topic { padding: 20px; }
 body .design-brand { min-height: auto; flex-direction: row; align-items: center; gap: 25px; padding: 40px; }
 body .design-brand img { width: 45%; height: 310px; }
 body .age-grid { grid-template-columns: repeat(3,1fr); }
 body .age-card { padding: 22px; }
 body .age-card strong { font-size: 58px; }
 body .value > div { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 720px) {
 body .hero { grid-template-columns: 1fr; padding: 120px 24px 55px; }
 body .hero h1 { font-size: clamp(58px,14vw,90px); max-width: 12ch; }
 body .book-stage { width: 85%; min-height: 420px; margin: 40px auto 0; }
 body .cover { width: 77%; }
 body .folio-index { gap: 17px; padding: 15px 24px; }
 body .folio-index a { font-size: 13px; gap: 7px; }
 body .folio-index small { display: none; }
 body .manifesto,body .story,body .book-range,body .soccer,body .why,body .purpose { padding: 70px 24px; }
 body .manifesto h2 span { margin-left: 0; }
 body .page-stack { min-height: 440px; }
 body .page-shirt { width: 39%; right: -2%; bottom: -2%; }
 body .page-label { left: 29%; max-width: 145px; font-size: 15px; padding: 12px; }
 body .book-topics,body .age-grid { grid-template-columns: 1fr; }
 body .book-topic { min-height: 200px; }
 body .languages { grid-template-columns: 1fr; padding: 70px 24px; gap: 45px; }
 body .language-heading { margin: 0; }
 body .edition-view { grid-column: 1; grid-row: 2; width: 85%; margin: auto; }
 body .design-brand { flex-direction: column; padding: 40px 24px; }
 body .design-brand img { width: 100%; height: 350px; }
 body .design-copy { padding: 65px 24px; }
 body .age-card { border-right: 0; border-bottom: 1px solid #ffffff55; min-height: 220px; }
 body .age-card:last-child { border-bottom: 0; }
 body .soccer-mantra { flex-direction: row; gap: 12px; font-size: 25px; }
 body .why-head { grid-template-columns: 1fr; gap: 30px; }
 body .value,body .value:nth-child(2),body .value:nth-child(3) { grid-template-columns: 1fr; gap: 16px; }
 body .about-panel,body .contact-panel { padding: 65px 24px; min-height: auto; }
 body .form-grid { grid-template-columns: 1fr; }
 body .field-wide { grid-column: auto; }
 body .form-actions { align-items: flex-start; flex-direction: column; }
 body .art-dialog { padding: 15px; }
}