@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Manrope-normal-greek-400.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Manrope-normal-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/SourceSerif4-normal-greek.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/SourceSerif4-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #efeae2;
  --surface: #e4ddd2;
  --ink: #1c1915;
  --muted: #5e574e;
  --paper: #fbf8f3;
  --accent: #1c1915;
  --accent-ink: #fbf8f3;
  --display: "Source Serif 4", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gut: 24px;
  --step-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: var(--step-head); }
h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.1; }

.container { width: min(1120px, calc(100% - var(--gut) * 2)); margin: 0 auto; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; z-index: 100; border-radius: 999px; }
.skip:focus { top: 0.6rem; }

.label, .sec-no, .chapter-no, .step-no, .g-tag, .g-no, .crumbs span { display: none; }

.lede { font-size: var(--step-lead); line-height: 1.35; max-width: 38ch; }
.small { font-size: var(--step-small); }
.muted { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.4rem; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--bg);
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn-line, .btn-light, .btn-gold { background: var(--paper); color: var(--ink); }
.btn-line:hover, .btn-light:hover, .btn-gold:hover { background: var(--ink); color: var(--bg); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.link { font-weight: 700; text-underline-offset: 3px; }

.topline { background: var(--ink); color: var(--bg); }
.topline .container { padding: 0.85rem 0; }
.topline p { margin: 0; max-width: 78ch; }
.topline a { color: var(--bg); }
.topline-meta { display: none; }

.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--ink); color: var(--bg); }
.cookie-bar .container { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; padding: 1rem 0; }
.cookie-bar p { margin: 0; }
.cookie-actions { display: flex; gap: 0.6rem; flex: none; }
.cookie-bar a { color: var(--bg); }

.site-header { position: sticky; top: 0; z-index: 50; background: #f7f4ee; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding: 0 var(--gut);
}
.brand { justify-self: start; text-decoration: none; color: var(--ink); display: flex; align-items: center; }
.brand-logo { height: 40px; width: auto; }
.main-nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.main-nav a { text-decoration: none; font-weight: 700; padding: 0.4rem 0; }
.main-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); border-radius: 999px; padding: 0.35rem 0.85rem; }
.header-tools { justify-self: end; display: flex; align-items: center; gap: 0.9rem; }
.head-mail, .head-phone { font-weight: 700; text-decoration: none; font-size: var(--step-small); }
.cart-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--ink); color: var(--bg); text-decoration: none;
  border-radius: 999px; min-height: 44px; padding: 0 0.95rem; font-weight: 700;
}
.cart-link:hover { background: var(--paper); color: var(--ink); }
.cart-link [data-cart-count] { font-variant-numeric: tabular-nums; }
.burger { display: none; width: 44px; height: 44px; border-radius: 999px; background: var(--ink); position: relative; cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--bg); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.nav-drawer { display: none; background: var(--ink); color: var(--bg); padding: 0.4rem var(--gut) 1.4rem; }
.nav-drawer a { display: block; text-decoration: none; font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; padding: 0.35rem 0; color: var(--bg); }

@media (max-width: 900px) {
  .main-nav, .head-mail { display: none; }
  .burger { display: block; }
  .header-bar { grid-template-columns: 1fr auto; }
  .nav-toggle:checked ~ .nav-drawer { display: block; }
  .nav-toggle:checked ~ .header-bar .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .header-bar .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .header-bar .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 520px) {
  .head-phone { display: none; }
  .brand-logo { height: 32px; }
  .cart-word { display: none; }
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 4vw, 2.8rem) var(--gut) clamp(1.6rem, 4vw, 3rem);
}
.hero h1 { margin: 0 0 0.7rem; font-size: clamp(2.15rem, 3.1vw, 3.15rem); line-height: 1.02; }
.hero-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 560px; }
.hero-support, .hero-fact { margin: 0 0 0.55rem; max-width: 32ch; }
.hero-fact { font-weight: 700; }
.hero-copy .btn { margin-top: 0.7rem; }
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; }
  .hero-photo { max-height: none; order: -1; }
}

.compare { background: var(--paper); color: var(--ink); padding: 120px var(--gut); }
.compare h2 { margin-bottom: 48px; }
.cmp-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); }
.cmp-grid > div { min-height: 68px; padding: 0.85rem 0.9rem; font-size: 1.0625rem; display: flex; align-items: center; }
.cmp-grid > div:nth-child(4n+1) { font-weight: 700; padding-left: 0; }
.cmp-h { font-weight: 700; }
.feat { background: var(--ink); color: var(--bg); }
.feat-top { margin-top: -24px; padding-top: calc(0.85rem + 24px); }
.cmp-grid > div:nth-child(8n+5):not(.feat),
.cmp-grid > div:nth-child(8n+7):not(.feat),
.cmp-grid > div:nth-child(8n+8):not(.feat),
.cmp-grid > div:nth-child(8n+9):not(.feat) { background: #e7dfd4; }
@media (max-width: 800px) {
  .compare { padding: 72px var(--gut); }
  .cmp-grid { display: block; }
  .cmp-grid > div { min-height: 0; display: block; background: transparent; color: var(--ink); margin: 0; padding: 0.15rem 0; }
  .cmp-h { display: none; }
  .cmp-name { font-size: 1.25rem; margin-top: 1.4rem; }
  .feat { background: var(--ink); color: var(--bg); padding: 0.7rem 0.9rem; margin-top: 0.35rem; }
}

.shop { padding: 1.5rem var(--gut) 4.5rem; }
.shop-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: end; margin-bottom: 1.2rem; }
.shop-head h2 { margin: 0; }
.shop-lead { margin: 0.35rem 0 0; max-width: 36ch; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.shop-card { background: var(--paper); display: flex; flex-direction: column; }
.shop-photo { display: block; background: #f3efe8; }
.shop-photo img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.shop-copy { padding: 0.85rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.shop-copy h3 { margin: 0; font-size: 1.35rem; line-height: 1.1; }
.shop-copy h3 a { text-decoration: none; }
.shop-copy h3 a:hover { text-decoration: underline; }
.shop-price { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-copy .btn { margin-top: auto; align-self: flex-start; }
body:has(#day-lenses:checked) .shop-card:not([data-group="lenses"]),
body:has(#day-drops:checked) .shop-card:not([data-group="drops"]),
body:has(#day-masks:checked) .shop-card:not([data-group="masks"]) { display: none; }
@media (max-width: 900px) { .shop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr; } }

.menu-band { padding: 100px var(--gut) 120px; }
.day-switch { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 1.6rem; }
.day-switch input { position: absolute; opacity: 0; pointer-events: none; }
.day-switch label {
  min-height: 48px; padding: 0 1.1rem; border-radius: 999px;
  display: inline-flex; align-items: center; font-weight: 700; cursor: pointer; background: var(--ink); color: var(--bg);
}
.day-switch input:checked + label { background: var(--paper); color: var(--ink); }
.day-switch input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }
.menu-sheet {
  width: min(640px, 100%);
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  padding: 64px 48px 72px;
  text-align: center;
  clip-path: polygon(0% 14px, 5% 0, 10% 14px, 15% 0, 20% 14px, 25% 0, 30% 14px, 35% 0, 40% 14px, 45% 0, 50% 14px, 55% 0, 60% 14px, 65% 0, 70% 14px, 75% 0, 80% 14px, 85% 0, 90% 14px, 95% 0, 100% 14px, 100% calc(100% - 14px), 95% 100%, 90% calc(100% - 14px), 85% 100%, 80% calc(100% - 14px), 75% 100%, 70% calc(100% - 14px), 65% 100%, 60% calc(100% - 14px), 55% 100%, 50% calc(100% - 14px), 45% 100%, 40% calc(100% - 14px), 35% 100%, 30% calc(100% - 14px), 25% 100%, 20% calc(100% - 14px), 15% 100%, 10% calc(100% - 14px), 5% 100%, 0 calc(100% - 14px));
}
.menu-sheet h2 { font-size: clamp(2.2rem, 4vw, 3rem); }
.menu-note { margin: 0 0 2.2rem; }
.menu-group + .menu-group { margin-top: 56px; }
.menu-group h3 { font-family: var(--sans); font-size: 1.35rem; font-weight: 700; letter-spacing: 0; }
.menu-item { text-align: left; margin: 0 0 16px; }
.menu-line { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.menu-line a { font-weight: 700; text-decoration: none; }
.menu-line a:hover { text-decoration: underline; }
.menu-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-desc { margin: 0.15rem 0 0; color: var(--muted); max-width: 42ch; }
.menu-add {
  margin-top: 0.35rem; border: 0; background: var(--ink); color: var(--bg);
  border-radius: 999px; min-height: 40px; padding: 0 0.9rem; font-weight: 700; cursor: pointer;
}
.menu-add:hover, .menu-add.is-added { background: var(--bg); color: var(--ink); }
.menu-hours { margin: 2.4rem 0 0; }
body:has(#day-lenses:checked) .menu-group:not([data-group="lenses"]),
body:has(#day-drops:checked) .menu-group:not([data-group="drops"]),
body:has(#day-masks:checked) .menu-group:not([data-group="masks"]) { display: none; }
@media (max-width: 700px) {
  .menu-sheet { padding: 36px 22px 48px; }
  .menu-band { padding: 64px 10px 80px; }
}

.itinerary { background: var(--ink); color: var(--bg); padding: 120px var(--gut); display: grid; grid-template-columns: 1fr minmax(280px, 460px); gap: 3rem; align-items: start; }
.itinerary h2 { color: var(--bg); }
.itinerary .it-copy { max-width: 30ch; font-size: var(--step-lead); }
.slip {
  background: var(--paper); color: var(--ink); padding: 1.6rem 1.4rem 2.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 92% 100%, 84% calc(100% - 16px), 76% 100%, 68% calc(100% - 16px), 60% 100%, 52% calc(100% - 16px), 44% 100%, 36% calc(100% - 16px), 28% 100%, 20% calc(100% - 16px), 12% 100%, 4% calc(100% - 16px), 0 100%);
}
.slip h3 { font-family: var(--sans); font-size: 1.05rem; letter-spacing: 0; margin: 1.4rem 0 0.4rem; }
.slip h3:first-child { margin-top: 0; }
.slip-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.slip-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.slip-end { margin: 1.2rem -1.4rem -0.4rem; background: var(--ink); color: var(--bg); min-height: 44px; display: flex; align-items: center; padding: 0.6rem 1.4rem; font-weight: 700; }
@media (max-width: 800px) {
  .itinerary { grid-template-columns: 1fr; padding: 72px var(--gut); }
}

.story-cols { background: var(--paper); padding: 120px var(--gut); }
.story-cols p {
  columns: 2; column-gap: 32px; font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1.18;
  color: var(--muted); hyphens: auto; text-align: justify; margin: 0;
}
.story-cols .name { color: var(--ink); font-weight: 700; }
.hl { background: #e7dfd4; color: var(--ink); box-decoration-break: clone; padding: 0 0.1em; }
.hl-ink { background: var(--surface); }
.story-end { display: inline; background: var(--ink); color: var(--bg); box-decoration-break: clone; padding: 0.05em 0.15em; text-decoration: none; font-weight: 700; }
@media (max-width: 700px) {
  .story-cols { padding: 72px 18px; }
  .story-cols p { columns: 1; text-align: left; hyphens: manual; font-size: 1.25rem; line-height: 1.25; }
  .story-end { display: inline-block; margin-top: 24px; }
}

.drawer { background: var(--bg); padding: 100px var(--gut) 80px; }
.drawer h2 { width: min(100%, 720px); margin: 0 auto 1.5rem; }
.fcard { position: relative; margin: 56px auto 0; width: min(100%, 760px); padding: 1.2rem 1.4rem 1rem; }
.fcard:nth-child(3n+1) { background: var(--paper); }
.fcard:nth-child(3n+2) { background: var(--surface); }
.fcard:nth-child(3n) { background: var(--ink); color: var(--bg); }
.fcard summary { font-weight: 700; font-size: 1.25rem; cursor: pointer; list-style: none; }
.fcard summary::-webkit-details-marker { display: none; }
.fcard .tab {
  position: absolute; top: -40px; height: 40px; width: 200px;
  left: calc(var(--i) * 120px);
  display: flex; align-items: center; padding: 0 0.8rem; font-weight: 700;
  background: inherit; color: inherit;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.fcard:not([open]) .faq-a { display: none; }
.fcard .faq-a { max-width: 50ch; font-size: 1.0625rem; padding-bottom: 0.4rem; }
.fcard .faq-a p { margin: 0.6rem 0 0; }
@media (max-width: 700px) {
  .drawer { padding: 72px 16px; }
  .drawer h2 { font-size: 9vw; }
  .fcard .tab { width: 120px; left: calc(var(--i) * 48px); font-size: 0.95rem; }
  .fcard { margin-top: 48px; }
}

.reply { position: relative; min-height: 80svh; background: var(--ink); color: var(--bg); overflow: hidden; padding: 64px var(--gut) 0; }
.reply-note { max-width: 28ch; font-size: var(--step-lead); position: absolute; left: var(--gut); bottom: 64px; margin: 0; }
.reply-card {
  width: min(44vw, 520px); aspect-ratio: 7 / 5; background: var(--paper); color: var(--ink);
  margin-left: auto; padding: 48px; text-align: center;
  transform: rotate(2deg); position: relative; top: 60px;
  display: flex; flex-direction: column; justify-content: center; gap: 0.8rem;
}
.reply-card h2 { font-size: 2rem; }
.reply-card p { margin: 0; }
@media (max-width: 800px) {
  .reply { min-height: 0; padding: 48px var(--gut) 0; display: flex; flex-direction: column; }
  .reply-note { position: static; margin-bottom: 1.4rem; }
  .reply-card { width: 90%; margin: 0 auto; top: 24px; transform: rotate(1deg); aspect-ratio: auto; padding: 1.6rem; }
}

.site-footer {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 40px var(--gut) 28px;
}
.footer-top { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.footer-notes p { margin: 0 0 0.35rem; font-size: 1rem; max-width: 46ch; }
.footer-notes a { font-weight: 700; }
.to-top { font-weight: 700; text-decoration: none; }
.footer-display {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-decoration: none;
  max-width: 100%;
}
.footer-phone {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  letter-spacing: -0.03em;
  text-decoration: none;
  line-height: 1;
  margin: 0.4rem 0 1.2rem;
}
.footer-meta { display: grid; grid-template-columns: 1.2fr 1.4fr auto; gap: 1.5rem; align-items: start; font-size: var(--step-small); }
.footer-meta a { text-decoration: none; font-weight: 700; }
.footer-meta nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.footer-meta p { margin: 0; }
@media (max-width: 800px) {
  .site-footer { min-height: 0; padding-top: 32px; }
  .footer-display { margin-top: 2rem; font-size: 12vw; }
  .footer-top, .footer-meta { display: flex; flex-direction: column; }
}

.page-head { padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(1.6rem, 4vw, 2.6rem); background: transparent; color: var(--ink); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem 3rem; align-items: end; }
.page-head h1 { margin: 0; max-width: 14ch; }
.page-head .lede { margin: 0; }
.crumbs { margin: 0 0 0.8rem; font-weight: 700; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { display: none; }

.section { background: var(--paper); color: var(--ink); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section.dark { background: var(--ink); color: var(--bg); }
.section.dark h2, .section.dark h3, .section.dark a { color: var(--bg); }
.section.tint { background: #e7dfd4; }
.section:has(.index-list) { background: transparent; }
.sec-head { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem; margin-bottom: 2rem; align-items: end; }
.sec-body p:last-child { margin-bottom: 0; }

.chapter { display: grid; grid-template-columns: 0.85fr 1.15fr; background: var(--paper); margin-bottom: 1.5rem; }
.chapter.flip .chapter-media { order: 2; }
.chapter-media { margin: 0; }
.chapter-media img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.chapter-copy { padding: clamp(1.4rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
.chapter-copy .fine { background: var(--bg); padding: 0.9rem 1rem; }

.glossary { display: flex; flex-direction: column; }
.gloss { padding: 1.1rem 0; }
.gloss:nth-child(even) { background: #e7dfd4; padding-left: 1rem; padding-right: 1rem; }
.gloss h3 { margin-bottom: 0.25rem; }
.gloss p { margin: 0; }

.timeline { list-style: none; margin: 0 0 0 auto; padding: 1.5rem 1.4rem 2rem; max-width: 480px; background: var(--paper); color: var(--ink); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 92% 100%, 84% calc(100% - 16px), 76% 100%, 68% calc(100% - 16px), 60% 100%, 52% calc(100% - 16px), 44% 100%, 36% calc(100% - 16px), 28% 100%, 20% calc(100% - 16px), 12% 100%, 4% calc(100% - 16px), 0 100%); }
.timeline h3 { color: var(--ink); font-size: 1.35rem; }
.timeline p { margin: 0; }
.timeline li + li { margin-top: 1rem; }

.howto-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; }
.howto-grid li { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.howto-grid li:nth-child(even) img { order: 2; }
.howto-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.howto-grid p { margin: 0; }

.principles { list-style: none; margin: 0; padding: 0; }
.principles li { padding: 0.85rem 0; font-size: 1.2rem; }
.principles li span { display: none; }
.principles li:nth-child(odd) { background: #e7dfd4; padding-left: 1rem; padding-right: 1rem; }

.index-list { list-style: none; margin: 0; padding: 0; max-width: none; background: transparent; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.index-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; background: var(--paper); padding: 0.7rem 0.7rem 0.95rem; }
.index-thumb { width: 100%; height: auto; aspect-ratio: 1; background: #f3efe8; display: block; }
.index-thumb img { width: 100%; height: 100%; object-fit: contain; }
.index-line { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.index-line h3 { margin: 0; font-size: 1.25rem; flex: 1; }
.index-line h3 a { text-decoration: none; }
.dots { display: none; }
.index-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.index-meta, .index-format { margin: 0.15rem 0 0; }
.index-format { color: var(--muted); font-size: 1rem; }
.index-add { width: auto; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font-size: 1.15rem; cursor: pointer; align-self: flex-start; }
.index-add:hover, .index-add.is-added { background: var(--bg); color: var(--ink); }
.index-add.is-added { width: auto; padding: 0 0.8rem; }

.product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: start; }
.product-media { margin: 0; background: #f3efe8; }
.product-media img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.product-info { background: var(--paper); padding: clamp(1rem, 2vw, 1.6rem); }
.product-info h1 { font-size: clamp(2.1rem, 4vw, 3.5rem); max-width: 14ch; }
.tagline { font-size: var(--step-lead); margin-top: 0; }
.price-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; margin: 0.6rem 0 1rem; }
.price { font-family: var(--display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; }
.vat { color: var(--muted); }
.buy { display: grid; gap: 0.6rem; margin: 1rem 0; }
.perks { list-style: none; margin: 0; padding: 0; }
.perks svg { display: none; }
.perks li { margin: 0 0 0.7rem; }
.dossier { margin-top: 3rem; }
.dossier-row { display: grid; grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr); gap: 1.2rem; padding: 1.4rem 0; }
.dossier-row:nth-child(odd) { background: #e7dfd4; padding-left: 1rem; padding-right: 1rem; }
.dossier-row h2 { font-size: clamp(1.6rem, 2vw, 2.2rem); align-self: start; }
.callout { background: var(--bg); padding: 0.9rem 1rem; margin-top: 0.8rem; }
.callout p { margin: 0; }
.spec { width: 100%; border-collapse: collapse; }
.spec tr { display: grid; grid-template-columns: minmax(7rem, 0.4fr) 1fr; gap: 1rem; padding: 0.55rem 0; }
.spec th { text-align: left; font-weight: 700; }
.spec td { margin: 0; }
.spec, .spec th, .spec td { border: 0; background: transparent; }

.prose { max-width: 65ch; }
.prose h2 { margin-top: 1.6rem; }
.doc { display: grid; grid-template-columns: 14rem minmax(0, 65ch); gap: 2rem; }
.toc { position: sticky; top: 96px; align-self: start; }
.toc p { font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc a { text-decoration: none; font-weight: 700; }
.data-list { margin: 0; }
.data-list div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 0.75rem 0.4rem; }
.data-list div:nth-child(odd) { background: #e7dfd4; }
.data-list dt { font-weight: 700; }
.data-list dd { margin: 0; }

.story { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; align-items: start; }
.story img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.story figcaption { margin-top: 0.5rem; }
.milestones { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.2rem; }
.milestones div { background: #e7dfd4; padding: 0.9rem 1rem; }
.milestones div:nth-child(2) { background: var(--bg); }
.milestones strong { display: block; font-size: 1.2rem; }

.contact { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; }
.contact-panel { background: var(--ink); color: var(--bg); padding: 1.5rem; }
.contact-panel h2, .contact-panel a { color: var(--bg); }
.contact-panel .data-list div:nth-child(odd) { background: transparent; }
.contact-panel .data-list dt { color: var(--bg); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.field, .check { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 700; }
.field.full, .check.full, .actions.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  font-weight: 400; background: #e7dfd4; border: 0; border-radius: 999px;
  min-height: 52px; padding: 0.75rem 1rem; width: 100%;
}
.field textarea { border-radius: 1.4rem; min-height: 8rem; resize: vertical; }
.check { flex-direction: row; align-items: flex-start; font-weight: 400; gap: 0.7rem; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--ink); }
.field-error { color: var(--ink); background: var(--bg); padding: 0.4rem 0.7rem; margin: 0.4rem 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.cart-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: 1.5rem; align-items: start; }
.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.9rem 0; }
.cart-line img { width: 96px; height: 96px; object-fit: contain; background: #f3efe8; }
.cart-line h2 { font-size: 1.35rem; margin: 0; }
.unit { margin: 0.2rem 0; color: var(--muted); }
.controls { display: flex; gap: 0.6rem; align-items: center; }
.qty { display: inline-flex; align-items: center; gap: 0.35rem; }
.qty button, .remove {
  border: 0; background: var(--ink); color: var(--bg); border-radius: 999px; min-height: 40px; padding: 0 0.8rem; cursor: pointer; font-weight: 700;
}
.qty button:hover, .remove:hover { background: var(--bg); color: var(--ink); }
.line-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.summary { background: var(--bg); padding: 1.3rem; }
.summary h2 { font-size: 1.8rem; }
.sum-row, .sum-lines li { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.55rem; }
.sum-lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.sum-total { font-size: 1.25rem; font-weight: 700; }
.empty { padding: 1rem 0 2rem; }

.notice, .feature, .faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; align-items: start; }
.feature img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.faq + .faq { margin-top: 0.4rem; }
.faq summary { font-weight: 700; font-size: 1.25rem; cursor: pointer; padding: 0.7rem 0; }
.faq-a p { margin: 0 0 0.8rem; max-width: 62ch; }
.cta-band { display: none; }
.statement { background: var(--surface); padding: 100px var(--gut); text-align: center; }
.statement p { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; margin: 0 auto; }
.mark { display: none; }

.order-section { background: #e7dfd4; }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(5, 15, 22, 0.72); display: grid; place-items: center; padding: 1rem; }
.modal-box { background: var(--paper); color: var(--ink); padding: 2rem; width: min(100%, 36rem); }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.tile-strip, .wordmark { display: none; }

@media (max-width: 800px) {
  .page-head-grid, .sec-head, .chapter, .chapter.flip, .howto-grid li, .dossier-row, .doc, .story, .contact, .cart-layout, .notice, .feature, .faq-wrap, .form { grid-template-columns: 1fr; display: grid; }
  .chapter.flip .chapter-media { order: 0; }
  .howto-grid li:nth-child(even) img { order: 0; }
  .data-list div { grid-template-columns: 1fr; gap: 0.15rem; }
  .index-row { display: flex; }
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line h2 { font-size: 1.2rem; line-height: 1.05; }
  .line-total { grid-column: 2; }
  .index-add { grid-column: 2; width: auto; padding: 0 1rem; }
  .cookie-bar .container { flex-direction: column; align-items: stretch; }
  .product { grid-template-columns: 1fr; }
  .toc { position: static; }
}