/* Lost Theory — one stylesheet for every page (2026-10-22).
   Apple product-page principles: system type, high-contrast ink, generous space, one idea per
   section, imagery that is never cropped mid-subject. Fresh palette from the apps themselves:
   ivory paper, meadow sage, morning sky, deep forest. */

:root {
  --ink: #1d1d1f; --ink-2: #5e5e63; --ink-3: #86868b; --line: #e3ddd0;
  --white: #ffffff; --ivory: #fbf8f1; --sage: #eef5ec; --sky: #edf4fa;
  --forest: #0f2219; --forest-2: #17321f;
  --green: #0066cc; --green-hover: #0077ed; --green-dark: #2997ff;
  --sacred: #a2650f; --nature: #2f6f5e;
  --radius: 28px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial,
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo", "PingFang SC", sans-serif;
  --serif: "New York", ui-serif, Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--white); font-size: 17px; line-height: 1.5;
       letter-spacing: -0.016em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; color: inherit; text-wrap: balance; letter-spacing: -0.012em; }
p { text-wrap: pretty; }
:lang(ja) :is(h1, h2, h3, h4, p) { word-break: auto-phrase; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 780px; margin: 0 auto; text-align: center; }
.chev { width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px; display: inline-block; }
.link { font-size: 17px; font-weight: 500; white-space: nowrap; }
.btn { display: inline-block; background: #0071e3; color: #fff; font-size: 17px; font-weight: 500; padding: 13px 26px; border-radius: 980px; }
.btn:hover { background: var(--green-hover); text-decoration: none; }
.h-xl { font-size: 84px; font-size: clamp(44px, 7vw, 84px); line-height: 1.04; letter-spacing: -0.022em; }
.h-l  { font-size: 56px; font-size: clamp(34px, 5vw, 56px); line-height: 1.07; letter-spacing: -0.018em; }
.lead { font-size: 23px; font-size: clamp(19px, 2vw, 23px); line-height: 1.42; color: var(--ink-2); letter-spacing: -0.005em; margin-top: 18px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sacred); }
.series { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.series.sacred { color: var(--sacred); }
.series.nature { color: var(--nature); }
.sr-only { position: absolute; left: -9999px; }

/* ---------- nav (every page) ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: 68px; background: rgba(251, 248, 241, .82);
       -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid rgba(60, 45, 20, .08); }
.nav .wrap { height: 68px; display: flex; align-items: center; grid-gap: 26px; gap: 26px; }
.brand { display: flex; align-items: center; grid-gap: 11px; gap: 11px; color: var(--ink); font-weight: 650; font-size: 20px; margin-right: auto; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.nav-links { display: flex; grid-gap: 26px; gap: 26px; }
.nav-links a { color: var(--ink); font-size: 15px; opacity: .82; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; text-decoration: none; }
.nav-cta { background: var(--ink); color: #fff !important; font-size: 15px; font-weight: 500; padding: 9px 18px; border-radius: 980px; }
.nav-cta:hover { text-decoration: none; background: #3a3a3c; }
.lang { position: relative; }
.lang-toggle { display: flex; align-items: center; grid-gap: 5px; gap: 5px; background: none; border: 0; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; padding: 8px 2px; }
.lang-toggle svg { width: 18px; height: 18px; }
.lang-dropdown { display: none; position: absolute; right: 0; top: 48px; background: #fff; border-radius: 14px; padding: 6px;
                 box-shadow: 0 14px 44px rgba(30, 20, 5, .18); min-width: 172px; }
.lang.open .lang-dropdown { display: block; }
.lang-option { display: flex; grid-gap: 10px; gap: 10px; width: 100%; background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink);
               padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.lang-option:hover, .lang-option.active { background: var(--ivory); }
.lang-code { color: var(--ink-3); width: 22px; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 6px auto; }
.menu { display: none; position: fixed; top: 68px; right: 0; bottom: 0; left: 0; inset: 68px 0 0; background: rgba(251, 248, 241, .98); z-index: 49; padding: 28px 32px; }
.menu.open { display: block; }
.menu a { display: block; font-size: 28px; font-weight: 650; color: var(--ink); padding: 10px 0; }
@media (max-width: 860px) {
  .nav-links, .nav .nav-cta { display: none; }
  .burger { display: block; }
}

/* ---------- footer (every page) ---------- */
.site-footer { background: var(--ivory); border-top: 1px solid var(--line); padding: 34px 0 44px; font-size: 12.5px; color: var(--ink-2); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; gap: 20px; flex-wrap: wrap; }
.site-footer ul { display: flex; grid-gap: 22px; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-2); }

/* ---------- homepage ---------- */
section.band { padding: 116px 0; }
.bg-white { background: var(--white); } .bg-ivory { background: var(--ivory); } .bg-sage { background: var(--sage); } .bg-sky { background: var(--sky); }

.hero { background: linear-gradient(180deg, var(--ivory) 0%, #fff 100%); padding: 92px 0 96px; text-align: center; }
.hero .lead { max-width: 720px; margin-left: auto; margin-right: auto; }
.ctas { display: flex; grid-gap: 28px; gap: 28px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.stage { position: relative; max-width: 1180px; margin: 64px auto 0; padding: 0 28px; }
.scene { position: relative; aspect-ratio: 21 / 9; border-radius: 34px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(40, 25, 5, .45); }
.scene img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.scene img.on { opacity: 1; }
.scene-label { position: absolute; left: 22px; top: 18px; z-index: 2; font-size: 13px; font-weight: 600; color: #fff;
               background: rgba(20, 15, 5, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 980px; }
.phones-row { display: flex; justify-content: center; align-items: flex-end; grid-gap: 26px; gap: 26px; margin-top: -92px; position: relative; z-index: 3; }
.phones-row .phone { width: 220px; }
.phones-row .phone:nth-child(2), .phones-row .phone:nth-child(3) { width: 246px; }
.lineup { display: flex; justify-content: center; grid-gap: 30px; gap: 30px; margin: 56px auto 0; flex-wrap: wrap; }
.lineup li { width: 104px; display: flex; flex-direction: column; align-items: center; grid-gap: 10px; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.25; }
.lineup img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 6px 16px rgba(40, 25, 5, .16); }
.lineup .soon img { opacity: .6; }
.lineup em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: -6px; }

/* phone frame: always the whole phone */
.phone { background: #1d1d1f; border-radius: 42px; padding: 8px; box-shadow: 0 28px 54px -22px rgba(30, 20, 5, .45); }
.phone img { border-radius: 34px; width: 100%; height: auto; }
.watch { background: #1d1d1f; border-radius: 56px; padding: 14px; box-shadow: 0 0 0 2px #3a3a3c, 0 30px 60px -24px rgba(0, 0, 0, .6); }
.watch img { border-radius: 42px; width: 100%; }

/* app tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 26px; gap: 26px; margin-top: 64px; }
.tile { background: #fff; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
        box-shadow: 0 1px 2px rgba(30, 20, 5, .06), 0 18px 44px -24px rgba(30, 20, 5, .25); }
.tile-art { aspect-ratio: 16 / 8; overflow: hidden; position: relative; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding: 0 36px 36px; display: flex; flex-direction: column; flex: 1; }
.tile-icon { width: 76px; height: 76px; border-radius: 18px; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(30, 20, 5, .2); margin-top: -38px; position: relative; }
.tile-name { font-size: 30px; line-height: 1.12; margin-top: 4px; }
.tile .series { margin-top: 18px; }
.tile-tag { font-size: 19px; line-height: 1.42; color: var(--ink-2); margin-top: 10px; }
.facts { display: flex; grid-gap: 34px; gap: 34px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.fact-n { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.fact-l { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.tile-actions { display: flex; align-items: center; grid-gap: 24px; gap: 24px; margin-top: auto; padding-top: 28px; flex-wrap: wrap; }
.badge img { height: 44px; width: auto; }
.tile.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.tile.wide .tile-art { aspect-ratio: auto; min-height: 320px; }
.tile.wide .tile-body { padding: 40px 44px; justify-content: center; }
.tile.wide .tile-icon { margin-top: 0; }
.tile.wide .tile-actions { margin-top: 0; padding-top: 22px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--sacred); background: #f8ecd6; border-radius: 980px; padding: 4px 10px; margin-left: 8px; letter-spacing: 0; text-transform: none; vertical-align: 1px; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 28px; gap: 28px; margin-top: 64px; }
.step { background: #fff; border-radius: 24px; padding: 34px 32px; }
.step-n { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 650; font-size: 18px;
          display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.step h3 { font-size: 21px; line-height: 1.24; }
.step p { color: var(--ink-2); margin-top: 10px; }

/* split sections */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 72px; gap: 72px; align-items: center; }
.media-2 { display: flex; justify-content: center; align-items: flex-start; grid-gap: 24px; gap: 24px; }
.media-2 .phone { width: 250px; }
.media-2 .phone + .phone { margin-top: 64px; }
.checks { margin-top: 30px; display: grid; grid-gap: 14px; gap: 14px; }
.checks li { display: flex; grid-gap: 12px; gap: 12px; font-size: 19px; line-height: 1.38; }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.guides { margin-top: 32px; display: flex; grid-gap: 28px; gap: 28px; flex-wrap: wrap; }
.guides div { font-size: 14px; color: var(--ink-2); }
.guides strong { display: block; font-size: 19px; color: var(--ink); }

/* collections */
.phones4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 30px; gap: 30px; margin-top: 64px; }
.phone-fig figcaption { margin-top: 20px; text-align: center; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.phone-fig figcaption strong { display: block; font-size: 19px; color: var(--ink); margin-bottom: 2px; }
.patch-row { display: flex; justify-content: center; grid-gap: 18px; gap: 18px; margin-top: 76px; flex-wrap: wrap; }
.patch-row img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(30, 20, 5, .14)); }
.patch-note { text-align: center; color: var(--ink-2); margin-top: 22px; font-size: 19px; }

/* watch */
.dark { background: radial-gradient(120% 90% at 50% 0%, #22252b 0%, #0b0c0e 62%); color: #f5f5f7; }
.dark .lead { color: #a1a1a6; }
.dark a { color: var(--green-dark); }
.watches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 34px; gap: 34px; max-width: 980px; margin: 64px auto 0; }
.watches figcaption { text-align: center; margin-top: 20px; font-size: 14px; color: #a1a1a6; line-height: 1.4; }
.watches figcaption strong { display: block; color: #f5f5f7; font-size: 17px; margin-bottom: 3px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 40px; gap: 40px; margin-top: 72px; text-align: center; }
.trio h3 { font-size: 21px; line-height: 1.2; }
.trio p { color: #b9c2b9; margin-top: 8px; }

/* cast */
.cast { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-gap: 30px 20px; gap: 30px 20px; margin-top: 64px; }
.cast li { text-align: center; font-size: 14px; color: var(--ink-2); }
.ava { width: 118px; height: 118px; margin: 0 auto 12px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line);
       display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ava img { width: 96px; height: 96px; object-fit: contain; }

/* price */
.price { font-size: 112px; font-size: clamp(64px, 10vw, 112px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 36px; }
.price small { display: block; font-size: 19px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-top: 12px; }
.nopes { display: flex; justify-content: center; grid-gap: 34px; gap: 34px; margin-top: 34px; flex-wrap: wrap; font-size: 17px; font-weight: 500; }
.nopes span::before { content: "✕"; color: var(--ink-3); margin-right: 8px; font-size: 13px; }
.includes { max-width: 660px; margin: 38px auto 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px 34px; gap: 12px 34px; text-align: left; }
.includes li { color: var(--ink-2); font-size: 15px; padding-left: 18px; position: relative; }
.includes li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

/* faq */
.faq-list { max-width: 820px; margin: 56px auto 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; gap: 20px; background: none; border: 0;
                font: inherit; font-size: 20px; font-weight: 600; color: var(--ink); text-align: left; padding: 24px 0; cursor: pointer; letter-spacing: -0.01em; }
.faq-icon svg { width: 20px; height: 20px; color: var(--ink-2); transition: transform .25s; }
.faq-item.open .faq-icon svg { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 40px 26px 0; color: var(--ink-2); }
.faq-item.open .faq-answer { display: block; }

/* notes / blog cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 26px; gap: 26px; margin-top: 56px; }
.card { background: #fff; border-radius: 24px; overflow: hidden; color: var(--ink); display: flex; flex-direction: column;
        box-shadow: 0 1px 2px rgba(30, 20, 5, .06), 0 14px 36px -22px rgba(30, 20, 5, .25); transition: transform .3s, box-shadow .3s; }
.card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 1px 2px rgba(30, 20, 5, .06), 0 24px 48px -22px rgba(30, 20, 5, .32); }
.card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivory); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 24px 26px 28px; }
.card-date { font-size: 13px; color: var(--ink-3); }
.card h3 { font-size: 21px; line-height: 1.24; margin-top: 6px; }
.card p { color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.more { text-align: center; margin-top: 40px; }

/* notify over landscape */
.notify-band { position: relative; padding: 140px 0; overflow: hidden; }
.notify-band > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.notify-card { position: relative; max-width: 640px; margin: 0 auto; text-align: center; background: rgba(255, 255, 255, .86);
               -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
               border-radius: 32px; padding: 52px 44px; box-shadow: 0 30px 80px -30px rgba(30, 20, 5, .5); }
.notify-card .h-l { font-size: 44px; font-size: clamp(30px, 4vw, 44px); }
.notify-form { display: flex; grid-gap: 10px; gap: 10px; max-width: 470px; margin: 30px auto 0; }
.notify-input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 13px 18px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.notify-input:focus { outline: 3px solid rgba(0, 113, 227, .25); border-color: var(--green); }
.notify-btn { font: inherit; font-size: 17px; font-weight: 500; padding: 13px 22px; border-radius: 14px; border: 0; background: #0071e3; color: #fff; cursor: pointer; }
.notify-btn:hover { background: var(--green-hover); }
.notify-btn:disabled { opacity: .6; }
.notify-label { display: block; color: var(--ink-3); font-size: 13px; margin-top: 14px; }
.notify-success { font-size: 19px; margin-top: 26px; }
.form-error { color: #c4001a; font-size: 14px; margin-top: 10px; width: 100%; }

/* reveal: only with JS, never with reduced motion */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scene img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- inner pages: blog index, posts, legal ---------- */
.page-hero, .article-hero, .legal-hero { background: linear-gradient(180deg, var(--ivory), #fff); padding: 88px 0 56px; text-align: center; }
.page-hero .container, .article-hero .container, .legal-hero .container { max-width: 820px; margin: 0 auto; padding: 0 28px; }
.page-hero h1, .legal-hero h1 { font-size: 64px; font-size: clamp(40px, 6vw, 64px); line-height: 1.06; letter-spacing: -0.022em; }
.article-hero h1 { font-size: 58px; font-size: clamp(36px, 5.4vw, 58px); line-height: 1.08; letter-spacing: -0.022em; margin-top: 14px; }
.page-hero .subtitle { font-size: 21px; color: var(--ink-2); margin-top: 16px; line-height: 1.42; }
.article-hero .meta, .effective-date { display: inline-flex; grid-gap: 10px; gap: 10px; align-items: center; justify-content: center; font-size: 15px; color: var(--ink-3); margin-top: 16px; }
.article-hero .meta .dot, .post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.article-hero .eyebrow, .page-hero .eyebrow { background: none; padding: 0; }
.back-link { display: none; }
.hero-art { max-width: 1120px; margin: 8px auto 0; padding: 0 28px; }
.hero-art img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 30px; box-shadow: 0 30px 70px -32px rgba(40, 25, 5, .45); }

/* blog index */
.posts { padding: 24px 0 110px; }
.posts .container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 26px; gap: 26px; }
.post-card { background: #fff; border-radius: 24px; overflow: hidden; color: var(--ink); display: flex; flex-direction: column;
             box-shadow: 0 1px 2px rgba(30, 20, 5, .06), 0 14px 36px -22px rgba(30, 20, 5, .25); transition: transform .3s, box-shadow .3s; }
.post-card:hover { text-decoration: none; transform: translateY(-4px); }
.post-card .post-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivory); }
.post-card .post-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-text { padding: 22px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.post-card:first-child .post-img { aspect-ratio: auto; min-height: 340px; }
.post-card:first-child .post-text { padding: 40px 44px; justify-content: center; }
.post-card:first-child h2 { font-size: 34px; }
.post-meta { display: flex; grid-gap: 10px; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-3); }
.post-card h2 { font-size: 22px; line-height: 1.22; margin-top: 8px; }
.post-card .excerpt { color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.post-card .read-more { color: var(--green); font-weight: 500; font-size: 15px; margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; grid-gap: 6px; gap: 6px; }
.post-card .read-more svg { width: 13px; height: 13px; }

/* article body */
.article { padding: 56px 0 110px; }
.article-body { max-width: 692px; margin: 0 auto; padding: 0 28px; font-size: 19px; line-height: 1.62; }
.article-body > * + * { margin-top: 1.1em; }
.article-body p { color: #2c2c2e; }
.article-body h2 { font-size: 32px; line-height: 1.18; margin-top: 2em; }
.article-body h3 { font-size: 24px; line-height: 1.25; margin-top: 1.6em; }
.article-body h4 { font-size: 20px; line-height: 1.3; }
.article-body ul, .article-body ol { padding-left: 1.2em; list-style: disc; }
.article-body li + li { margin-top: .4em; }
.article-body strong { color: var(--ink); }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.lede { font-size: 23px; line-height: 1.5; color: var(--ink) !important; }
.salutation { display: block; font-family: var(--serif); font-style: italic; color: var(--sacred); font-size: 21px; margin-bottom: 8px; }
.article-body blockquote { font-family: var(--serif); font-size: 26px; line-height: 1.4; color: var(--ink); border-left: 3px solid var(--sacred);
                           padding: 6px 0 6px 26px; margin: 2em 0; }
.article-body blockquote cite { display: block; font-family: var(--font); font-style: normal; font-size: 14px; color: var(--ink-3); margin-top: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 14px; gap: 14px; background: var(--ivory); border-radius: 22px; padding: 26px 20px; margin: 2.2em 0 !important; text-align: center; }
.stat-row .n { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.stat-row .l { font-size: 12.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.region, .correction, .finding, .day-card, .notebook, .highlight-box { background: var(--ivory); border-radius: 22px; padding: 26px 28px; }
.region > * + *, .correction > * + *, .finding > * + *, .day-card > * + *, .notebook > * + * { margin-top: .6em; }
.region-tag, .temple-tag, .finding-label, .day-label, .nb-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sacred); }
.region h4, .correction h4, .finding h4, .notebook h4 { font-size: 22px; }
.region p, .correction p, .finding p, .day-card p, .notebook p { font-size: 17px; }
.region-species { font-size: 14px !important; color: var(--ink-2) !important; border-top: 1px solid var(--line); padding-top: 12px; }
.correction .wrong { color: var(--ink-2); border-left: 3px solid #e2a3a3; padding-left: 14px; }
.correction .right { border-left: 3px solid #7a9b84; padding-left: 14px; }
.day-route { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.source { display: block; font-size: 14px; color: var(--ink-3); }
.nb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 12px; gap: 12px; margin-top: 18px !important; }
.nb-fact { background: #fff; border-radius: 16px; padding: 14px 16px; }
.nb-fact-value { display: block; font-size: 24px; font-weight: 700; }
.nb-fact-label { display: block; font-size: 13px; color: var(--ink-2); }
.article-figure { margin: 2.2em 0 !important; }
.article-figure img, .article-figure video { width: 100%; border-radius: 22px; box-shadow: 0 20px 50px -26px rgba(40, 25, 5, .45); }
.article-figure.phone { max-width: 300px; margin-left: auto !important; margin-right: auto !important; background: none; padding: 0; box-shadow: none; }
.article-figure.phone img, .article-figure.phone video { border-radius: 34px; border: 8px solid #1d1d1f; box-shadow: 0 24px 50px -22px rgba(30, 20, 5, .45); }
.article-figure figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); text-align: center; }
.signoff { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-2) !important; margin-top: 2.4em !important; }
.signoff .from { display: block; font-family: var(--font); font-style: normal; font-weight: 650; color: var(--ink); margin-top: 8px; }
.attribution, .jp { color: var(--ink-3); }
.cta-card { background: linear-gradient(135deg, #2c2c2e, #111113); color: #f5f5f7; border-radius: 28px; padding: 44px 40px; text-align: center; margin-top: 3em !important; }
.cta-card h3 { font-size: 28px; margin: 0; }
.cta-card p { color: #c7c7cc !important; font-size: 17px; margin-top: 10px; }
.cta-card .cta-button { display: inline-block; margin-top: 22px; background: #fff; color: var(--ink); font-weight: 600; font-size: 17px; padding: 12px 26px; border-radius: 980px; }
.cta-card .cta-button:hover { text-decoration: none; background: #f2f2f4; }

/* legal pages */
.policy-content, .legal-body { padding: 24px 0 110px; }
.policy-card, .legal-card { max-width: 760px; margin: 0 auto; padding: 0 28px; font-size: 17px; line-height: 1.62; }
.policy-card > * + *, .legal-card > * + * { margin-top: 1em; }
.policy-card h2, .legal-card h2 { font-size: 26px; line-height: 1.2; margin-top: 2em; }
.policy-card h3, .legal-card h3 { font-size: 20px; margin-top: 1.6em; }
.policy-card p, .policy-card li, .legal-card p, .legal-card li { color: #2c2c2e; }
.policy-card ul, .legal-card ul { padding-left: 1.2em; list-style: disc; }
.policy-card li + li, .legal-card li + li { margin-top: .4em; }
.section-number { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--ivory); color: var(--ink); border: 1px solid var(--line); font-size: 14px;
                  align-items: center; justify-content: center; margin-right: 10px; vertical-align: 3px; }
.section-divider { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.highlight-box { margin: 1.4em 0 !important; border-left: 3px solid var(--sacred); }
.highlight-box p { color: var(--ink) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1068px) {
  section.band { padding: 92px 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-left: auto; margin-right: auto; }
  .tile.wide { grid-template-columns: minmax(0, 1fr); }
  .tile.wide .tile-art { min-height: 0; aspect-ratio: 16 / 8; }
  .tile.wide .tile-icon { margin-top: -38px; }
  .tile.wide .tile-body { padding: 0 36px 36px; }
  .phones4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; margin-left: auto; margin-right: auto; grid-gap: 44px 28px; gap: 44px 28px; }
  .split { grid-template-columns: minmax(0, 1fr); grid-gap: 56px; gap: 56px; text-align: center; }
  .checks { max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }
  .guides { justify-content: center; }
  .cast { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards, .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card:first-child { grid-template-columns: minmax(0, 1fr); }
  .post-card:first-child .post-img { min-height: 0; aspect-ratio: 16 / 9; }
  .post-card:first-child .post-text { padding: 26px 30px 32px; }
  .phones-row .phone:nth-child(1), .phones-row .phone:nth-child(4) { display: none; }
  .watches { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
}
@media (max-width: 834px) {
  .steps, .trio { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-left: auto; margin-right: auto; }
  .trio { grid-gap: 34px; gap: 34px; }
}
@media (max-width: 640px) {
  section.band { padding: 74px 0; }
  .wrap { padding: 0 20px; }
  .hero { padding: 64px 0 72px; }
  .stage { padding: 0 16px; margin-top: 48px; }
  .scene { border-radius: 20px; }
  .phones-row { margin-top: -36px; grid-gap: 14px; gap: 14px; }
  .phones-row .phone:nth-child(3) { display: none; }
  .phones-row .phone:nth-child(2) { width: 220px; }
  .lineup { grid-gap: 14px 8px; gap: 14px 8px; }
  .lineup li { width: 92px; }
  .lineup img { width: 66px; height: 66px; border-radius: 15px; }
  .tile-body, .tile.wide .tile-body { padding: 0 24px 28px; }
  .tile-name { font-size: 26px; }
  .tile-tag { font-size: 17px; }
  .facts { grid-gap: 22px; gap: 22px; }
  .fact-n { font-size: 22px; }
  .phones4 { grid-gap: 32px 14px; gap: 32px 14px; }
  .phone { border-radius: 34px; padding: 6px; }
  .phone img { border-radius: 28px; }
  .phone-fig figcaption strong { font-size: 16px; }
  .media-2 .phone { width: 46%; }
  .media-2 .phone + .phone { margin-top: 44px; }
  .watches { grid-gap: 20px; gap: 20px; }
  .watch { border-radius: 40px; padding: 10px; }
  .watch img { border-radius: 30px; }
  .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 22px 10px; gap: 22px 10px; }
  .ava { width: 92px; height: 92px; }
  .ava img { width: 76px; height: 76px; }
  .includes { grid-template-columns: minmax(0, 1fr); }
  .faq-question { font-size: 18px; }
  .cards, .posts-grid { grid-template-columns: minmax(0, 1fr); }
  .notify-band { padding: 80px 0; }
  .notify-card { margin: 0 16px; padding: 38px 24px; }
  .notify-form { flex-direction: column; }
  .page-hero, .article-hero, .legal-hero { padding: 60px 0 40px; }
  .article-body { font-size: 18px; padding: 0 22px; }
  .lede { font-size: 20px; }
  .article-body blockquote { font-size: 22px; padding-left: 18px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region, .correction, .finding, .day-card, .notebook, .highlight-box { padding: 22px 20px; }
  .hero-art { padding: 0 16px; }
  .hero-art img { aspect-ratio: 4 / 3; border-radius: 22px; }
  .cta-card { padding: 36px 24px; }
}

/* generic container for inner pages */
.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.policy-content .container, .legal-body .container, .article .container { padding: 0; max-width: none; }

/* how it works: each step shows what it means */
.step { display: flex; flex-direction: column; }
.step-visual { height: 300px; margin: -6px -8px 24px; border-radius: 18px; background: var(--ivory); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.step-visual .ava-big { width: 210px; height: 210px; object-fit: contain; margin-bottom: 30px; filter: drop-shadow(0 14px 18px rgba(30, 20, 5, .22)); }
.step-visual .phone { width: 128px; border-radius: 26px; padding: 5px; margin-bottom: 22px; }
.step-visual .phone img { border-radius: 21px; }
/* landscape-backed bands (pricing, sign-up) */
.scenic { position: relative; padding: 130px 0; overflow: hidden; }
.scenic > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glass { position: relative; max-width: 760px; margin: 0 auto; text-align: center; background: rgba(255, 255, 255, .86);
         -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
         border-radius: 32px; padding: 56px 48px; box-shadow: 0 30px 80px -30px rgba(30, 20, 5, .5); }
.price-icons { display: flex; justify-content: center; grid-gap: 12px; gap: 12px; margin-top: 26px; }
.price-icons img { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 4px 10px rgba(30, 20, 5, .18); }
@media (max-width: 640px) {
  .scenic { padding: 72px 0; }
  .glass { margin: 0 16px; padding: 38px 22px; }
  .step-visual { height: 260px; }
}

/* how it works v2: one story, left to right */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-gap: 80px; gap: 80px; align-items: center; }
.flow { list-style: none; margin-top: 44px; border-top: 1px solid var(--line); }
.flow-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-gap: 8px; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.flow-n { font-size: 44px; font-weight: 300; line-height: 1; color: var(--sacred); letter-spacing: -0.02em; }
.flow-step h3 { font-size: 22px; line-height: 1.25; }
.flow-step p { color: var(--ink-2); margin-top: 6px; }
.how-art { position: relative; aspect-ratio: 1 / 1.02; border-radius: 34px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(40, 25, 5, .5); }
.how-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.how-art::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(20,12,4,.28) 100%); }
.how-art .phone { position: absolute; width: 34%; z-index: 2; }
.how-steps { left: 16%; top: 7%; }
.how-map { right: 11%; top: 17%; }
.how-walker { position: absolute; z-index: 3; width: 34%; left: 2%; bottom: 2%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); }
@media (max-width: 1068px) {
  .how { grid-template-columns: minmax(0, 1fr); grid-gap: 52px; gap: 52px; max-width: 640px; margin: 0 auto; }
  .how-text { text-align: center; }
  .flow { text-align: left; }
}
@media (max-width: 640px) {
  .flow-step { grid-template-columns: 48px minmax(0, 1fr); padding: 22px 0; }
  .flow-n { font-size: 36px; }
  .how-art { border-radius: 26px; }
}
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 18px 24px; gap: 18px 24px; max-width: 560px; }
@media (max-width: 1068px) { .guides { margin-left: auto; margin-right: auto; } }
.guides { display: block; max-width: 460px; margin-top: 34px; border-top: 1px solid var(--line); }
.guides div { display: flex; justify-content: space-between; align-items: baseline; grid-gap: 16px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.guides strong { display: inline; font-size: 18px; }
@media (max-width: 1068px) { .guides { text-align: left; } }

/* app cards: icon on the right so the characters (left/centre of each painting) stay clear */
.tiles .tile:not(.wide) .tile-icon { align-self: flex-end; }
.tile-art { aspect-ratio: 2 / 1; }

/* phone hero (Apple pattern): stacked buttons, one taller image, phones in a swipe row */
@media (max-width: 640px) {
  .hero .ctas { flex-direction: column; grid-gap: 18px; gap: 18px; padding: 0 24px; }
  .hero .ctas .btn { width: 100%; max-width: 340px; padding: 15px 26px; }
  .stage { padding: 0 16px; margin-top: 40px; }
  .scene { aspect-ratio: 3 / 2; border-radius: 24px; box-shadow: 0 20px 40px -24px rgba(40,25,5,.45); }
  .scene img { object-fit: cover; }
  .phones-row { margin: 28px -16px 0; padding: 4px 16px 24px; grid-gap: 14px; gap: 14px; justify-content: flex-start; align-items: flex-start;
                overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .phones-row::-webkit-scrollbar { display: none; }
  .phones-row .phone, .phones-row .phone:nth-child(n) { display: block; flex: 0 0 62%; width: 62%; max-width: 250px; scroll-snap-align: center; }
  .phones-row::after { content: ""; flex: 0 0 2px; }
  .lineup { margin-top: 28px; }
}

/* iPhone Duo concept (device frames drawn in CSS, real app screens inside) */
/* iPhone Duo concept: images drawn at Apple's real display sizes by _tools/make_duo_mockups.py.
   Columns follow the devices' real widths so both share one scale. */
.duo-hero { max-width: 980px; margin: 64px auto 0; text-align: center; }
.duo-hero img, .duo-fig img { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(30, 20, 5, .14)); }
.duo-hero figcaption, .duo-fig figcaption { margin-top: 20px; text-align: center; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.duo-hero figcaption strong, .duo-fig figcaption strong { display: block; font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.duo-hero figcaption span, .duo-fig figcaption span { display: block; max-width: 460px; margin: 0 auto; }
.duo-row { display: grid; grid-template-columns: 0.72fr 1fr; grid-gap: 64px; gap: 64px; align-items: end; max-width: 760px; margin: 80px auto 0; }
.hero-duo { display: inline-block; margin-top: 26px; padding: 7px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(29, 29, 31, .12); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.hero-duo:hover { border-color: rgba(29, 29, 31, .3); }
.rtr-look { margin-top: 110px; text-align: center; }
.rtr-look h3 { font-size: 44px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; margin: 10px 0 14px; color: var(--ink); }
.rtr-look .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.phones3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 48px; gap: 48px; max-width: 860px; margin: 56px auto 0; text-align: center; }
.phones3 figcaption span { display: block; max-width: 240px; margin: 0 auto; }
.duo-note { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 30px; }
@media (max-width: 1068px) {
  .duo-row { grid-gap: 40px; gap: 40px; max-width: 600px; }
}
@media (max-width: 640px) {
  .duo-row { grid-gap: 20px; gap: 20px; }
  .duo-hero { margin-top: 40px; }
}
@media (max-width: 640px) {
  .rtr-look { margin-top: 80px; }
  /* three phones become a swipe row instead of three thin columns */
  .phones3 { display: flex; grid-gap: 18px; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
             scrollbar-width: none; margin: 40px -16px 0; padding: 0 16px 8px; }
  .phones3::-webkit-scrollbar { display: none; }
  .phones3 .phone-fig { flex: 0 0 62%; max-width: 250px; scroll-snap-align: center; }
}

/* ---------- older browsers (2026-10-25) ----------
   For browsers a few years old, e.g. a 2019 Samsung TV (Chromium 63). Every block below sits behind
   an @supports test that current Safari, Chrome and Firefox pass, so they never read it: the site
   looks exactly as before on them. (Above, each gap / clamp() / inset is preceded by a plain
   fallback that modern browsers override with the next declaration.) */

/* No flex gap (Chrome < 84): space flex items with margins. "No inset" (Chrome < 87, Safari < 14.1)
   is the nearest test @supports can make for it. */
@supports not (inset: 0) {
  .nav .wrap > * + *, .nav-links > * + * { margin-left: 26px; }
  .brand > * + * { margin-left: 9px; }
  .lang-toggle > * + * { margin-left: 5px; }
  .lang-option > * + *, .notify-form > * + *, .post-meta > * + *,
  .article-hero .meta > * + *, .effective-date > * + * { margin-left: 10px; }
  .site-footer .wrap > * + *, .faq-question > * + * { margin-left: 20px; }
  .site-footer ul > * + * { margin-left: 22px; }
  .ctas > * + * { margin-left: 28px; }
  .phones-row > * + * { margin-left: 26px; }
  .lineup > * + * { margin-left: 30px; }
  .lineup li > * + * { margin-top: 10px; }
  .facts > * + *, .nopes > * + * { margin-left: 34px; }
  .tile-actions > * + *, .media-2 > * + * { margin-left: 24px; }
  .checks li > * + *, .price-icons > * + * { margin-left: 12px; }
  .patch-row > * + * { margin-left: 18px; }
  .post-card .read-more > * + * { margin-left: 6px; }
  .guides div > * + * { margin-left: 16px; }
}

/* No aspect-ratio (Chrome < 88, Safari < 15): the classic padding box. The pictures inside are
   pinned to it, so the crop is the same as with aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
  .scene { height: 0; padding-top: 42.857%; }                         /* 21:9 */
  .how-art { height: 0; padding-top: 102%; }                           /* 1:1.02 */
  .tile-art, .card-img, .post-card .post-img { position: relative; height: 0; }
  .tile-art { padding-top: 50%; }                                      /* 2:1 */
  .card-img, .post-card .post-img { padding-top: 56.25%; }             /* 16:9 */
  .tile-art img, .card-img img, .post-card .post-img img { position: absolute; top: 0; left: 0; }
  /* The wide cards size from their picture, as with aspect-ratio: auto (min-height 320 / 340px). */
  .tile.wide .tile-art, .post-card:first-child .post-img { height: auto; padding-top: 0; }
  .tile.wide .tile-art img, .post-card:first-child .post-img img { position: static; }
  @media (max-width: 1068px) {
    .tile.wide .tile-art, .post-card:first-child .post-img { height: 0; }
    .tile.wide .tile-art { padding-top: 50%; }
    .post-card:first-child .post-img { padding-top: 56.25%; }
    .tile.wide .tile-art img, .post-card:first-child .post-img img { position: absolute; }
  }
  @media (max-width: 640px) {
    .scene { padding-top: 66.667%; }                                   /* 3:2 */
  }
}

/* No backdrop blur (Chrome < 76): make the frosted panels a little more solid so text stays crisp. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background: rgba(251, 248, 241, .97); }
  .scene-label { background: rgba(20, 15, 5, .6); }
  .notify-card, .glass { background: rgba(255, 255, 255, .95); }
}

/* ---------- 2026-10-30: Road to Rome released ---------- */
/* The newest app leads the lineup with a quiet "New", never a badge. */
.lineup .new em { color: var(--sacred); font-weight: 600; }
/* Specs: two calm rows of three, the way a product page lists them. */
.facts.specs .fact-n { white-space: nowrap; }
.facts.specs { display: grid; grid-template-columns: repeat(3, max-content); grid-gap: 18px 44px; gap: 18px 44px; }
/* Collections: never more than four across. Sacred Steps on the first row, Nature Steps on the second. */
.phones-set { display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 56px 30px; gap: 56px 30px; margin-top: 64px; }
.phones-set .phone-fig { width: calc((100% - 90px) / 4); }
.phones-set .set-break { flex-basis: 100%; height: 0; }
.cast { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 1068px) {
  .phones-set { max-width: 600px; margin-left: auto; margin-right: auto; grid-gap: 44px 28px; gap: 44px 28px; }
  .phones-set .phone-fig { width: calc((100% - 28px) / 2); }
  .cast { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .facts.specs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px 14px; gap: 16px 14px; }
  .facts.specs .fact-n { font-size: 22px; white-space: nowrap; }
  .phones-set { grid-gap: 32px 14px; gap: 32px 14px; }
  /* the swipeable hero row opens on the newest app */
  .phones-row .phone:nth-child(2) { order: -1; }
  .phones-set .phone-fig { width: calc((100% - 14px) / 2); }
  .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A gloss under a quotation kept in its original language (Chaucer's Middle English). */
.article-body blockquote .gloss { display: block; font-family: var(--font); font-size: 17px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }

/* Header, 2026-10-30: 68px bar, 40px logo, 15px links (was 54 / 28 / 13, too small to read the logo).
   In-page links land below the taller sticky bar instead of under it. */
html { scroll-padding-top: 76px; }
@media (max-width: 640px) {
  .nav, .nav .wrap { height: 60px; }
  .menu { top: 60px; inset: 60px 0 0; }
  .brand { font-size: 18px; }
  .brand img { width: 34px; height: 34px; }
  html { scroll-padding-top: 68px; }
}
.brand, .nav-links a, .nav-cta, .lang-toggle { white-space: nowrap; }
/* At 15px the full row needs ~1180px in German; below that, the menu button. */
@media (max-width: 1180px) {
  .nav-links, .nav .nav-cta { display: none; }
  .burger { display: block; }
}

/* Triple Crown (2026-11-01): the three guides together, above their phones */
.crown-art { max-width: 1000px; margin: 48px auto 0; }
.crown-art img { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 30px 70px -32px rgba(40, 25, 5, .45); }
@media (max-width: 720px) {
  .crown-art { margin-top: 32px; }
  .crown-art img { border-radius: 16px; }
}
.cta-card .cta-links { margin-top: 18px; font-size: 15px; }
.cta-card .cta-links a { color: #f5f5f7; text-decoration: underline; text-underline-offset: 3px; }