@import url("/assets/fashion/fonts.css");
@import url("/assets/fashion/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bebbil-ivory); color: var(--bebbil-ink); font-family: var(--bebbil-font-sans); font-size: 1rem; line-height: 1.6; }
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--bebbil-focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: .7rem; left: .7rem; padding: .7rem 1rem; background: var(--bebbil-paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: relative; z-index: 20; height: 6rem; padding: 0 clamp(1rem, 4vw, 4rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--bebbil-line); background: rgb(246 241 232 / .94); backdrop-filter: blur(14px); }
.site-logo { width: clamp(9rem, 14vw, 12rem); grid-column: 2; }
.site-tools { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.site-tools a { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; }
.menu-button { justify-self: start; border: 0; padding: .75rem 0; background: transparent; color: inherit; cursor: pointer; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.menu-button span { display: inline-block; width: 1.4rem; height: 1px; margin-right: .65rem; vertical-align: middle; background: currentColor; box-shadow: 0 5px currentColor, 0 -5px currentColor; }
.site-nav { position: fixed; z-index: 15; inset: 0; padding: 8rem clamp(1.5rem, 7vw, 8rem) 3rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, .5fr); gap: 4rem; background: var(--bebbil-ink); color: var(--bebbil-ivory); opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .25s var(--bebbil-ease), transform .25s var(--bebbil-ease), visibility .25s; overflow: auto; }
.site-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav-primary a { display: inline-block; font-family: var(--bebbil-font-display); font-size: clamp(3rem, 6vw, 6.5rem); line-height: .95; text-decoration: none; }
.site-nav-primary a:hover { color: #d9b7be; }
.site-nav-meta { align-self: end; }
.site-nav-meta li + li { margin-top: .7rem; }
.site-nav-meta a { color: #c9c1b5; text-decoration: none; }
.shell { width: min(100% - 2rem, 90rem); margin-inline: auto; }
.preview-hero { min-height: calc(100vh - 6rem); padding: clamp(5rem, 12vw, 12rem) 0 5rem; display: grid; align-content: center; text-align: center; }
.eyebrow { margin: 0 0 1.5rem; color: var(--bebbil-oxblood); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.preview-hero h1 { margin: 0 auto; max-width: 11ch; font-family: var(--bebbil-font-display); font-size: clamp(4rem, 10vw, 10rem); font-weight: 500; line-height: .78; letter-spacing: -.055em; }
.preview-hero p:last-child { max-width: 38rem; margin: 3rem auto 0; color: var(--bebbil-mineral); font-size: clamp(1rem, 1.6vw, 1.3rem); }
.architecture-strip { padding: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bebbil-ink); color: var(--bebbil-ivory); }
.architecture-strip div { min-height: 13rem; padding: 1.5rem; border: 1px solid #3b3834; display: flex; flex-direction: column; justify-content: space-between; }
.architecture-strip strong { font-family: var(--bebbil-font-display); font-size: 2rem; font-weight: 500; }
.architecture-strip span { color: #aaa198; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.site-footer { padding: 5rem clamp(1rem, 4vw, 4rem) 2rem; background: var(--bebbil-paper); border-top: 1px solid var(--bebbil-line); }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(2, .6fr); gap: 3rem; }
.footer-grid img { width: 10rem; }
.footer-grid h2 { margin: 0; font-family: var(--bebbil-font-display); font-size: 2.3rem; font-weight: 500; }
.footer-grid ul { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.footer-grid li + li { margin-top: .5rem; }
.footer-grid a { color: var(--bebbil-mineral); text-decoration: none; }
.footer-note { margin: 4rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--bebbil-line); color: var(--bebbil-mineral); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 760px) {
  .site-header { height: 5rem; grid-template-columns: 1fr auto 1fr; }
  .site-tools a:first-child { display: none; }
  .site-nav { grid-template-columns: 1fr; gap: 3rem; }
  .architecture-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .menu-button { width: 2.4rem; overflow: hidden; white-space: nowrap; }
  .architecture-strip { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
.map-page { padding-block: clamp(5rem, 10vw, 10rem); }
.map-page > h1 { margin: 0; max-width: 10ch; font: 500 clamp(4rem, 9vw, 9rem)/.8 var(--bebbil-font-display); letter-spacing: -.05em; }
.map-page > h1 em { color: var(--bebbil-oxblood); }
.map-lede { max-width: 44rem; margin: 3rem 0 6rem; color: var(--bebbil-mineral); font-size: 1.15rem; }
.map-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bebbil-line); }
.map-list li { padding: 2.2rem 0; display: grid; grid-template-columns: .5fr 1fr 1.5fr; align-items: baseline; gap: 2rem; border-bottom: 1px solid var(--bebbil-line); }
.map-list span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.map-list h2 { margin: 0; font: 500 clamp(2rem, 4vw, 4rem)/1 var(--bebbil-font-display); }
.map-list p { margin: 0; color: var(--bebbil-mineral); }
@media (max-width: 700px) { .map-list li { grid-template-columns: 1fr; gap: .5rem; } }
.button { min-height: 3.2rem; padding: .8rem 1.3rem; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid var(--bebbil-ink); background: var(--bebbil-ink); color: var(--bebbil-ivory); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.button:hover { background: var(--bebbil-oxblood); border-color: var(--bebbil-oxblood); }
.button.secondary { background: transparent; color: var(--bebbil-ink); }
.button.secondary:hover { background: var(--bebbil-ink); color: var(--bebbil-ivory); }
.tag { display: inline-flex; padding: .35rem .6rem; border: 1px solid var(--bebbil-line); border-radius: var(--bebbil-radius-pill); color: var(--bebbil-mineral); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.editorial-card { min-width: 0; }
.editorial-card figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bebbil-line); }
.editorial-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--bebbil-ease); }
.editorial-card:hover figure img { transform: scale(1.025); }
.editorial-card h3 { margin: 1rem 0 .5rem; font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 var(--bebbil-font-display); }
.editorial-card p { margin: 0; color: var(--bebbil-mineral); }
.note { padding: 1.5rem; border-left: 3px solid var(--bebbil-oxblood); background: var(--bebbil-paper); }
.note strong { display: block; margin-bottom: .5rem; font-family: var(--bebbil-font-display); font-size: 1.5rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.25rem; padding: .8rem 1rem; border: 1px solid var(--bebbil-line); border-radius: 0; background: var(--bebbil-paper); color: var(--bebbil-ink); }
.field small { color: var(--bebbil-mineral); }
.editorial-quote { margin: 0; padding: 2rem 0; border-block: 1px solid var(--bebbil-line); font: italic 400 clamp(2rem, 5vw, 5rem)/1 var(--bebbil-font-display); color: var(--bebbil-oxblood); }
.component-page { padding-block: clamp(5rem, 10vw, 10rem); }
.component-page > h1 { margin: 0 0 5rem; font: 500 clamp(4rem, 9vw, 9rem)/.8 var(--bebbil-font-display); letter-spacing: -.05em; }
.component-section { padding: 3rem 0; border-top: 1px solid var(--bebbil-line); }
.component-section > h2 { margin: 0 0 2rem; font: 500 2.6rem/1 var(--bebbil-font-display); }
.component-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 650px) { .component-grid { grid-template-columns: 1fr; } }
.home-hero { min-height: calc(100vh - 6rem); display: grid; grid-template-columns: .78fr 1.22fr; background: var(--bebbil-paper); }
.home-hero-copy { padding: clamp(4rem, 8vw, 9rem) clamp(1.5rem, 6vw, 7rem); display: flex; flex-direction: column; justify-content: center; }
.home-hero h1 { margin: 1rem 0 2rem; font: 500 clamp(4.2rem, 8.5vw, 8.5rem)/.79 var(--bebbil-font-display); letter-spacing: -.055em; }
.home-hero h1 em, .home-statement h2 em, .home-newsletter h2 em { color: var(--bebbil-oxblood); font-weight: 400; }
.home-hero-copy > p:not(.eyebrow) { max-width: 33rem; margin: 0; color: var(--bebbil-mineral); font-size: 1.12rem; }
.text-link { width: fit-content; margin-top: 3rem; padding-bottom: .35rem; border-bottom: 1px solid; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; }
.home-hero-art { margin: 0; min-height: 42rem; position: relative; overflow: hidden; background: #bcb2a1; }
.home-hero-art picture { display: block; width: 100%; height: 100%; }
.home-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.home-hero-art figcaption { position: absolute; right: 1.2rem; bottom: 1.2rem; padding: .55rem .75rem; background: rgb(23 21 19 / .78); color: var(--bebbil-ivory); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.home-statement { padding: clamp(7rem, 15vw, 15rem) clamp(1.5rem, 10vw, 12rem); text-align: center; }
.home-statement h2 { max-width: 18ch; margin: 1rem auto 2.5rem; font: 500 clamp(3.3rem, 7vw, 7.5rem)/.9 var(--bebbil-font-display); letter-spacing: -.04em; }
.home-statement > p:last-child { max-width: 43rem; margin: auto; color: var(--bebbil-mineral); font-size: 1.1rem; }
.home-portals { display: grid; grid-template-columns: .65fr 1.35fr; background: var(--bebbil-ink); color: var(--bebbil-ivory); }
.portal-intro { padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 6vw, 6rem); }
.portal-intro .eyebrow { color: #d9b7be; }
.portal-intro h2 { margin: 1rem 0; font: 500 clamp(3rem, 6vw, 6rem)/.85 var(--bebbil-font-display); }
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.portal-card { min-height: 24rem; padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; border: solid #3b3834; border-width: 0 0 1px 1px; }
.portal-card > span:first-child { color: #d9b7be; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portal-card h3 { margin: auto 0 1rem; font: 500 clamp(2.5rem, 4vw, 4.5rem)/.9 var(--bebbil-font-display); }
.portal-card h3 a { text-decoration: none; }
.portal-card p { margin: 0; max-width: 25rem; color: #bdb6ad; }
.portal-card .status { margin-top: 2rem; color: #8e877f; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.home-method { display: grid; grid-template-columns: 1.05fr .95fr; }
.home-method figure { margin: 0; min-height: 45rem; }
.home-method figure img { width: 100%; height: 100%; object-fit: cover; }
.home-method > div { padding: clamp(5rem, 9vw, 10rem) clamp(1.5rem, 7vw, 8rem); background: var(--bebbil-paper); }
.home-method h2 { margin: 1rem 0 2rem; font: 500 clamp(3rem, 5vw, 5.5rem)/.9 var(--bebbil-font-display); letter-spacing: -.035em; }
.home-method p:not(.eyebrow) { margin-bottom: 2rem; color: var(--bebbil-mineral); }
.home-trust { padding: 1.25rem clamp(1rem, 4vw, 4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-block: 1px solid var(--bebbil-line); text-align: center; color: var(--bebbil-mineral); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.home-newsletter { padding: clamp(7rem, 14vw, 14rem) 1.5rem; background: var(--bebbil-oxblood); color: var(--bebbil-ivory); text-align: center; }
.home-newsletter .eyebrow { color: #dfbbc4; }
.home-newsletter h2 { margin: 1rem auto 2rem; font: 500 clamp(3.5rem, 7vw, 7.5rem)/.85 var(--bebbil-font-display); }
.home-newsletter h2 em { color: #dfbbc4; }
.home-newsletter > p:not(.eyebrow) { max-width: 37rem; margin: 0 auto 2rem; color: #e6ced4; }
.newsletter-status { display: inline-block; padding: .75rem 1rem; border: 1px solid #a8596b; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 900px) {
  .home-hero, .home-portals, .home-method { grid-template-columns: 1fr; }
  .home-hero-art { min-height: 62vh; order: -1; }
  .home-hero-art img { object-position: 64% center; }
  .home-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .home-hero h1 { font-size: 4.15rem; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { min-height: 20rem; border-left: 0; }
  .home-trust { grid-template-columns: 1fr; }
}
.section-hero { padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 7vw, 8rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 10rem); align-items: end; }
.section-hero h1 { margin: 0; font: 500 clamp(5rem, 12vw, 12rem)/.75 var(--bebbil-font-display); letter-spacing: -.06em; }
.section-hero-copy { max-width: 35rem; }
.section-hero-copy p:not(.eyebrow) { color: var(--bebbil-mineral); font-size: 1.15rem; }
.edit-feature { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--bebbil-paper); }
.edit-feature figure { margin: 0; min-height: 43rem; }
.edit-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.edit-feature > div { padding: clamp(4rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); display: flex; flex-direction: column; justify-content: center; }
.edit-feature h2 { margin: 1rem 0 2rem; font: 500 clamp(3.3rem, 6vw, 6.5rem)/.86 var(--bebbil-font-display); letter-spacing: -.04em; }
.edit-feature h2 a { text-decoration: none; }
.edit-feature .tag { width: fit-content; margin-top: 2rem; }
.edit-feature p:not(.eyebrow) { color: var(--bebbil-mineral); }
.edit-categories { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 7vw, 8rem); }
.edit-categories h2 { margin: 0 0 4rem; font: 500 clamp(3rem, 6vw, 6rem)/.9 var(--bebbil-font-display); }
.category-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bebbil-line); }
.category-lines li { padding: 1.8rem 0; display: grid; grid-template-columns: 4rem 1fr 1fr; align-items: center; border-bottom: 1px solid var(--bebbil-line); }
.category-lines span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; }
.category-lines strong { font: 500 2rem/1 var(--bebbil-font-display); }
.category-lines strong a { text-decoration: none; }
.category-lines p { margin: 0; color: var(--bebbil-mineral); }
@media (max-width: 780px) { .section-hero, .edit-feature { grid-template-columns: 1fr; } .edit-feature figure { min-height: 55vh; } .category-lines li { grid-template-columns: 3rem 1fr; } .category-lines p { grid-column: 2; } }
.article-header { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 9vw, 10rem) 4rem; }
.article-header h1 { max-width: 13ch; margin: 1rem 0 2.5rem; font: 500 clamp(4rem, 9vw, 9rem)/.82 var(--bebbil-font-display); letter-spacing: -.05em; }
.article-dek { max-width: 48rem; color: var(--bebbil-mineral); font: 400 clamp(1.4rem, 2.6vw, 2.3rem)/1.35 var(--bebbil-font-display); }
.article-meta { margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--bebbil-line); color: var(--bebbil-mineral); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.article-image { margin: 0; }
.article-image img { width: 100%; max-height: 80vh; object-fit: cover; }
.article-body { width: min(100% - 2rem, 48rem); margin: clamp(4rem, 9vw, 9rem) auto; font-size: 1.08rem; line-height: 1.85; }
.article-body > p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font: 500 5.8rem/.7 var(--bebbil-font-display); color: var(--bebbil-oxblood); }
.article-body h2 { margin: 5rem 0 1.5rem; font: 500 clamp(2.8rem, 5vw, 4.8rem)/.92 var(--bebbil-font-display); letter-spacing: -.03em; }
.article-body h3 { margin: 3rem 0 1rem; font: 500 2rem/1 var(--bebbil-font-display); }
.article-body blockquote { margin: 4rem -5vw; padding: 2.5rem 5vw; border-block: 1px solid var(--bebbil-line); font: italic 400 clamp(2rem, 4vw, 3.6rem)/1.08 var(--bebbil-font-display); color: var(--bebbil-oxblood); }
.article-check { margin: 2rem 0; padding: 0; list-style: none; counter-reset: check; }
.article-check li { padding: 1rem 0 1rem 3.5rem; position: relative; border-bottom: 1px solid var(--bebbil-line); }
.article-check li::before { counter-increment: check; content: "0" counter(check); position: absolute; left: 0; color: var(--bebbil-oxblood); font-size: .72rem; font-weight: 700; }
.sources { margin-top: 6rem; padding-top: 2rem; border-top: 2px solid var(--bebbil-ink); }
.sources h2 { margin-top: 0; font-size: 2.5rem; }
.sources ol { padding-left: 1.2rem; }
.sources li + li { margin-top: 1rem; }
.sources a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.disclosure { margin-top: 3rem; padding: 1.5rem; background: var(--bebbil-paper); color: var(--bebbil-mineral); font-size: .9rem; }
@media (max-width: 650px) { .article-body blockquote { margin-inline: 0; } }
.material-hero { padding: clamp(6rem, 13vw, 13rem) clamp(1.5rem, 8vw, 9rem); background: var(--bebbil-ink); color: var(--bebbil-ivory); }
.material-hero .eyebrow { color: #d9b7be; }
.material-hero h1 { max-width: 10ch; margin: 1rem 0 2rem; font: 500 clamp(4.5rem, 11vw, 11rem)/.76 var(--bebbil-font-display); letter-spacing: -.055em; }
.material-hero p:last-child { max-width: 43rem; color: #bdb6ad; font-size: 1.15rem; }
.material-method { padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 7vw, 8rem); display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }
.material-method h2 { margin: 0; font: 500 clamp(3rem, 6vw, 6rem)/.9 var(--bebbil-font-display); }
.material-lenses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bebbil-line); }
.material-lenses article { padding: 2rem; background: var(--bebbil-ivory); }
.material-lenses span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; }
.material-lenses h3 { margin: 3rem 0 .7rem; font: 500 2rem/1 var(--bebbil-font-display); }
.material-lenses p { color: var(--bebbil-mineral); }
.material-index-list { padding: 0 clamp(1.5rem, 7vw, 8rem) clamp(6rem, 12vw, 12rem); }
.material-index-list > h2 { margin: 0 0 3rem; font: 500 clamp(3rem, 6vw, 6rem)/.9 var(--bebbil-font-display); }
@media (max-width: 760px) { .material-method { grid-template-columns: 1fr; } .material-lenses { grid-template-columns: 1fr; } }
.wardrobe-hero { min-height: 80vh; padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 8vw, 9rem); display: flex; flex-direction: column; justify-content: end; background: var(--bebbil-oxblood); color: var(--bebbil-ivory); }
.wardrobe-hero .eyebrow { color: #dfbbc4; }
.wardrobe-hero h1 { max-width: 12ch; margin: 1rem 0 2rem; font: 500 clamp(4.5rem, 11vw, 11rem)/.76 var(--bebbil-font-display); letter-spacing: -.055em; }
.wardrobe-hero p:last-child { max-width: 42rem; color: #e6ced4; font-size: 1.15rem; }
.wardrobe-path { padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 7vw, 8rem); }
.wardrobe-path > h2 { max-width: 13ch; margin: 0 0 5rem; font: 500 clamp(3.5rem, 7vw, 7rem)/.87 var(--bebbil-font-display); }
.path-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bebbil-line); }
.path-grid article { min-height: 22rem; padding: 2rem; display: flex; flex-direction: column; background: var(--bebbil-ivory); }
.path-grid span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; }
.path-grid h3 { margin: auto 0 1rem; font: 500 2.2rem/1 var(--bebbil-font-display); }
.path-grid p { margin: 0; color: var(--bebbil-mineral); }
@media (max-width: 900px) { .path-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .path-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .wardrobe-hero h1 { font-size: 3.65rem; overflow-wrap: anywhere; } }
.occasion-hero { padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 8vw, 9rem); text-align: center; background: var(--bebbil-paper); }
.occasion-hero h1 { margin: 1rem auto 2rem; font: italic 400 clamp(5rem, 12vw, 12rem)/.75 var(--bebbil-font-display); letter-spacing: -.055em; color: var(--bebbil-oxblood); }
.occasion-hero p:last-child { max-width: 42rem; margin: auto; color: var(--bebbil-mineral); font-size: 1.15rem; }
.code-table { padding: 0 clamp(1.5rem, 7vw, 8rem) clamp(7rem, 14vw, 14rem); }
.code-table article { padding: 2rem 0; display: grid; grid-template-columns: .4fr .8fr 1.8fr; gap: 2rem; border-top: 1px solid var(--bebbil-line); }
.code-table article:last-child { border-bottom: 1px solid var(--bebbil-line); }
.code-table span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; }
.code-table h2 { margin: 0; font: 500 2.5rem/1 var(--bebbil-font-display); }
.code-table p { margin: 0; color: var(--bebbil-mineral); }
@media (max-width: 700px) { .code-table article { grid-template-columns: 3rem 1fr; } .code-table p { grid-column: 2; } }
.search-page { padding-block: clamp(6rem, 12vw, 12rem); }
.search-page h1 { margin: 0 0 3rem; font: 500 clamp(4rem, 10vw, 10rem)/.8 var(--bebbil-font-display); letter-spacing: -.055em; }
.search-form { max-width: 55rem; display: flex; border-bottom: 2px solid var(--bebbil-ink); }
.search-form input { width: 100%; padding: 1.2rem 0; border: 0; background: transparent; color: var(--bebbil-ink); font: 400 clamp(1.4rem, 3vw, 2.5rem)/1 var(--bebbil-font-display); }
.search-form input:focus { outline: none; }
.search-form button { border: 0; background: transparent; color: var(--bebbil-oxblood); cursor: pointer; font-weight: 700; }
.search-count { margin: 2rem 0; color: var(--bebbil-mineral); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.search-results { border-top: 1px solid var(--bebbil-line); }
.search-results article { padding: 2rem 0; display: grid; grid-template-columns: .5fr 1fr 1.5fr; gap: 2rem; border-bottom: 1px solid var(--bebbil-line); }
.search-results span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.search-results h2 { margin: 0; font: 500 2rem/1 var(--bebbil-font-display); }
.search-results h2 a { text-decoration: none; }
.search-results p { margin: 0; color: var(--bebbil-mineral); }
@media (max-width: 700px) { .search-results article { grid-template-columns: 1fr; gap: .5rem; } }
.tools-hero { padding: clamp(6rem, 13vw, 13rem) clamp(1.5rem, 8vw, 9rem); background: var(--bebbil-paper); }
.tools-hero h1 { margin: 1rem 0 2rem; font: 500 clamp(5rem, 12vw, 12rem)/.76 var(--bebbil-font-display); letter-spacing: -.06em; }
.tools-hero p:last-child { max-width: 42rem; color: var(--bebbil-mineral); font-size: 1.15rem; }
.tool-grid { padding: 0 clamp(1.5rem, 7vw, 8rem) clamp(7rem, 14vw, 14rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bebbil-line); }
.tool-card { min-height: 25rem; padding: clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; background: var(--bebbil-ivory); }
.tool-card span { color: var(--bebbil-oxblood); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.tool-card h2 { margin: auto 0 1rem; font: 500 clamp(2.8rem, 5vw, 5rem)/.9 var(--bebbil-font-display); }
.tool-card h2 a { text-decoration: none; }
.tool-card p { margin: 0; color: var(--bebbil-mineral); }
@media (max-width: 650px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-page { padding-block: clamp(5rem, 10vw, 10rem); }
.tool-page h1 { max-width: 12ch; margin: 1rem 0 2rem; font: 500 clamp(4rem, 9vw, 9rem)/.8 var(--bebbil-font-display); letter-spacing: -.05em; }
.tool-intro { max-width: 42rem; color: var(--bebbil-mineral); font-size: 1.1rem; }
.tool-layout { margin-top: 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
.tool-form { display: grid; gap: 1.5rem; }
.tool-output { min-height: 16rem; padding: 2rem; display: flex; align-items: end; background: var(--bebbil-ink); color: var(--bebbil-ivory); font: 500 clamp(2rem, 4vw, 4rem)/1 var(--bebbil-font-display); }
.tool-output[data-state="error"] { background: var(--bebbil-danger); }
.tool-output[data-state="success"] { background: var(--bebbil-oxblood); }
.privacy-caption { margin-top: 2rem; color: var(--bebbil-mineral); font-size: .85rem; }
@media (max-width: 700px) { .tool-layout { grid-template-columns: 1fr; } }
.print-tool { margin-top: 2rem; }
@media print { .site-header, .tool-form, .privacy-caption, .print-tool { display: none !important; } body { background: white; } .tool-page { padding: 1cm; } .tool-layout { display: block; margin-top: 2rem; } .planner-output, .tool-output { min-height: 0; border: 1px solid #222; background: white !important; color: #111 !important; } }
.field-notes { width: min(100% - 2rem, 58rem); margin: 0 auto; padding-block: 5rem; }
.field-notes > header h1 { margin: 1rem 0 2rem; font: 500 clamp(3.8rem, 9vw, 8rem)/.8 var(--bebbil-font-display); letter-spacing: -.05em; }
.field-notes-module { margin-top: 5rem; padding-top: 3rem; border-top: 2px solid var(--bebbil-ink); }
.field-notes-module h2 { margin: .5rem 0 1rem; font: 500 clamp(2.6rem, 5vw, 4.8rem)/.9 var(--bebbil-font-display); }
.field-notes-module fieldset { margin: 2rem 0 0; padding: 0; border: 0; display: grid; gap: 1.5rem; }
.field-notes-module legend { margin-bottom: 1rem; color: var(--bebbil-mineral); }
.field-notes-actions { position: sticky; bottom: 1rem; margin: 3rem 0; padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; background: rgb(246 241 232 / .95); border: 1px solid var(--bebbil-line); }
@media print { .field-notes-actions,.site-header { display:none!important; } .field-notes { width:auto; padding:0; } .field-notes-module { break-before:page; } textarea { min-height:4cm!important; } }
.edition-hero { padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 8vw, 9rem); display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:end; }
.edition-hero h1 { margin:1rem 0 2rem; font:500 clamp(4rem,9vw,9rem)/.8 var(--bebbil-font-display); letter-spacing:-.05em; }
.edition-hero-copy p:not(.eyebrow) { color:var(--bebbil-mineral); font-size:1.1rem; }
.edition-cover { aspect-ratio:3/4; padding:3rem; display:flex; flex-direction:column; justify-content:space-between; background:var(--bebbil-ink); color:var(--bebbil-ivory); box-shadow:var(--bebbil-shadow-soft); }
.edition-cover strong { font:500 clamp(3rem,6vw,6rem)/.85 var(--bebbil-font-display); }
.edition-cover span { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.edition-actions { margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem; }
.edition-details { padding:clamp(5rem,10vw,10rem) clamp(1.5rem,8vw,9rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bebbil-line); }
.edition-details article { padding:2rem; background:var(--bebbil-ivory); }
.edition-details h2 { font:500 2rem/1 var(--bebbil-font-display); }
@media(max-width:760px){.edition-hero{grid-template-columns:1fr}.edition-cover{order:-1}.edition-details{grid-template-columns:1fr}}
.planner-output { min-height: 20rem; padding: 2rem; background: var(--bebbil-paper); border: 1px solid var(--bebbil-line); }
.planner-output[data-state="error"] { border-color: var(--bebbil-danger); color: var(--bebbil-danger); }
.planner-output[data-state="success"] { border-color: var(--bebbil-oxblood); }
.planner-output h2 { margin: 0 0 1rem; font: 500 2.8rem/1 var(--bebbil-font-display); }
.planner-output ul { margin: 2rem 0 0; padding: 0; list-style: none; }
.planner-output li { padding: 1rem 0; border-top: 1px solid var(--bebbil-line); }