/* The source2 concept, translated to a responsive website. Client art direction wins over kit defaults. */
:root {
  --p-bg: #000000; --p-surface: #000000; --p-ink: #ffffff; --p-muted: #c7c7c7;
  --p-accent: #ffffff; --p-accent-ink: #000000; --p-action: #ffffff; --p-action-ink: #000000;
  --p-inv-bg: #000000; --p-inv-surface: #000000; --p-inv-ink: #ffffff; --p-inv-muted: #c7c7c7;
  --p-inv-action: #ffffff; --p-inv-action-ink: #000000;
  --font-display: "Courier New", Courier, monospace; --font-text: "Courier New", Courier, monospace;
  --display-weight: 400; --display-tracking: -.025em;
  --container: 1296px; --gut: 72px; --gutter: 48px;
  --nav: 140px; --padt: 172px; --padb: 60px; --hpadb: 60px; --hgap: 32px;
  --t-h1: clamp(42px, 5.3vw, 76px); --t-h2: clamp(34px, 5.3vw, 76px);
  --t-h3: clamp(20px, 2.2vw, 32px); --t-body: 18px; --t-lead: 22px;
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-btn: 0;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
}
html { background: #000; color-scheme: dark; scroll-behavior: auto; scroll-padding-top: 0; }
body { background: #000; color: #fff; font: 400 var(--t-body)/1.5 var(--font-text); }
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.wrap { width: min(calc(100% - 2 * var(--gut)), var(--container)); margin-inline: auto; }
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-weight: 400; line-height: 1.25; font-size: var(--t-h3); }
p { max-width: 62ch; }
p + p { margin-top: 24px; }
.label { font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
.link { min-height: 44px; align-items: center; display: inline-flex; padding-block: 10px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.link::after { content: "↗"; margin-left: 12px; }
main > section, footer.closing { height: 100svh; min-height: 720px; padding: var(--padt) 0 var(--padb); background: #000; }
main > section > .wrap { height: 100%; min-height: 0; }
main > section > .wrap > h2 { margin-bottom: 48px; }
/* One quiet two-row header, matching the concept; a real full-screen menu on every device. */
header.nav { height: var(--nav); background: #000; color: #fff; border: 0; z-index: 30; }
.nav .nav__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; height: 96px; }
.nav .nav__logo { grid-column: 2; grid-row: 1; width: min(340px, 32vw); padding: 0; margin: 0; }
.nav__logo img { width: 100%; height: auto; }
.nav .nav__toggle { grid-column: 1; grid-row: 1; display: flex; width: auto; height: 44px; min-width: 70px; padding: 0; gap: 10px; justify-self: start; align-items: center; border: 0; border-radius: 0; color: #fff; background: transparent; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.nav__toggle::after { content: "Menu"; }
.nav__toggle[aria-expanded="true"]::after { content: "Close"; }
.nav__toggle > span { display: none; }
.nav__toggle svg { width: 18px; height: 18px; }
.nav .nav__actions { display: flex; grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
.nav .nav__link { display: inline-flex; height: auto; min-height: 44px; align-items: center; padding: 8px 0; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.nav__actions .nav__link { font-weight: 700; }
.section-links { display: flex; gap: 48px; align-items: center; justify-content: center; height: 44px; }
.section-links .nav__link { font-size: 12px; white-space: nowrap; }
.nav .nav__links { display: none; margin: 0; border: 0; }
.nav.is-open .nav__links { display: flex; position: fixed; top: 96px; inset-inline: 0; bottom: 0; padding: 40px max(var(--gut), calc((100vw - var(--container)) / 2)) 48px; background: #000; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 4px; z-index: 31; }
.nav.is-open .nav__links .nav__item { flex: none; border: 0; }
.nav.is-open .nav__links .nav__link { font-size: clamp(22px, 2.8vw, 40px); min-height: 52px; line-height: 1.2; padding: 8px 0; text-transform: none; letter-spacing: -.025em; }
.menu-fragrances { display: flex; gap: 48px; margin-top: 20px; }
.nav.is-open .menu-fragrances .nav__link { font-size: 18px; letter-spacing: 0; }
.nav.is-open .section-links { visibility: hidden; }
.nav-locked { overflow: hidden; }
.skip-link { z-index: 50; background: #fff; color: #000; }
html:not(.js) .nav__toggle { visibility: hidden; }
/* The complete founder story is the first content, never a teaser before a product hero. */
.story > .wrap > .hero-text { height: 100%; display: flex; flex-direction: column; gap: 0; }
.story h1 { margin-bottom: 48px; }
.story-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; }
.story-columns p { font-size: clamp(16px, 1.39vw, 20px); line-height: 1.4; }
.story-signature { display: flex; justify-content: flex-end; margin-top: 16px; height: 60px; }
.story-signature img { width: 230px; height: 100%; object-fit: contain; }
.name-origin { margin-top: 8px; }
.name-equation { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1.2fr; gap: 32px; margin-top: 20px; align-items: start; }
.name-equation > div { display: grid; gap: 12px; }
.name-equation span { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; }
.name-equation small { font-size: 12px; font-weight: 700; letter-spacing: .025em; }
/* The fragrances: two actual objects, not a shop or a set of invented claims. */
.fragrances > .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.fragrances > .wrap.grid > * { grid-column: auto; }
.product-grid.grid > * { grid-column: auto; }
.fragrance-intro { padding-top: 16px; }
.fragrance-intro h2 { margin-top: 40px; font-size: clamp(48px, 5.6vw, 80px); }
.fragrance-intro > p:not(.label) { margin-top: 32px; font-size: 20px; max-width: 34ch; }
.fragrance-intro .link { margin-top: 40px; }
.fragrance-pair { height: 100%; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fragrance-pair a { overflow: hidden; display: block; }
.fragrance-pair img { width: 100%; height: min(520px, 58svh); object-fit: contain; }
/* Collection headings precede their photographs. */
.collection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.collection-item { min-width: 0; }
.collection-item h3 { font-size: clamp(26px, 3vw, 43px); margin-bottom: 32px; }
.collection-content { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
.collection-content > a { display: block; overflow: hidden; }
.collection-content img { width: 100%; height: min(446px, 49svh); object-fit: contain; }
.collection-copy { display: flex; flex-direction: column; justify-content: space-between; padding-block: 48px 16px; }
.collection-copy p { font-size: 20px; line-height: 1.8; }
/* Films stay idle and muted until the visitor chooses to play. No modal, no autoplay. */
.film { position: relative; min-width: 0; width: 100%; background: #000; overflow: hidden; }
.film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 0; }
.film > .film__play.btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; min-width: 132px; height: 48px; padding-inline: 16px; display: flex; gap: 10px; background: #000 !important; border: 1px solid #fff !important; color: #fff !important; font-size: 13px; font-weight: 700; white-space: nowrap; }
.film__play::after { content: none !important; }
.film.is-started .film__play { display: none; }
.film__error { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; font-size: 16px; background: #000; border: 1px solid #fff; text-align: center; }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; height: calc(100% - 134px); }
.craft-films { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; min-height: 0; }
.craft-films .film { height: 100%; }
.craft-copy { display: flex; flex-direction: column; justify-content: space-between; padding-block: 8px 24px; }
.craft-copy h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 24px; }
.craft-copy p { font-size: clamp(18px, 1.75vw, 25px); max-width: 34ch; line-height: 1.5; }
.base-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; height: calc(100% - 134px); align-items: center; }
.display-statement { font: 400 clamp(34px, 4vw, 58px)/1.2 var(--font-display); letter-spacing: -.025em; }
.base-copy > p:last-child { font-size: 20px; margin-top: 56px; max-width: 42ch; }
.base-media { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; height: min(440px, 49svh); }
.base-media > img { width: 100%; height: 100%; object-fit: contain; }
.discovery-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; height: calc(100% - 134px); align-items: center; }
.discovery-grid > div:first-child { display: flex; flex-direction: column; align-items: start; gap: 32px; }
.discovery-grid p:not(.display-statement) { font-size: 20px; max-width: 40ch; }
.discovery-grid .link { margin-top: 8px; }
.film--wide { height: 100%; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; height: calc(100% - 134px); }
.gallery-grid { grid-template-rows: minmax(0, 1fr); }
.gallery-grid > img { min-height: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-grid video { object-fit: contain; }
/* Individual fragrance pages. */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 7%; }
.product-copy { display: flex; flex-direction: column; align-items: start; justify-content: start; }
.breadcrumb { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.product-copy h1 { margin-top: 32px; font-size: clamp(54px, 7.5vw, 107px); max-width: 8ch; }
.product-category { font-size: 22px; margin-top: 40px; }
.product-summary { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.5; letter-spacing: -.015em; }
.product-copy .product-summary { margin-top: 32px; max-width: 25ch; }
.product-copy .link { margin-top: auto; margin-bottom: 16px; }
.product-picture { min-height: 0; }
.product-picture img { height: 100%; width: 100%; object-fit: contain; }
.composition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; height: calc(100% - 134px); align-items: center; }
.note-list { list-style: none; padding: 0; margin: 24px 0 0; }
.note-list li { padding: 10px 0; font-size: clamp(18px, 1.9vw, 27px); border-bottom: 1px solid #333; line-height: 1.3; }
.note-list--two { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.note-list--two li { padding-block: 18px; font-size: clamp(18px, 1.7vw, 25px); }
.composition-picture { width: 100%; height: min(468px, 52svh); }
.composition-picture img { width: 100%; height: 100%; object-fit: cover; }
.product-film-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; height: calc(100% - 134px); align-items: center; }
.film--landscape { aspect-ratio: 16/9; }
.product-film-grid .link { margin-top: 48px; }
/* The contact address is the main content, not fine print. */
footer.closing { border: 0; }
footer.closing > .wrap { display: grid; grid-template-rows: 1fr auto; gap: 48px; }
.contact-main > p { margin-top: 48px; font-size: 22px; }
.contact-email { display: block; min-height: 44px; width: fit-content; margin-top: 40px; margin-bottom: 40px; font-size: clamp(36px, 8.12vw, 117px); line-height: 1.2; letter-spacing: -.035em; text-decoration: none; font-weight: 400; }
.footer-base { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.footer-logo { display: flex; align-items: center; min-height: 44px; width: 260px; grid-column: 2; grid-row: 1; }
.footer-logo img { width: 100%; height: auto; }
.footer-links { grid-column: 1; grid-row: 1; display: flex; gap: 16px 24px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; }
.footer-links span { flex-basis: 100%; color: #c7c7c7; font-size: 12px; }
/* Utility pages use reading height, not a product-screen layout. */
main > .utility-page { height: auto; min-height: 100svh; }
.utility-page h1 { margin-bottom: 48px; }
.legal-copy { max-width: 760px; }
.legal-copy h2 { font-size: 25px; margin-block: 40px 16px; }
.legal-copy p { font-size: 18px; }
.utility-page > .wrap > .link { margin-top: 32px; }
@media (min-width: 900px) and (max-height: 800px) {
  :root { --padt: 156px; --padb: 40px; --t-h2: 56px; --t-h1: 56px; }
  .story h1 { margin-bottom: 32px; }
  .story-columns p { font-size: 17px; }
  .story-columns p + p { margin-top: 16px; }
  .story-signature { height: 44px; margin-top: 8px; }
  .name-equation { margin-top: 12px; }
  .name-equation span { font-size: 24px; }
  .name-equation > div { gap: 8px; }
  .fragrance-intro h2 { font-size: 58px; margin-top: 24px; }
  .fragrance-intro > p:not(.label), .fragrance-intro .link { margin-top: 24px; }
  main > section > .wrap > h2 { margin-bottom: 32px; }
  .craft-grid, .base-grid, .discovery-grid, .gallery-grid, .composition-grid, .product-film-grid { height: calc(100% - 96px); }
  .collection-item h3 { margin-bottom: 24px; }
  .collection-content img { height: min(360px, 46svh); }
  .collection-copy { padding-top: 24px; }
  .collection-copy p { font-size: 17px; }
  .craft-copy h3 { margin-bottom: 12px; }
  .product-copy h1 { margin-top: 16px; font-size: 80px; }
  .product-category, .product-copy .product-summary { margin-top: 24px; }
  .contact-main > p { margin-top: 32px; }
}
@media (max-width: 1100px) and (min-width: 900px) {
  :root { --gut: 48px; --gutter: 24px; }
  .section-links { gap: 32px; }
  .fragrances > .wrap, .discovery-grid, .product-film-grid { gap: 32px; }
  .collection-grid { gap: 40px; }
  .collection-content { grid-template-columns: 1.25fr 1fr; gap: 16px; }
  .collection-copy p { font-size: 17px; }
  .craft-films { gap: 24px; }
  .base-media { gap: 24px; }
}
@media (max-width: 899px) {
  :root { --gut: 40px; --nav: 84px; --padt: 116px; --padb: 48px; --t-body: 18px; --t-h1: 48px; --t-h2: 48px; }
  .nav .nav__bar { height: 84px; gap: 16px; }
  .nav .nav__logo { width: 260px; max-width: 36vw; }
  .section-links { display: none; }
  .nav.is-open .nav__links { top: 84px; padding-top: 24px; }
  main > section, footer.closing { height: 100svh; min-height: 760px; }
  main > section > .wrap > h2 { margin-bottom: 32px; }
  .story { height: auto; min-height: 100svh; }
  .story h1 { margin-bottom: 32px; }
  .story-columns { gap: 40px; }
  .story-columns p { font-size: 18px; line-height: 1.55; }
  .story-signature { margin-top: 24px; }
  .name-origin { margin-top: 32px; }
  .name-equation { gap: 20px; }
  .name-equation span { font-size: 22px; }
  .name-equation small { font-size: 11px; }
  .fragrances > .wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 32px; }
  .fragrance-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding-top: 0; }
  .fragrance-intro .label { grid-column: 1/-1; }
  .fragrance-intro h2 { grid-column: 1; grid-row: 2/4; margin-top: 24px; font-size: 48px; }
  .fragrance-intro > p:not(.label) { grid-column: 2; grid-row: 2; font-size: 18px; margin-top: 24px; }
  .fragrance-intro .link { grid-column: 2; grid-row: 3; margin-top: 16px; align-self: end; }
  .fragrance-pair { min-height: 0; gap: 40px; }
  .fragrance-pair img { height: 100%; max-height: 480px; }
  .collection-grid { gap: 40px; }
  .collection-content { grid-template-columns: 1fr; gap: 16px; }
  .collection-item h3 { font-size: 30px; margin-bottom: 24px; }
  .collection-content img { height: 370px; max-height: 36svh; }
  .collection-copy { padding: 0; gap: 24px; }
  .collection-copy p { font-size: 18px; line-height: 1.5; }
  .craft-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 32px; height: calc(100% - 86px); }
  .craft-copy { grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; }
  .craft-copy h3 { font-size: 12px; margin-bottom: 16px; }
  .craft-copy p { font-size: 17px; }
  .craft-films { grid-row: 2; gap: 32px; width: min(100%, 550px); justify-self: center; }
  .base-grid, .discovery-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 32px; height: calc(100% - 86px); }
  .base-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
  .display-statement { font-size: 40px; }
  .base-copy > p:last-child { margin: 0; font-size: 18px; }
  .base-media { height: 100%; width: min(100%, 600px); justify-self: center; gap: 32px; }
  .discovery-grid > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
  .discovery-grid .display-statement { grid-column: 1; grid-row: 1/3; }
  .discovery-grid p:not(.display-statement) { grid-column: 2; margin: 0; font-size: 18px; }
  .discovery-grid .link { grid-column: 2; margin: 0; }
  .film--wide { min-height: 0; }
  .gallery-grid { height: calc(100% - 86px); gap: 16px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .product-copy h1 { font-size: 64px; margin-top: 32px; }
  .product-category { font-size: 18px; margin-top: 32px; }
  .product-summary { font-size: 27px; }
  .composition-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 32px; height: calc(100% - 86px); }
  .note-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 0 24px; margin-top: 20px; }
  .note-list li, .note-list--two li { font-size: 20px; padding-block: 12px; }
  .composition-picture { height: 100%; }
  .product-film-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 32px; height: calc(100% - 86px); }
  .product-film-grid > div:last-child { display: flex; align-items: center; gap: 40px; }
  .product-film-grid .product-summary { flex: 1; }
  .product-film-grid .link { margin: 0; white-space: nowrap; }
  .film--landscape { height: 100%; max-height: 520px; }
  .contact-email { font-size: clamp(32px, 7.8vw, 70px); }
  .footer-base { grid-template-columns: 1fr; }
  .footer-logo { grid-column: 1; grid-row: 1; justify-self: end; }
  .footer-links { grid-column: 1; grid-row: 2; }
}
@media (max-width: 639px) {
  :root { --gut: 24px; --nav: 72px; --padt: 104px; --padb: 40px; --t-h1: 38px; --t-h2: 36px; --t-body: 16px; }
  .nav .nav__bar { height: 72px; gap: 8px; grid-template-columns: 58px 1fr 58px; }
  .nav .nav__logo { width: 100%; max-width: 196px; justify-self: center; }
  .nav .nav__toggle { min-width: 44px; width: 48px; height: 48px; gap: 6px; font-size: 11px; }
  .nav__toggle svg { display: none; }
  .nav .nav__actions .nav__link { font-size: 11px; letter-spacing: 0; }
  .nav.is-open .nav__links { top: 72px; padding-top: 16px; padding-bottom: 32px; gap: 0; }
  .nav.is-open .nav__links .nav__link { font-size: 25px; min-height: 52px; }
  .nav.is-open .menu-fragrances .nav__link { font-size: 16px; }
  .menu-fragrances { gap: 32px; margin-top: 16px; }
  main > section, footer.closing { min-height: 760px; height: auto; padding-top: var(--padt); padding-bottom: var(--padb); }
  main > section > .wrap, footer.closing > .wrap { height: auto; }
  main > section > .wrap > h2 { margin-bottom: 32px; }
  .story-columns { grid-template-columns: 1fr; gap: 24px; }
  .story-columns p { font-size: 16px; line-height: 1.65; }
  .story-signature { height: 56px; margin-top: 24px; }
  .story-signature img { width: 180px; }
  .name-origin { margin-top: 40px; }
  .name-origin .label { font-size: 11px; }
  .name-equation { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .name-equation > span { font-size: 22px; }
  .name-equation > div { grid-template-columns: 1fr; gap: 8px; }
  .name-equation > div > span { font-size: 26px; }
  .name-equation small { font-size: 11px; }
  .fragrances > .wrap { gap: 32px; }
  .fragrance-intro { display: block; }
  .fragrance-intro h2 { margin-top: 24px; font-size: 46px; }
  .fragrance-intro > p:not(.label) { font-size: 16px; margin-top: 24px; }
  .fragrance-intro .link { margin-top: 16px; }
  .fragrance-pair { gap: 24px; }
  .fragrance-pair img { height: 260px; }
  .collection-grid { gap: 20px; }
  .collection-item h3 { font-size: 23px; min-height: 58px; margin-bottom: 16px; }
  .collection-content img { height: 260px; max-height: none; }
  .collection-copy { gap: 24px; }
  .collection-copy p { font-size: 14px; line-height: 1.7; }
  .collection-copy .link { font-size: 12px; letter-spacing: 0; }
  .collection-copy .link::after { margin-left: 4px; }
  .craft-grid { height: auto; gap: 32px; }
  .craft-copy { grid-template-columns: 1fr; gap: 24px; }
  .craft-copy h3 { margin-bottom: 8px; font-size: 12px; }
  .craft-copy p { font-size: 16px; }
  .craft-films { gap: 20px; width: 100%; height: 330px; }
  .film__play { min-width: 112px; padding: 8px; gap: 6px; font-size: 12px; }
  .film__play svg { width: 14px; height: 14px; }
  .base-grid { height: auto; gap: 32px; }
  .base-copy { display: block; }
  .display-statement { font-size: 34px; }
  .base-copy > p:last-child { margin-top: 24px; font-size: 16px; }
  .base-media { gap: 20px; height: 320px; }
  .discovery-grid { height: auto; gap: 32px; }
  .discovery-grid > div:first-child { display: flex; gap: 24px; }
  .discovery-grid p:not(.display-statement) { font-size: 16px; }
  .film--wide { height: 340px; }
  .gallery { min-height: 0; }
  .gallery-grid { height: auto; grid-template-columns: 1fr; gap: 24px; }
  .gallery-grid > img { height: 420px; object-fit: contain; }
  .gallery-grid .film { height: 420px; }
  .product-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-copy h1 { font-size: 60px; margin-top: 24px; max-width: none; }
  .product-category { font-size: 18px; margin-top: 24px; }
  .product-copy .product-summary { font-size: 24px; margin-top: 24px; }
  .product-copy .link { margin-top: 24px; margin-bottom: 0; }
  .product-picture { height: 420px; }
  .composition-grid { height: auto; gap: 32px; }
  .composition-grid .label { font-size: 12px; }
  .note-list li, .note-list--two li { font-size: 16px; padding-block: 12px; }
  .composition-picture { height: 320px; }
  .product-film { min-height: 0; }
  .product-film-grid { height: auto; }
  .film--landscape { height: auto; aspect-ratio: 16/9; }
  .product-film-grid > div:last-child { display: block; }
  .product-film-grid .product-summary { font-size: 24px; }
  .product-film-grid .link { margin-top: 24px; }
  footer.closing { min-height: 100svh; }
  footer.closing > .wrap { gap: 64px; }
  .contact-main > p { font-size: 16px; margin-top: 32px; }
  .contact-email { font-size: clamp(28px, 7.6vw, 48px); margin-block: 32px; letter-spacing: -.045em; }
  .footer-base { gap: 24px; }
  .footer-logo { width: 220px; }
  .footer-links { gap: 8px 20px; font-size: 12px; }
  .legal-copy h2 { font-size: 23px; }
  .legal-copy p { font-size: 16px; }
}
@media (max-width: 359px) {
  :root { --gut: 20px; }
  .nav .nav__bar { grid-template-columns: 44px 1fr 52px; gap: 4px; }
  .nav .nav__logo { max-width: 156px; }
  .collection-grid { gap: 16px; }
  .collection-item h3 { font-size: 20px; }
  .collection-content img { height: 220px; }
  .collection-copy .link { font-size: 11px; }
  .collection-copy .link::after { content: none; }
  .film__play { min-width: 100px; }
  .product-copy h1 { font-size: 50px; }
  .note-list li, .note-list--two li { font-size: 14px; }
}
@media (scripting: none) {
  .nav .nav__toggle { visibility: hidden; }
  .section-links { display: flex; flex-wrap: wrap; height: auto; gap: 0 24px; padding-block: 8px; }
  header.nav { position: absolute; height: auto; }
  main > section:first-child { padding-top: 200px; }
}
@media print {
  header.nav { position: static; }
  .nav__toggle, .section-links, .film__play { display: none !important; }
  main > section, footer.closing { height: auto; min-height: 0; break-inside: avoid; padding-block: 40px; }
}