@font-face {
  font-family: "Allumi Std Extended";
  src: local("Allumi Std Extended"), local("AllumiStdExtended-Regular"), local("AllumiStd-Extended");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Allumi Std Extended";
  src: local("Allumi Std Extended Italic"), local("AllumiStdExtended-Italic"), local("AllumiStd-ExtendedItalic");
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../assets/fonts/Barlow-MediumItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

:root {
  /* The supplied page is 944px wide. Scale its spacing and type together. */
  --u: clamp(.8px, .1059322vw, 1.65px);
  --gutter: calc(39 * var(--u));
  --paper: #f5f5f3;
  --ink: #171717;
  --muted: #626262;
  --line: #dfdfdc;
  --image: #dededb;
  color-scheme: light;
  font-family: "Allumi Std Extended", "Barlow", Arial, sans-serif;
  font-weight: 500;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body, h1, h2, h3, p, figure { margin: 0; }
body { min-width: 280px; font-size: calc(12 * var(--u)); line-height: 1.3; }
button, input { font: inherit; color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button { border: 0; padding: 0; background: none; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
a:hover, .footer-social button:hover, .footer-bottom button:hover { text-decoration: underline; text-underline-offset: 4px; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h2 { font-size: calc(28 * var(--u)); font-weight: 500; line-height: 1.08; text-transform: uppercase; }
h3 { font-size: inherit; font-weight: 500; }
::selection { background: #222; color: #fff; }
.section-pad { padding-inline: var(--gutter); }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: calc(19 * var(--u)); height: calc(19 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: calc(28 * var(--u)); height: calc(32 * var(--u)); }
.text-link { display: inline-flex; align-items: center; gap: calc(18 * var(--u)); white-space: nowrap; }
.text-link .icon { width: calc(20 * var(--u)); }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 50; top: 10px; left: 10px; padding: 12px 18px; color: #fff; background: #111; }

/* These intentionally empty surfaces reserve the reference's image sizes.
   Add images inside them later; no campaign or product photos are loaded. */
.image-slot { background: var(--image); overflow: hidden; }
.image-slot > img { width: 100%; height: 100%; object-fit: cover; }
.image-slot--dark { background: #363735; color: #f6f6f4; }

.site-header { height: calc(60 * var(--u)); min-height: 56px; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { justify-self: start; }
.brand img { width: calc(136 * var(--u)); height: auto; }
.site-nav { display: flex; align-items: center; gap: calc(25 * var(--u)); }
.header-actions { justify-self: end; display: flex; gap: calc(9 * var(--u)); align-items: center; }
.bag-button { position: relative; }
.bag-count { position: absolute; top: -2px; right: -4px; min-width: 15px; height: 15px; padding: 1px 3px; border-radius: 50%; background: #171717; color: white; font-size: 10px; text-align: center; }
.menu-toggle { display: none; }

.hero { position: relative; height: calc(340 * var(--u)); min-height: 272px; }
.hero__motto { position: absolute; top: calc(19 * var(--u)); right: var(--gutter); text-transform: uppercase; font-size: calc(12 * var(--u)); line-height: 1.25; }
.hero__statement { position: absolute; left: 46.3%; top: calc(34 * var(--u)); }
.hero h1 { font-size: calc(48 * var(--u)); line-height: .96; font-style: italic; font-weight: 500; text-transform: uppercase; letter-spacing: .005em; }
.hero h1 span { display: block; }
.hero__rule { width: calc(50 * var(--u)); height: 1px; margin-top: calc(16 * var(--u)); background: currentColor; }
.hero__description { margin-top: calc(11 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.22; color: #454545; }
.hero__collection { position: absolute; bottom: calc(25 * var(--u)); left: var(--gutter); text-transform: uppercase; }
.hero__collection p + p { margin-top: calc(6 * var(--u)); }
.hero__explore { position: absolute; right: var(--gutter); bottom: calc(18 * var(--u)); gap: calc(9 * var(--u)); text-transform: uppercase; }

.featured { padding-top: calc(22 * var(--u)); padding-bottom: calc(28 * var(--u)); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: calc(16 * var(--u)); }
.section-heading p { margin-top: calc(6 * var(--u)); color: var(--muted); font-size: calc(15 * var(--u)); }
.product-grid, .category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(13 * var(--u)); }
.product { min-width: 0; }
.product__image { aspect-ratio: 207 / 165; }
.product__details { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: calc(10 * var(--u)) calc(4 * var(--u)) 0; }
.product__details p { margin-top: calc(3 * var(--u)); }
.product__add { width: calc(20 * var(--u)); height: calc(23 * var(--u)); }
.product__add .icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.empty-state { padding-block: 30px; color: var(--muted); }

.collection-story { display: grid; grid-template-columns: 1fr 1fr; height: calc(288 * var(--u)); }
.collection-story__portrait { height: 100%; }
.collection-story__content { position: relative; padding: calc(18 * var(--u)) calc(36 * var(--u)); }
.collection-story__content > p { margin-top: calc(12 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.25; color: var(--muted); letter-spacing: .015em; }
.story-link { position: relative; z-index: 1; margin-top: calc(25 * var(--u)); }
.story-link span { border-bottom: 1px solid; padding-bottom: 2px; }
.collection-story__landscape { position: absolute; right: 0; bottom: 0; width: 59%; height: calc(144 * var(--u)); }

.categories { padding-top: calc(22 * var(--u)); padding-bottom: calc(23 * var(--u)); }
.categories .section-heading { margin-bottom: calc(12 * var(--u)); }
.category { position: relative; aspect-ratio: 207 / 139; }
.category > span { position: absolute; left: calc(21 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
.category .icon { display: block; height: calc(16 * var(--u)); margin-top: 1px; }
.category:hover { background: #d2d2cf; }

.journal { height: calc(154 * var(--u)); display: flex; justify-content: space-between; align-items: center; padding: calc(22 * var(--u)) calc(70 * var(--u)); }
.journal h2 { font-size: calc(28 * var(--u)); line-height: 1; }
.journal__quote img { width: calc(64 * var(--u)); height: auto; margin-top: calc(25 * var(--u)); filter: invert(1); }
.journal__note { padding-left: calc(22 * var(--u)); border-left: 1px solid #91918e; min-width: calc(112 * var(--u)); }
.journal__number { display: block; color: #b5b5af; margin-bottom: calc(12 * var(--u)); }
.journal__note p { text-transform: uppercase; font-size: calc(11 * var(--u)); }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; min-height: calc(84 * var(--u)); padding-block: calc(20 * var(--u)); }
.value { display: flex; justify-content: center; align-items: center; gap: calc(28 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); }
.value + .value { border-left: 1px solid #9e9e9b; }
.value__icon { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.value h3 { text-transform: uppercase; font-size: calc(11 * var(--u)); }
.value p { margin-top: calc(3 * var(--u)); font-size: calc(11 * var(--u)); color: #505050; }

.newsletter { margin-inline: var(--gutter); padding: calc(23 * var(--u)) calc(14 * var(--u)); border-block: 1px solid var(--line); display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(30 * var(--u)); align-items: center; }
.newsletter h2 { font-size: calc(23 * var(--u)); }
.newsletter > div > p { margin-top: calc(3 * var(--u)); color: var(--muted); }
.newsletter__form { position: relative; }
.newsletter__field { display: flex; height: calc(38 * var(--u)); min-height: 38px; border: 1px solid #cfcfcc; border-radius: 4px; overflow: hidden; }
.newsletter input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 0 calc(21 * var(--u)); font-size: calc(10 * var(--u)); }
.newsletter__field button { width: calc(52 * var(--u)); min-width: 46px; display: grid; place-items: center; background: #111; color: white; }
.newsletter__field:focus-within { outline: 2px solid #171717; outline-offset: 3px; }
.newsletter input:focus-visible { outline: none; }
.newsletter__status:not(:empty) { margin-top: 8px; line-height: 1.4; font-size: 12px; }

.site-footer { padding-top: calc(20 * var(--u)); padding-bottom: calc(24 * var(--u)); font-size: calc(10 * var(--u)); color: #535353; }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: calc(25 * var(--u)); }
.footer-brand img { width: calc(86 * var(--u)); height: auto; }
.footer-nav, .footer-social, .footer-bottom nav { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); }
.footer-main > p { white-space: nowrap; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: calc(28 * var(--u)); font-size: calc(9 * var(--u)); }

/* Small interactions stay local; orders, accounts and subscriptions have no backend. */
.shop-dialog { border: 1px solid var(--line); background: var(--paper); padding: 28px; width: min(480px, calc(100% - 32px)); max-height: 85dvh; color: var(--ink); font-size: 15px; }
.shop-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.shop-dialog__header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.shop-dialog h2 { font-size: 25px; }
.shop-dialog .icon-button { min-width: 36px; min-height: 36px; }
.shop-dialog__body input { border: 1px solid #bbb; padding: 12px; width: 100%; background: transparent; }
.dialog-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dialog-row button { text-decoration: underline; text-underline-offset: 3px; }
.dialog-note { margin-top: 20px; color: var(--muted); line-height: 1.5; }
.dialog-total { font-size: 18px; margin-top: 20px; }

@media (max-width: 700px) {
  :root { --gutter: 22px; }
  body { font-size: 14px; }
  h2 { font-size: 25px; }
  .site-header { height: auto; min-height: 66px; grid-template-columns: 1fr auto; padding-block: 14px; gap: 14px; }
  .brand img { width: 128px; }
  .header-actions { grid-column: 2; grid-row: 1; gap: 7px; }
  .icon-button { width: 30px; height: 32px; }
  .icon { width: 19px; height: 19px; }
  .site-nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; padding-block: 8px 4px; font-size: 14px; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .js .menu-toggle { display: inline-flex; }
  .hero { height: 430px; }
  .hero__motto { top: 19px; font-size: 11px; right: 22px; }
  .hero__statement { left: 25%; top: 72px; }
  .hero h1 { font-size: clamp(37px, 8.8vw, 54px); }
  .hero__description { font-size: 12px; line-height: 1.3; margin-top: 13px; }
  .hero__rule { width: 46px; margin-top: 18px; }
  .hero__collection { bottom: 52px; font-size: 11px; }
  .hero__explore { bottom: 17px; font-size: 11px; }
  .featured { padding-block: 28px; }
  .section-heading { gap: 12px; margin-bottom: 20px; }
  .section-heading p { font-size: 14px; }
  .section-heading .text-link { font-size: 12px; gap: 8px; }
  .product-grid, .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .product__image { aspect-ratio: 1 / 1; }
  .product__details { padding: 10px 0 0; font-size: 13px; }
  .product__details p { font-size: 12px; }
  .product__add { min-width: 28px; min-height: 28px; }
  .collection-story { height: auto; grid-template-columns: 1fr; }
  .collection-story__portrait { aspect-ratio: 472 / 288; }
  .collection-story__content { min-height: 320px; padding: 26px var(--gutter); }
  .collection-story__content > p { font-size: 15px; margin-top: 14px; }
  .story-link { margin-top: 24px; font-size: 13px; }
  .collection-story__landscape { width: 47%; height: 126px; }
  .categories { padding-block: 26px; }
  .category { aspect-ratio: 1.35; }
  .category > span { font-size: 14px; left: 15px; bottom: 12px; }
  .journal { height: 185px; padding: 25px var(--gutter); gap: 20px; }
  .journal h2 { font-size: clamp(19px, 4.8vw, 28px); }
  .journal__quote img { width: 65px; margin-top: 24px; }
  .journal__note { min-width: 94px; padding-left: 14px; }
  .journal__note p { font-size: 10px; }
  .values { grid-template-columns: 1fr; padding-block: 16px; }
  .value { justify-content: flex-start; gap: 24px; padding: 18px 12px; }
  .value + .value { border-left: 0; border-top: 1px solid var(--line); }
  .value__icon { width: 27px; height: 27px; }
  .value h3, .value p { font-size: 12px; }
  .newsletter { grid-template-columns: 1fr; padding: 26px 0; gap: 20px; }
  .newsletter h2 { font-size: 25px; }
  .newsletter > div > p { font-size: 13px; max-width: 310px; }
  .newsletter__field { height: 44px; }
  .newsletter input { font-size: 12px; padding-inline: 15px; }
  .site-footer { padding-block: 26px; font-size: 11px; }
  .footer-main { display: grid; grid-template-columns: 1fr; gap: 21px; }
  .footer-brand img { width: 95px; }
  .footer-nav, .footer-social { gap: 22px; }
  .footer-main > p { margin-top: 1px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 26px; font-size: 10px; }
}
@media (max-width: 360px) {
  :root { --gutter: 18px; }
  .brand img { width: 112px; }
  .header-actions { gap: 2px; }
  .account-button { display: none; }
  .hero__statement { left: 19%; }
  .section-heading h2 { font-size: 22px; }
  .product__details { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .header-actions, .newsletter__form, .product__add { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .image-slot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}