/* =====================================================================
   MARKAPANO — design system v11
   Gallery-dark ground, photographs carry the colour. Instrument Serif for
   display, Inter Tight for everything else. Sentence-case labels, no
   tracked-out micro caps, few rules, generous space.
   ===================================================================== */

/* 1. Tokens ----------------------------------------------------------- */
:root {
  --bg: #0A0A09;
  --bg-2: #121211;
  --bg-3: #1A1A18;
  --fg: #EEEBE5;
  --fg-2: #C9C5BD;
  --muted: #8F8B83;
  --line: rgba(238, 235, 229, .12);
  --line-2: rgba(238, 235, 229, .26);
  --ok: #9CC3A4;
  --err: #EC8E76;

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-xl: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  --t-2xl: clamp(2.6rem, 1.6rem + 3.6vw, 5.2rem);
  --t-3xl: clamp(3.4rem, 1.6rem + 6.6vw, 9.5rem);

  --gut: clamp(20px, 4vw, 64px);
  --sec: clamp(96px, 12vw, 200px);
  --maxw: 1560px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 80px;
  --radius: 4px;
}

/* 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: var(--t-md); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-feature-settings: "ss01", "cv11"; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -60px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 16px; }
.skip:focus { top: 10px; }

/* 3. Primitives ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sec) 0; }
.section--paper { background: var(--bg-2); }
.section--ink { background: var(--bg-2); }
.display { font-family: var(--serif); font-size: var(--t-3xl); line-height: .92; letter-spacing: -.02em; }
.h2 { font-family: var(--serif); font-size: var(--t-2xl); line-height: .96; letter-spacing: -.015em; }
.h3 { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.04; letter-spacing: -.01em; }
.display em, .h2 em, .h3 em, .hero-h em, .intro-t em { font-style: italic; }
.lead { font-size: var(--t-lg); line-height: 1.45; color: var(--fg-2); max-width: 44ch; }
.muted { color: var(--muted); }
.kicker, .eyebrow, .label, .side-h { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; margin: 0 0 20px; }
.num { font-family: var(--serif); font-size: 1.4rem; color: var(--muted); font-style: italic; }
.fine { font-size: var(--t-xs); color: var(--muted); max-width: 70ch; margin-top: 40px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0; cursor: pointer; background: transparent; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn--fill, .btn--solid, .btn--light-solid { background: var(--fg); color: var(--bg); }
.btn--fill:hover, .btn--solid:hover, .btn--light-solid:hover { background: #fff; }
.btn--ghost, .btn--line, .btn--light { border-color: var(--line-2); color: var(--fg); }
.btn--ghost:hover, .btn--line:hover, .btn--light:hover { border-color: var(--fg); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn .arr { display: none; }
.more, .link { font-size: var(--t-sm); font-weight: 500; color: var(--fg); display: inline-flex; gap: 8px; align-items: center; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .4s var(--ease); }
.more:hover, .link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link .arr { display: none; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.status { font-size: var(--t-xs); color: var(--muted); }
.status--sold { color: var(--err); }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 80px); }

/* 4. Header ----------------------------------------------------------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: var(--fg); transition: background .5s var(--ease), border-color .5s var(--ease); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(10, 10, 9, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); }
.site-header-in { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.logo { grid-column: 1; justify-self: start; font-family: var(--serif); font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.site-nav { grid-column: 2; display: flex; }
.site-nav ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.site-nav a { font-size: var(--t-sm); font-weight: 500; color: var(--fg-2); padding: 6px 0; transition: color .3s; }
.site-nav a:hover, .site-nav a[aria-current=page] { color: var(--fg); }
.header-cta { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--t-sm); font-weight: 500; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s; }
.header-cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.over-photo .site-header:not(.is-scrolled) .site-nav a { color: rgba(255, 255, 255, .86); }
.over-photo .site-header:not(.is-scrolled) .header-cta { border-color: rgba(255, 255, 255, .5); }
.nav-toggle { display: none; }
.nav-cta-m { display: none !important; }
@media (max-width: 960px) {
  .site-header-in { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .nav-toggle { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: var(--t-sm); font-weight: 500; }
  .nav-toggle-lines { width: 22px; height: 7px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .4s var(--ease), height .4s var(--ease); }
  .nav-toggle[aria-expanded=true] .nav-toggle-lines { height: 0; border-bottom: 0; transform: rotate(45deg); }
  .site-nav { position: fixed; inset: 0; z-index: -1; background: var(--bg); flex-direction: column; justify-content: center; padding: var(--header-h) var(--gut) 40px; visibility: hidden; opacity: 0; transition: opacity .45s var(--ease), visibility 0s .45s; }
  .site-nav.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 10vw, 3.6rem); font-weight: 400; color: var(--fg) !important; padding: 6px 0; }
  .nav-cta-m { display: inline-flex !important; margin-top: 36px; align-self: flex-start; }
  .site-nav a.nav-cta-m { font-family: var(--sans); font-size: var(--t-sm); color: var(--bg) !important; padding: 0 26px; }
  body.nav-open { overflow: hidden; }
}

/* 5. Footer ----------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(72px, 9vw, 140px) 0 40px; }
.foot-mark { font-family: var(--serif); font-size: clamp(3.6rem, 1rem + 11vw, 13rem); line-height: .85; letter-spacing: -.03em; margin-bottom: clamp(48px, 6vw, 96px); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.foot-grid h2 { font-size: var(--t-sm); font-weight: 500; color: var(--muted); margin-bottom: 16px; }
.foot-grid li { margin-bottom: 8px; font-size: var(--t-sm); color: var(--fg-2); }
.foot-grid a:hover { color: var(--fg); }
.foot-claim { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; max-width: 16ch; }
.foot-brands { columns: 2; column-gap: 24px; }
.foot-legal { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding-top: 28px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--muted); line-height: 1.7; }
.foot-legal p { margin: 0 0 8px; max-width: 90ch; }
.foot-legal ul { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.foot-legal a:hover { color: var(--fg); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } .foot-legal { grid-template-columns: 1fr; } .foot-legal ul { justify-content: flex-start; } }

/* 6. Photo frames ----------------------------------------------------- */
/* a .frame is a sized box; the scene inside covers it, anchored on the photo's focus point */
.frame { position: relative; overflow: hidden; container-type: size; background: var(--bg-3); }
.frame > .scene { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: max(100cqw, calc(100cqh * var(--ar))); transform: translate(calc(-1 * var(--fx, 50%)), calc(-1 * var(--fy, 50%))); }

/* 7. Home: hero -------------------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 640px; max-height: 1400px; overflow: hidden; color: #fff; background: #000; }
.hero .slides, .hero .slide { position: absolute; inset: 0; }
.hero .slide { opacity: 0; transition: opacity 1.6s var(--ease); }
.hero .slide.is-active { opacity: 1; }
.hero .slide .frame { position: absolute; inset: 0; background: #000; }

.hero-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%),
  linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,0) 50%),
  radial-gradient(70% 60% at 0% 100%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%); }
.hero-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(28px, 4vw, 56px); }
.hero-h { font-family: var(--serif); font-size: clamp(2.8rem, 1.2rem + 4vw, 6.4rem); line-height: .95; letter-spacing: -.02em; max-width: 13ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-top: clamp(28px, 3.4vw, 48px); }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero .btn--ghost:hover { border-color: #fff; }
.hero-now { display: grid; justify-items: end; gap: 12px; text-align: right; }
.hero-now a { font-size: var(--t-sm); font-weight: 500; }
.hero-now-d { color: rgba(255, 255, 255, .7); font-weight: 400; margin-left: 6px; }
.hero-dots { display: flex; gap: 6px; }
.hero-dots button { width: 36px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-dots button::before, .hero-dots button::after { content: ""; position: absolute; left: 0; top: 50%; height: 2px; border-radius: 2px; }
.hero-dots button::before { right: 0; background: rgba(255, 255, 255, .3); }
.hero-dots button::after { width: 0; background: #fff; }
.hero-dots button[aria-current=true]::after { width: 100%; transition: width 6.5s linear; }
.hero.is-paused .hero-dots button[aria-current=true]::after { transition: none; }
@media (max-width: 760px) {
  /* phones: photograph first, words below it, so the type never sits on the product */
  .hero { height: auto; min-height: 0; max-height: none; background: var(--bg); color: var(--fg); }
  .hero .slides { position: relative; aspect-ratio: 4 / 5; }
  .hero-shade { bottom: auto; aspect-ratio: 4 / 5; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 26%); }
  .hero-in { height: auto; padding-top: 32px; padding-bottom: 56px; }
  .hero-h { text-shadow: none; font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero .btn--ghost { border-color: var(--line-2); color: var(--fg); }
  .hero-foot { flex-direction: column-reverse; align-items: stretch; gap: 28px; }
  .hero-now { justify-items: start; text-align: left; }
  .hero-now-d { color: var(--muted); }
  .hero-dots button::before { background: var(--line-2); }
  .hero-dots button::after { background: var(--fg); }
  .hero-cta .btn { flex: 1; }
}

/* 8. Home: sections --------------------------------------------------- */
.intro { padding: var(--sec) 0 calc(var(--sec) * .8); }
.intro-in { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; }
.intro-t { font-family: var(--serif); font-size: clamp(2rem, 1.2rem + 2.6vw, 4rem); line-height: 1.08; letter-spacing: -.01em; max-width: 26ch; margin: 0; text-wrap: pretty; }
@media (max-width: 860px) { .intro-in { grid-template-columns: 1fr; gap: 0; } }

.collection { padding-bottom: var(--sec); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 104px) clamp(20px, 2.4vw, 40px); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards--3 > .bcard:nth-child(3) { display: none; } }
@media (max-width: 720px) { .cards, .cards--3 { grid-template-columns: 1fr; gap: 48px; } .cards--3 > .bcard:nth-child(3) { display: block; } }
.bcard[hidden] { display: none; }
.bcard-link { display: block; }
.bcard-media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); }
.bcard-media > .frame { position: absolute; inset: 0; }
.bcard-media .scene { transition: scale 1.4s var(--ease); }
.bcard-alt { opacity: 0; transition: opacity .7s var(--ease); }
@media (hover: hover) {
  .bcard-link:hover .bcard-alt { opacity: 1; }
  .bcard-link:hover .bcard-media .scene { scale: 1.03; }
}
.bcard-body { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; padding-top: 20px; }
.bcard-name { font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.4vw, 3rem); line-height: 1; letter-spacing: -.01em; }
.bcard-meta { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 0; font-size: var(--t-sm); color: var(--muted); }
.bcard-meta span:first-child { color: var(--fg-2); }

.process { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; counter-reset: st; }
.step { padding-top: 24px; border-top: 1px solid var(--line-2); }
.step h3 { font-family: var(--serif); font-size: 2rem; line-height: 1.05; margin: 14px 0 12px; }
.step p { color: var(--muted); font-size: var(--t-sm); max-width: 34ch; }
.steps--compact { grid-template-columns: 1fr; gap: 0; }
.steps--compact .step { display: grid; grid-template-columns: 2.4em 1fr; gap: 0 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps--compact .num { grid-row: span 2; font-size: 1.15rem; }
.steps--compact h3 { font-size: 1.4rem; margin: 0 0 4px; }
@media (max-width: 960px) { .steps:not(.steps--compact) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps:not(.steps--compact) { grid-template-columns: 1fr; gap: 28px; } }

.closing { position: relative; min-height: 88svh; display: grid; place-items: center; text-align: center; overflow: hidden; color: #fff; }
.closing > .frame { position: absolute; inset: 0; }
.closing::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.closing-in { position: relative; z-index: 2; padding: 80px var(--gut); display: grid; justify-items: center; }
.closing-h { font-family: var(--serif); font-size: var(--t-3xl); line-height: .92; letter-spacing: -.02em; max-width: 12ch; margin-bottom: 24px; }
.closing p { color: rgba(255, 255, 255, .85); margin-bottom: 32px; max-width: 44ch; }

/* 9. Index & static page hero ----------------------------------------- */
.page-hero { padding: calc(var(--header-h) + clamp(64px, 9vw, 150px)) 0 clamp(48px, 6vw, 96px); }
.page-hero .display { max-width: 14ch; }
.page-lead { margin-top: 28px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-bottom: 24px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: none; cursor: pointer; font-size: var(--t-sm); color: var(--fg-2); transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip[aria-pressed=true] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filters-side { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.search { flex: 0 1 300px; }
.search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search input { width: 100%; min-height: 42px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font: inherit; font-size: var(--t-sm); padding: 0 18px; color: var(--fg); }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--fg); }
.views { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.view-btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: var(--t-sm); color: var(--fg-2); }
.view-btn[aria-pressed=true] { background: var(--fg); color: var(--bg); }
.filter-status { font-size: var(--t-xs); color: var(--muted); margin: 0 0 clamp(36px, 4vw, 64px); min-height: 1.4em; }
.empty { padding: 80px 0; text-align: center; color: var(--muted); }
.empty-h { font-family: var(--serif); font-size: var(--t-xl); color: var(--fg); }
.index-list { border-top: 1px solid var(--line-2); }
.index-list[hidden], .irow[hidden], .cards[hidden] { display: none; }
.irow a { position: relative; display: grid; grid-template-columns: 3em minmax(0, 1.4fr) minmax(0, 1fr) auto 1.5em; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); transition: color .3s; }
.irow-no { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.irow-name { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); line-height: 1; }
.irow-cat { font-size: var(--t-sm); color: var(--muted); }
.irow-dom { font-size: var(--t-sm); color: var(--fg-2); }
.irow-arr { justify-self: end; }
.irow-thumb { position: absolute !important; right: 16%; top: 50%; width: 220px; aspect-ratio: 4 / 3; translate: 0 -50%; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); z-index: 2; border-radius: var(--radius); }
@media (hover: hover) and (min-width: 1081px) { .index-list:hover .irow a { color: var(--muted); } .index-list .irow a:hover { color: var(--fg); } .irow a:hover .irow-thumb { opacity: 1; } }
@media (max-width: 1080px) { .irow-thumb { display: none; } }
@media (max-width: 760px) {
  .filters { display: block; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .filters-side { margin-top: 14px; }
  .search { flex: 1 1 100%; }
  .irow a { grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 6px 14px; padding: 18px 0; }
  .irow-cat { grid-column: 2; grid-row: 2; } .irow-dom { grid-column: 2; grid-row: 3; } .irow-arr { grid-column: 3; grid-row: 1; }
}

/* 10. Brand page ------------------------------------------------------- */
.bh-top { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(36px, 4vw, 64px); }
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); margin-bottom: clamp(40px, 6vw, 96px); }
.crumbs a:hover { color: var(--fg); }
.bh-mark { container-type: inline-size; color: #fff; --s-ink: #fff; --s-cut: var(--bg); line-height: 1; }
.bh-mark .lockup { font-size: min(clamp(3.4rem, 1rem + 9vw, 11rem), calc(96cqw / var(--fit, 7))); }
.bh-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-top: clamp(36px, 4vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); }
.bh-meta dl { display: flex; gap: 16px clamp(28px, 4vw, 64px); flex-wrap: wrap; margin: 0; }
.bh-meta dt { font-size: var(--t-xs); color: var(--muted); margin-bottom: 4px; }
.bh-meta dd { margin: 0; font-size: var(--t-md); }
.bh-media { height: min(90svh, 60vw); min-height: 360px; }
@media (max-width: 760px) { .bh-media { height: auto; aspect-ratio: 4 / 3; min-height: 0; } .bh-meta dl > div { min-width: 40%; } }

.lede { padding: var(--sec) 0; }
.lede-in { display: grid; grid-template-columns: 1.8fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.lede-t { font-family: var(--serif); font-size: clamp(1.8rem, 1.1rem + 2vw, 3.1rem); line-height: 1.12; letter-spacing: -.005em; max-width: 30ch; text-wrap: pretty; }
.rule-list { border-top: 1px solid var(--line); }
.rule-list li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
@media (max-width: 900px) { .lede-in { grid-template-columns: 1fr; } }

.seq { padding-bottom: var(--sec); }
.sq { margin: 0 0 clamp(14px, 1.6vw, 24px); border-radius: var(--radius); overflow: hidden; }
.sq--full .sq-photo { height: min(92svh, 62vw); min-height: 340px; }
.sq-half { aspect-ratio: 4 / 5; }
.sq-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); margin-bottom: clamp(14px, 1.6vw, 24px); align-items: start; }
.sq-pair > .sq { margin: 0; }
.sq-pair .pl { aspect-ratio: 4 / 5; }
.sq--band .pl { height: clamp(220px, 26vw, 420px); }
@media (max-width: 760px) { .sq-pair { grid-template-columns: 1fr; } .sq--full .sq-photo { height: auto; aspect-ratio: 4 / 3; min-height: 0; } }

/* identity plates */
.pl { position: relative; overflow: hidden; container-type: size; display: grid; place-items: center; width: 100%; }
.pl .sym { display: block; }
.pl-symbol .sym { width: 38cqmin; height: 38cqmin; }
.pl-word .wm { font-size: calc(80cqw / var(--fit, 6)); line-height: 1; white-space: nowrap; }
.pl-corner { position: absolute; left: 7cqw; bottom: 6cqh; font-family: var(--sans); font-size: max(12px, 2.4cqw); opacity: .7; }
.pl-pattern { place-items: stretch; }
.pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); width: 100%; height: 100%; padding: 9cqw; gap: 6cqw; }
.pl-grid span { display: grid; place-items: center; opacity: .18; }
.pl-grid span.on { opacity: 1; }
.pl-grid .sym { width: 100%; height: 100%; max-width: 14cqw; max-height: 14cqw; }
.pl-palette { display: flex; place-items: stretch; }
.pl-palette > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 5cqh 1.6cqw; min-width: 0; }
.pl-palette b { font-weight: 500; font-size: max(13px, 1.4cqw); }
.pl-palette span { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: max(11px, 1cqw); opacity: .8; }
.pl-poster { place-items: stretch; padding: 9cqw; display: flex; flex-direction: column; justify-content: space-between; }
.pl-poster-t { font-family: var(--b-fh); font-size: 12cqw; line-height: 1; letter-spacing: -.02em; margin: 0; max-width: 9em; }
.pl-poster-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--sans); font-size: max(11px, 2.6cqw); }
.pl-poster-f .lockup { font-size: 5cqw; }
.pl-icons { display: flex; gap: 5cqw; justify-content: center; align-items: center; }
.pl-icons .app-icon { width: 22cqw; }
.pl-lockup .lockup { font-size: calc(70cqw / (var(--fit, 6) + 1.6)); }
.pl .lockup .sym { width: 1.15em; height: 1.15em; }
.app-icon { aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.app-icon .sym { width: 58%; height: 58%; }
.lockup { display: inline-flex; align-items: center; gap: .38em; line-height: 1; white-space: nowrap; }
.lockup .sym { width: 1.15em; height: 1.15em; flex: none; }
.wm { display: inline-block; line-height: 1; }
.wm-a { color: var(--s-acc, inherit); }

/* notes / scope / faq / offer */
.split { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 6vw, 100px); }
.split-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-head { position: static; } }
.dl { margin: 0; }
.dl > div { display: grid; grid-template-columns: 11em 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.dl > div:last-child { border-bottom: 1px solid var(--line); }
.dl dt { font-size: var(--t-sm); color: var(--muted); }
.dl dd { margin: 0; color: var(--fg-2); }
@media (max-width: 640px) { .dl > div { grid-template-columns: 1fr; gap: 4px; } }
.slogan-box { margin-top: 56px; }
.slogan-list li { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.15; padding: 16px 0; border-bottom: 1px solid var(--line); }
.slogan-list li:first-child { border-top: 1px solid var(--line); }

.coll-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 80px); }
.coll-head > p { color: var(--muted); max-width: 46ch; justify-self: end; }
@media (max-width: 860px) { .coll-head { grid-template-columns: 1fr; } .coll-head > p { justify-self: start; } }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pack { padding-top: 24px; border-top: 1px solid var(--line-2); }
.pack-k { font-family: var(--serif); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--muted); }
.pack h3 { font-family: var(--serif); font-size: 1.9rem; margin: 16px 0 10px; }
.pack p { color: var(--muted); font-size: var(--t-sm); }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr; gap: 28px; } }
.verify { margin-top: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.verify summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-weight: 500; min-height: 48px; }
.verify summary::-webkit-details-marker { display: none; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
.vtable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
.vtable th, .vtable td { text-align: left; padding: 16px 18px 16px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.vtable thead th { font-size: var(--t-xs); color: var(--muted); font-weight: 500; }
.vs { font-size: var(--t-xs); white-space: nowrap; color: var(--muted); }
.vs--verified { color: var(--ok); }

.faqs { border-bottom: 1px solid var(--line); }
.faq { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; align-items: center; font-size: 1.15rem; line-height: 1.35; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i, .verify summary i { width: 14px; height: 14px; position: relative; flex: none; }
.faq summary i::before, .faq summary i::after, .verify summary i::before, .verify summary i::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.faq summary i::after, .verify summary i::after { transform: rotate(90deg); }
.faq[open] summary i::after, .verify[open] summary i::after { transform: rotate(0); }
.faq-a { padding: 0 0 26px; max-width: 70ch; color: var(--muted); }

.offer { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.offer-t { font-family: var(--serif); font-size: var(--t-2xl); line-height: .96; letter-spacing: -.015em; margin-bottom: 24px; }
.offer-points { margin-top: 32px; }
.offer-points li { padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-2); }
@media (max-width: 960px) { .offer { grid-template-columns: 1fr; } .offer .steps--compact { display: none; } }

.b-legal { font-size: var(--t-xs); line-height: 1.8; color: var(--muted); max-width: 110ch; }
.b-legal p { margin-bottom: 10px; }
.related { padding: var(--sec) 0; border-top: 1px solid var(--line); }

.mcta { display: none; }
@media (max-width: 760px) {
  .mcta { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; background: rgba(26, 26, 24, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: 999px; transform: translateY(150%); transition: transform .5s var(--ease); }
  .mcta.is-visible { transform: none; }
  .mcta-d { font-family: var(--serif); font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mcta .btn { min-height: 44px; padding: 0 18px; }
  .has-mcta .site-footer { padding-bottom: 110px; }
}

/* 11. Forms ------------------------------------------------------------ */
.inquiry { background: var(--bg-3); border-radius: 8px; padding: clamp(24px, 3.4vw, 48px); }
.inquiry-h { font-family: var(--serif); font-size: var(--t-xl); margin-bottom: 10px; }
.inquiry-lead { color: var(--muted); font-size: var(--t-sm); margin-bottom: 28px; max-width: 52ch; }
.form-notice { border-left: 2px solid var(--line-2); padding: 4px 0 4px 16px; font-size: var(--t-sm); margin-bottom: 28px; color: var(--fg-2); }
.form-hint { font-size: var(--t-sm); color: var(--muted); margin: 0 0 28px; max-width: 56ch; }
.form-hint a { color: var(--fg); text-decoration: underline; text-underline-offset: .2em; }
.field { margin: 0 0 22px; border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 8px; padding: 0; color: var(--fg-2); }
.req { color: var(--muted); }
.opt { font-weight: 400; color: var(--muted); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; font-size: var(--t-md); color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; transition: border-color .3s; }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { color: #111; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fg-2); }
.field [aria-invalid=true] { border-color: var(--err) !important; }
.field-err { color: var(--err); font-size: var(--t-sm); margin: 8px 0 0; }
.field-err:empty { display: none; }
.radios { display: grid; gap: 10px; }
.radio, .check { display: flex !important; gap: 12px; align-items: flex-start; font-size: var(--t-sm) !important; font-weight: 400 !important; color: var(--fg-2); cursor: pointer; }
.radio input, .check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--fg); flex: none; }
.check a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; }
.inquiry .btn { width: 100%; margin-top: 6px; }
.form-result { margin-top: 20px; font-size: var(--t-sm); }
.form-result:empty { display: none; }
.form-result > div { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 6px; }
.form-result pre { white-space: pre-wrap; font: inherit; font-size: var(--t-xs); padding: 12px; border: 1px solid var(--line); margin: 12px 0; max-height: 220px; overflow: auto; }
.form-result .btn { width: auto; min-height: 44px; }

/* 12. Static pages ----------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--serif); font-size: var(--t-xl); margin: 56px 0 16px; }
.prose p, .prose li { color: var(--fg-2); }
.prose li { padding: 10px 0; border-top: 1px solid var(--line); }
.drop { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.2; color: var(--fg) !important; }
.callout { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.callout p { font-family: var(--serif); font-size: var(--t-xl); margin: 0; color: var(--fg) !important; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.contact-direct { margin-top: 48px; }
.contact-direct a { font-family: var(--serif); font-size: 1.8rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-grid .inquiry { order: -1; } }
.narrow { max-width: 880px; }
.nf .hero-cta { margin: 40px 0; }
.nf-list { display: flex; flex-wrap: wrap; gap: 10px 32px; font-family: var(--serif); font-size: 1.8rem; }
.nf-list a:hover { font-style: italic; }

/* 13. Motion & a11y ---------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print { .site-header, .mcta, .inquiry, .site-footer, .hero-dots { display: none; } }

/* 14. Search-intent pages: sector tiles, tips, guides, articles ---------- */
a.inline, .prose a, .lead a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--line-2); transition: text-decoration-color .3s; }
a.inline:hover, .prose a:hover, .lead a:hover { text-decoration-color: currentColor; }
.page-hero .crumbs { margin-bottom: clamp(28px, 4vw, 56px); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 24px; background: var(--bg); transition: background .35s var(--ease); height: 100%; }
.section--paper .tile { background: var(--bg-2); }
.tile:hover { background: var(--bg-3); }
.tile-h { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.tile-s { margin-top: auto; font-size: var(--t-sm); color: var(--muted); }

.tips { counter-reset: tip; display: grid; gap: 0; border-top: 1px solid var(--line); }
.tips li { counter-increment: tip; display: grid; grid-template-columns: 3em 1fr; gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tips li::before { content: counter(tip, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--muted); }
.tips h3 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.tips p { color: var(--fg-2); margin: 4px 0 0; max-width: 60ch; }

.linklist { columns: 2; column-gap: 40px; }
.linklist li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); }
.linklist a { font-family: var(--serif); font-size: 1.4rem; }
.linklist a:hover { font-style: italic; }
@media (max-width: 640px) { .linklist { columns: 1; } }

.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px); }
@media (max-width: 960px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gcards { grid-template-columns: 1fr; } }
.gcard a { display: block; }
.gcard-media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; }
.gcard-media > .frame { width: 100%; height: 100%; }
.gcard-media .scene { transition: scale 1.2s var(--ease); }
.gcard a:hover .gcard-media .scene { scale: 1.03; }
.gcard-h { font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; margin-top: 18px; }
.gcard-d { color: var(--muted); font-size: var(--t-sm); margin: 10px 0 8px; }
.gcard-m { font-size: var(--t-xs); color: var(--muted); }

.article-head { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 96px)); padding-bottom: clamp(32px, 4vw, 56px); max-width: 1100px; }
.article-h { font-size: clamp(2.8rem, 1.4rem + 4.6vw, 6.4rem); max-width: 16ch; }
.article-meta { margin-top: 24px; font-size: var(--t-sm); color: var(--muted); }
.article-media { aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .article-media { aspect-ratio: 4 / 3; } }
.article-body { padding-top: clamp(40px, 5vw, 80px); padding-bottom: var(--sec); max-width: 760px; }
.article-body.prose { max-width: calc(68ch + 2 * var(--gut)); }
.prose ul { margin: 0 0 1.4em; }
.prose ul li { padding: 10px 0 10px 18px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 6px; height: 1px; background: var(--fg-2); }
.prose strong { color: var(--fg); font-weight: 600; }
.note { font-size: var(--t-sm); color: var(--muted) !important; border-left: 2px solid var(--line-2); padding-left: 14px; }