/* JUNGTOYS PLAYLAB · lux.css
   Corporate and premium, in the family of the Spielhaus site: a cinematic dark hero and scroll stage, stone and white working grounds,
   bold Pretendard headlines, English labels in Geist, a brass accent on dark and the Jungtoys green on light, real photographs only. */

:root {
  --ground: #F3F1EC;
  --surface: #FFFFFF;
  --oat: #EAE7E0;
  --oat-2: #DDD9D0;
  --sage: #E4E8E1;
  --sage-2: #D2D9CF;
  --ink: #101412;
  --ink-70: rgba(16, 20, 18, .66);
  --ink-12: rgba(16, 20, 18, .1);
  --brand: #1F3A2C;
  --brand-deep: #142519;
  --honey: #8A6A36;
  --on-brand: #F3F0E9;
  --on-brand-70: rgba(243, 240, 233, .7);
  --night: #0B0F0D;
  --night-2: #131915;
  --brass: #D6B57E;
  --brass-2: #E6CDA2;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: var(--font);
  --en: 'Geist', 'Pretendard Variable', Pretendard, sans-serif;

  --h1: 60px; --h2: 46px; --h3: 21px; --lead: 19px; --body: 17px; --meta: 13.5px; --stat: 52px;
  --r-xl: 20px; --r-lg: 16px; --r-md: 12px; --r-sm: 8px;
  --m: 72px; --maxw: 1520px; --hh: 88px; --sec: 136px;
  --ease: cubic-bezier(.22, .61, .12, 1);
  --soft: 0 24px 60px rgba(8, 12, 10, .14);
}
@media (max-width: 1280px) { :root { --m: 44px; } }
@media (max-width: 960px) { :root { --h1: 40px; --h2: 36px; --stat: 40px; --m: 30px; --hh: 72px; --sec: 88px; --r-xl: 16px; --r-lg: 14px; } }
@media (max-width: 640px) { :root { --h1: 33px; --h2: 30px; --h3: 20px; --lead: 17px; --body: 16px; --meta: 13px; --stat: 36px; --m: 20px; --hh: 64px; --sec: 68px; --r-xl: 14px; --r-lg: 12px; --r-md: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 72px); }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font); font-size: var(--body); line-height: 1.75; color: var(--ink); background: var(--ground); letter-spacing: -0.008em; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, figure, blockquote { margin: 0; }
h1, h2 { margin: 0; font-family: var(--font); font-weight: 700; letter-spacing: -0.04em; }
h1 { font-size: var(--h1); line-height: 1.26; }
h2 { font-size: var(--h2); line-height: 1.34; }
h3 { margin: 0; font-size: var(--h3); font-weight: 650; line-height: 1.45; letter-spacing: -0.015em; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--sage-2); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 500; background: var(--brand); color: var(--on-brand); padding: 10px 18px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--m); }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-70); }

/* buttons: one shape, the pill */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--brand); color: var(--on-brand); font-size: 15.5px; font-weight: 650; transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn--soft, .btn--line { background: var(--oat); color: var(--brand); }
.btn--soft:hover, .btn--line:hover { background: var(--oat-2); }
.btn--light { background: var(--on-brand); color: var(--brand); }
.btn--light:hover { background: #fff; }
.btn--line-light { background: rgba(251, 246, 238, .14); color: var(--on-brand); }
.btn--line-light:hover { background: rgba(251, 246, 238, .24); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 650; color: var(--brand); }
.link-arrow svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--sage); color: var(--brand); transition: transform .25s var(--ease), background-color .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); background: var(--sage-2); }
.link-u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: rgba(42, 73, 57, .3); }
.link-u:hover { text-decoration-color: currentColor; }

/* header */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 300; background: transparent; color: var(--on-brand); transition: background-color .35s var(--ease); }
.hd.is-scrolled, .hd.mega-open, .menu-open .hd { background: var(--night); }
.hd-bar { height: var(--hh); display: flex; align-items: center; gap: 36px; }
.hd-logo { display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 44px; }
.hd-logo img { height: 24px; width: auto; }
.hd-sub { font-family: var(--en); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; color: var(--brass); margin-left: 2px; line-height: 1; }
.gnb { margin: 0 auto; }
.gnb ul { display: flex; gap: clamp(24px, 2.9vw, 50px); }
.gnb a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--hh); line-height: 1.25; color: var(--on-brand); }
.gnb a:hover .en { color: var(--brass); }
.gnb a[aria-current="page"] .en { color: var(--brass); }
.gnb .en { font-family: var(--en); font-size: 14.5px; font-weight: 600; letter-spacing: .1em; transition: color .25s; }
.gnb .ko { font-size: 12px; color: var(--on-brand-70); margin-top: 3px; }
.hd-util { display: flex; align-items: center; gap: 16px; flex: none; }
.hd-mall { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--on-brand-70); }
.hd-mall:hover { color: var(--on-brand); }
.hd-mall svg { width: 14px; height: 14px; }
.hd .btn--line { background: var(--brass); color: var(--night); }
.hd .btn--line:hover { background: var(--brass-2); }
.menu-btn { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(243, 240, 233, .12); align-items: center; justify-content: center; }
.menu-btn span { position: relative; width: 18px; height: 2px; border-radius: 2px; background: var(--on-brand); }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: var(--on-brand); transition: transform .25s, top .25s; }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-btn span::after { top: 0; transform: rotate(-45deg); }

.mega { position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--m); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.hd.mega-open .mega { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease); }
.mega-grid { max-width: calc(var(--maxw) - 2 * var(--m)); margin: 0 auto; background: var(--night); color: var(--on-brand); border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: var(--soft); display: grid; grid-template-columns: 250px repeat(5, minmax(0, 1fr)); gap: 28px; padding: 34px 40px 40px; } /* taste-skill-ignore: dropdown overlay */
.mega-title { font-family: var(--en); font-size: 15px; font-weight: 600; letter-spacing: .14em; color: var(--brass); margin-bottom: 10px; }
.mega-intro p:not(.mega-title) { font-size: 14.5px; color: var(--on-brand-70); line-height: 1.65; }
.mega-h { display: inline-block; font-size: 16px; font-weight: 700; color: var(--on-brand); margin-bottom: 10px; }
.mega-col a:not(.mega-h) { display: inline-block; padding: 4px 10px; margin-left: -10px; border-radius: 999px; font-size: 15px; transition: background-color .2s;  color: var(--on-brand-70); }
.mega-col a:not(.mega-h):hover { background: rgba(243, 240, 233, .08); color: var(--on-brand); }

.mobile-menu { position: fixed; left: 0; right: 0; top: var(--hh); bottom: 0; z-index: 290; background: var(--night); color: var(--on-brand); padding: 8px var(--m) 32px; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.menu-open .mobile-menu { visibility: visible; opacity: 1; transition: opacity .2s; }
.mm-group { background: rgba(243, 240, 233, .06); border-radius: var(--r-md); margin-bottom: 8px; padding: 0 18px; }
.mm-group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 58px; font-family: var(--serif); font-size: 19px; font-weight: 700; cursor: pointer; }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; background: rgba(243, 240, 233, .1); color: var(--brass); display: grid; place-items: center; font-family: var(--font); font-size: 18px; }
.mm-group[open] summary::after { content: "–"; }
.mm-group ul { padding: 0 0 14px; display: grid; }
.mm-group li a { display: block; padding: 8px 0; font-size: 16px; color: var(--on-brand-70); }
.mm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* views */
.js .view { display: none; }
.js .view.is-active { display: block; animation: viewIn .4s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* quick links */
.quick { background: var(--night); color: var(--on-brand); padding: 20px 0 56px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: start; padding: 26px 26px 28px; min-height: 124px; background: var(--night-2); border-radius: var(--r-md); transition: background-color .3s var(--ease); }
.quick a:hover { background: #1B231E; }
.quick b { font-size: 18px; font-weight: 600; color: var(--on-brand); }
.quick span { grid-column: 1; font-size: 14.5px; color: var(--on-brand-70); margin-top: 6px; line-height: 1.55; }
.quick svg { grid-column: 2; grid-row: 1; width: 18px; height: 18px; margin-top: 4px; color: var(--brass); transition: transform .3s var(--ease); }
.quick a:hover svg { transform: translateX(4px); }

/* sections */
.sec { padding: var(--sec) 0; }
.bg-tint, .bg-ivory { background: var(--oat); }
.bg-green { background: var(--night); color: var(--on-brand); }
.bg-green h2, .bg-green h3 { color: var(--on-brand); }
.bg-green .sec-head p, .bg-green .lead { color: var(--on-brand-70); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-head p { font-size: 16.5px; color: var(--ink-70); max-width: 54ch; }
.bg-green .sec-head p { color: var(--on-brand-70); }
.lead { font-size: var(--lead); line-height: 1.75; color: var(--ink-70); margin-top: 22px; max-width: 44ch; }
.statement { font-family: var(--serif); font-size: 27px; line-height: 1.5; margin-top: 24px; color: var(--brand); max-width: 24em; }

.intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px 88px; align-items: center; }
.intro .link-arrow { margin-top: 14px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.figures li { background: var(--surface); border-radius: var(--r-lg); padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.figures b { font-size: var(--stat); font-weight: 650; color: var(--brand); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.figures b small { font-size: 16px; color: var(--ink); margin-left: 3px; letter-spacing: 0; }
.figures li > span { font-size: 15.5px; font-weight: 650; }
.figures em { font-style: normal; font-size: var(--meta); color: var(--honey); line-height: 1.5; }
.figures--plain { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* areas: cards that step, for a freer rhythm */
.areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.area { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.area:hover { transform: translateY(-4px); box-shadow: var(--soft); } /* taste-skill-ignore: hover lift only */
.area figure { aspect-ratio: 4 / 3.2; overflow: hidden; margin: 10px 10px 0; border-radius: calc(var(--r-lg) - 8px); }
.area img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.area:hover img { transform: scale(1.04); }
.area h3 { padding: 20px 22px 0; font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--brand); }
.area p { padding: 8px 22px 0; font-size: 15.5px; color: var(--ink-70); line-height: 1.7; }
.area .link-arrow { padding: 10px 22px 18px; }

/* brand portfolio */
.port-group + .port-group { margin-top: 44px; }
.port-h { font-size: 17px; font-weight: 700; color: var(--brand); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.port-h span { font-size: 12.5px; font-weight: 700; background: var(--sage); color: var(--brand); padding: 2px 10px; border-radius: 999px; }
.logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.logo-grid--own { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.logo-grid a { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: var(--r-md); transition: background-color .25s var(--ease), transform .25s var(--ease); }
.bg-tint .logo-grid a, .bg-ivory .logo-grid a { background: var(--surface); }
.sec:not(.bg-tint):not(.bg-ivory) .logo-grid a { background: var(--oat); }
.logo-grid a:hover { transform: translateY(-3px); background: var(--sage) !important; }
.lg-logo { height: 112px; display: flex; align-items: center; justify-content: center; padding: 16px 20px; }
.lg-logo img { max-height: 46px; max-width: 128px; width: auto; object-fit: contain; }
.lg-word { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lg-word img { height: 15px; max-width: none; }
.lg-word em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--brand); }
.lg-meta { display: flex; flex-direction: column; gap: 1px; padding: 0 16px 16px; font-size: var(--meta); }
.lg-meta b { font-size: 14.5px; font-weight: 650; }
.lg-meta span { color: var(--honey); }

/* materials */
.materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mat { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease); }
.mat:hover { transform: translateY(-4px); }
.mat figure { aspect-ratio: 4 / 3; overflow: hidden; margin: 10px 10px 0; border-radius: calc(var(--r-lg) - 8px); }
.mat img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.mat:hover img { transform: scale(1.04); }
.mat-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 22px 0; }
.mat-meta span { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--sage); padding: 2px 10px; border-radius: 999px; }
.mat h3 { padding: 10px 22px 0; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.mat p:not(.mat-meta) { padding: 8px 22px 24px; font-size: 15.5px; color: var(--ink-70); }

/* field */
.field { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.field-main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-xl); background: var(--oat); }
.field-main figcaption { font-size: var(--meta); color: var(--ink-70); margin-top: 12px; padding-left: 8px; }
.field-list { display: grid; gap: 8px; }
.field-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: start; padding: 14px 18px; background: var(--surface); border-radius: var(--r-md); }
.bg-tint .field-list li { background: var(--surface); }
.fl-date { grid-row: span 2; font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--sage); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-title { font-size: 16px; font-weight: 650; }
.fl-place { font-size: 14px; color: var(--ink-70); }
.badge { font-style: normal; display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--honey); color: var(--on-brand); vertical-align: 2px; }

/* history and principles */
.milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.milestones li { background: var(--surface); border-radius: var(--r-lg); padding: 26px 24px; display: grid; gap: 8px; align-content: start; }
.milestones b { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--brand); line-height: 1.1; font-variant-numeric: tabular-nums; }
.milestones span { font-size: 15.5px; line-height: 1.65; }
.principles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.principles3 > div { background: var(--sage); border-radius: var(--r-lg); padding: 28px 26px; }
.principles3 h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--brand); }
.principles3 p { font-size: 15.5px; color: var(--ink-70); margin-top: 10px; }

/* news and downloads */
.board2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.board { background: var(--surface); border-radius: var(--r-xl); padding: 34px 34px 26px; }
.board h2 { font-size: 26px; margin-bottom: 14px; }
.rows { display: grid; gap: 2px; }
.rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 54px; padding: 8px 12px; margin: 0 -12px; border-radius: var(--r-sm); transition: background-color .2s; }
.rows li:hover { background: var(--oat); }
.rows li:has(> a) { display: block; padding: 0; }
.rows li > a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 54px; padding: 8px 12px; }
.rows li > a:hover .r-title { color: var(--brand); }
.r-cat { font-size: 12px; font-weight: 700; color: var(--brand); background: var(--sage); padding: 3px 0; border-radius: 999px; text-align: center; }
.r-title { font-size: 15.5px; font-weight: 550; }
.r-date { font-size: var(--meta); color: var(--ink-70); white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.r-date svg { width: 13px; height: 13px; }

/* call to action */
.cta-band { padding: 0; background: var(--brand); }
.cta-inner { background: transparent; color: var(--on-brand); border-radius: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 56px 60px; max-width: calc(var(--maxw) - 2 * var(--m)); }
.cta-band .wrap.cta-inner { margin: 0 auto; }
.cta-inner h2 { font-size: 40px; color: var(--on-brand); }
.cta-inner p { color: var(--on-brand-70); margin-top: 10px; font-size: 16.5px; }
.cta-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.c-dl { margin-top: 30px; display: grid; gap: 8px; }
.c-dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 18px; background: var(--surface); border-radius: var(--r-md); font-size: 15.5px; }
.c-dl dt { font-weight: 700; color: var(--brand); }
.c-dl a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(42,73,57,.3); }
.c-form { display: grid; gap: 18px; background: var(--surface); border-radius: var(--r-xl); padding: 40px; }
.f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-row { display: grid; gap: 8px; }
.f-row label { font-size: 14.5px; font-weight: 650; }
.f-row label small { font-weight: 500; color: var(--ink-70); }
.f-row input, .f-row select, .f-row textarea { width: 100%; min-height: 50px; border: 1px solid transparent; background: var(--oat); padding: 12px 16px; font-size: 16px; border-radius: var(--r-sm); outline: none; transition: border-color .2s, background-color .2s; }
.f-row textarea { min-height: 132px; resize: vertical; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { border-color: var(--brand); background: var(--surface); }
.c-form .btn { justify-self: start; }
.c-note { font-size: 14.5px; color: var(--brand); min-height: 1.4em; }

/* footer */
.ft { background: var(--night); color: var(--on-brand); padding: 64px 0 40px; margin-top: 0; border-radius: 0; }
.ft-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; }
.ft-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.ft-logo img { height: 24px; width: auto; }
.ft-logo span { font-size: 14px; font-weight: 650; background: rgba(251,246,238,.14); padding: 3px 12px; border-radius: 999px; }
.ft-family select { width: 240px; height: 46px; padding: 0 42px 0 18px; background: rgba(251,246,238,.12); color: var(--on-brand); border: 0; border-radius: 999px; font-size: 14.5px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF6EE' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; }
.ft-family option { color: var(--ink); }
.ft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 30px 32px; background: rgba(251,246,238,.07); border-radius: var(--r-lg); }
.ft-h { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.ft-col li a { display: inline-block; padding: 3px 0; font-size: 14px; color: var(--on-brand-70); }
.ft-col li a:hover { color: var(--on-brand); }
.ft-info { padding-top: 28px; display: grid; gap: 10px; }
.ft-info p { font-size: 13.5px; line-height: 1.75; color: var(--on-brand-70); }
.ft-info b { color: var(--on-brand); margin-right: 14px; }
.ft-info span { display: inline-block; margin-right: 14px; }
.ft-info a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(251,246,238,.35); }
.ft-note { max-width: 92ch; }
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 200; width: 50px; height: 50px; border-radius: 50%; background: var(--surface); color: var(--brand); display: grid; place-items: center; box-shadow: var(--soft); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } /* taste-skill-ignore: floating control */
.to-top svg { width: 20px; height: 20px; }
.show-top .to-top { opacity: 1; visibility: visible; }

/* sub pages */
.subv { position: relative; height: clamp(460px, 66vh, 660px); margin: 0; border-radius: 0; color: var(--on-brand); overflow: hidden; background: var(--brand-deep); }
.subv-img { position: absolute; inset: 0; }
.subv-img img { width: 100%; height: 100%; object-fit: cover; }
.subv-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30,26,20,.62), rgba(30,26,20,.12) 70%); } /* taste-skill-ignore: neutral scrim under the page title */
.subv-copy { position: absolute; left: 0; right: 0; bottom: 56px; }
.subv h1 { font-size: 72px; color: var(--on-brand); }
.subv-desc { font-size: 18px; margin-top: 10px; color: rgba(251,246,238,.92); max-width: 40em; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--meta); color: rgba(251,246,238,.8); margin-top: 18px; }
.crumb a:hover { color: var(--on-brand); text-decoration: underline; }
.crumb-cap { margin-left: auto; }
.lnb { position: sticky; top: var(--hh); z-index: 200; background: var(--ground); padding: 12px 0; }
.lnb ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lnb ul::-webkit-scrollbar { display: none; }
.lnb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--ink-70); white-space: nowrap; background: var(--surface); transition: background-color .2s, color .2s; }
.lnb a:hover { background: var(--oat); color: var(--ink); }
.lnb a.is-current { background: var(--brand); color: var(--on-brand); }

.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: center; }
.split.rev > :first-child { order: 2; }
.pic { position: relative; overflow: hidden; background: var(--oat); aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.pic img, .pic video { width: 100%; height: 100%; object-fit: cover; }
.pic--tall { aspect-ratio: 4 / 5; }
.pic--wide { aspect-ratio: 1400 / 990; }
.pic figcaption { position: absolute; left: 14px; bottom: 14px; padding: 5px 13px; border-radius: 999px; background: rgba(251,246,238,.9); color: var(--ink); font-size: var(--meta); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
.steps li { background: var(--sage); border-radius: var(--r-md); padding: 20px; display: grid; gap: 6px; }
.steps b { font-family: var(--serif); font-size: 18px; color: var(--brand); }
.steps span { font-size: 14.5px; color: var(--ink-70); line-height: 1.6; }

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.value { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.value figure { aspect-ratio: 4 / 3; overflow: hidden; margin: 10px 10px 0; border-radius: calc(var(--r-lg) - 8px); }
.value img { width: 100%; height: 100%; object-fit: cover; }
.value h3 { padding: 20px 22px 0; font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--brand); }
.value p { padding: 8px 22px 24px; font-size: 15.5px; color: var(--ink-70); }

.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.principle { background: rgba(251,246,238,.08); border-radius: var(--r-lg); padding: 28px 30px; }
.principle h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--on-brand); }
.principle p { font-size: 15.5px; line-height: 1.75; color: var(--on-brand-70); margin-top: 10px; }
.principle .src { display: inline-flex; align-items: center; gap: 6px; font-size: var(--meta); color: var(--on-brand-70); margin-top: 12px; min-height: 32px; }
.principle .src svg { width: 12px; height: 12px; }
.principle .src:hover { color: var(--on-brand); text-decoration: underline; }

.craft { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.craft img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); background: var(--oat); }
.craft figcaption { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-top: 12px; color: var(--brand); padding-left: 6px; }

.timeline { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
.tl-item { flex: 0 0 min(80vw, 300px); scroll-snap-align: start; background: var(--surface); border-radius: var(--r-lg); padding: 28px 24px; }
.tl-year { font-family: var(--serif); font-size: 36px; font-weight: 700; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.tl-item.is-jt { background: var(--sage); }
.tl-item p { font-size: 15px; line-height: 1.7; margin-top: 14px; }
.tl-item .src { display: inline-flex; align-items: center; gap: 6px; font-size: var(--meta); color: var(--ink-70); margin-top: 12px; }
.tl-item .src svg { width: 12px; height: 12px; }

.ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-tile { aspect-ratio: 16 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border-radius: var(--r-xl); }
.ui-tile img { width: 44%; height: auto; }
.ui-tile span { font-size: var(--meta); }
.ui-tile--light { background: var(--surface); color: var(--ink-70); }
.ui-tile--dark { background: var(--brand); color: var(--on-brand-70); }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatches li { aspect-ratio: 1 / .8; background: var(--sc); color: var(--si); padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; font-size: var(--meta); border-radius: var(--r-md); }
.swatches b { font-size: 15px; }
.ui-rows { background: var(--surface); border-radius: var(--r-xl); padding: 26px 30px; display: grid; gap: 12px; align-content: center; }
.ui-rows li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; font-size: 16px; }
.ui-rows b { color: var(--brand); }

.months-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }
.mg-pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--oat); border-radius: var(--r-lg); }
.mg-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.months-grid figure:hover .mg-pic img { transform: scale(1.04); }
.months-grid figcaption { display: grid; gap: 4px; margin-top: 14px; font-size: 14.5px; color: var(--ink-70); padding-left: 4px; }
.months-grid figcaption b { font-family: var(--serif); font-size: 17px; color: var(--brand); }
.mg-play { color: var(--ink); }

/* seasonal table */
.season { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.s-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); transition: opacity .35s; background: var(--oat); }
.s-img img.is-out { opacity: 0; }
.s-img figcaption { font-size: var(--meta); color: var(--ink-70); margin-top: 12px; padding-left: 8px; }
.s-intro { font-size: 16px; color: var(--ink-70); margin-top: 14px; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
.months button { min-height: 44px; border: 0; border-radius: 999px; background: var(--surface); font-size: 14.5px; font-weight: 650; transition: background-color .2s, color .2s; }
.months button:hover { background: var(--oat-2); }
.months button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.s-body { margin-top: 28px; }
.s-season { font-size: 14px; font-weight: 700; color: var(--honey); }
.s-body h3 { font-family: var(--serif); font-size: 27px; font-weight: 700; margin-top: 4px; }
.s-desc { font-size: 16px; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-70); background: var(--surface); padding: 4px 12px 4px 6px; border-radius: 999px; }
.chips i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); display: inline-block; outline: 1px solid var(--ink-12); outline-offset: -1px; }
.s-play { font-family: var(--serif); font-size: 18px; line-height: 1.65; margin-top: 16px; color: var(--brand); font-weight: 700; }
.s-brands { font-size: 14.5px; color: var(--ink-70); margin-top: 10px; }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }

.facts-dl { margin-top: 28px; display: grid; gap: 8px; }
.facts-dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 18px; background: var(--surface); border-radius: var(--r-md); font-size: 15.5px; }
.facts-dl dt { font-weight: 700; color: var(--brand); }
.actions { margin-top: 28px; }
.plist { margin-top: 28px; display: grid; gap: 8px; }
.plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 16px 20px; align-items: center; background: var(--oat); border-radius: var(--r-md); }
.plist li b { font-size: 16.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plist li span { grid-column: 1; font-size: 15px; color: var(--ink-70); }
.plist li .link-arrow { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; }
.plist--dark li { background: rgba(251,246,238,.08); }
.plist--dark li b { color: var(--on-brand); }
.plist--dark li span { color: var(--on-brand-70); }
.tag { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); }
.plist--dark .tag { background: var(--on-brand); color: var(--brand); }
.tag--plan { background: var(--oat-2); color: var(--ink); }
.plist--dark .tag--plan { background: rgba(251,246,238,.2); color: var(--on-brand); }

.gallery4, .gallery3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gallery3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.gallery4 img, .gallery3 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--oat); }
.gallery4 figcaption, .gallery3 figcaption { font-size: var(--meta); color: var(--ink-70); margin-top: 10px; padding-left: 6px; }

.biz-list { padding-bottom: var(--sec); }
.biz { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; padding: 64px 0; }
.biz h2 { font-size: 30px; color: var(--brand); }
.b-left p { font-size: 16px; color: var(--ink-70); margin-top: 12px; max-width: 34ch; }
.b-left .pic { margin-top: 24px; max-width: 360px; }
.btable { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; align-self: start; }
.btable th, .btable td { text-align: left; padding: 15px 16px; font-size: 15.5px; vertical-align: top; border-bottom: 1px solid var(--ink-12); }
.btable tr:last-child th, .btable tr:last-child td { border-bottom: 0; }
.btable th { width: 92px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; background: var(--sage); }
.btable td:nth-child(2) { font-weight: 650; width: 34%; }
.btable td:nth-child(3) { color: var(--ink-70); }

/* brands */
.index-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.idx-list { display: grid; gap: 6px; }
.idx-list li { border-radius: var(--r-md); transition: background-color .2s; }
.idx-list li.is-on, .idx-list li:hover { background: var(--surface); }
.idx-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 14px 18px; }
.idx-row .d { font-size: 13.5px; font-weight: 700; color: var(--honey); }
.idx-row .p { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.idx-row .p small { font-family: var(--font); font-size: 13px; color: var(--ink-70); margin-left: 8px; font-weight: 500; }
.idx-row .k { font-size: 14px; color: var(--ink-70); }
.idx-row .inline-pic { display: none; }
.idx-list li.is-on .idx-row .p { color: var(--brand); }
.idx-frame { position: sticky; top: calc(var(--hh) + 90px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--oat); border-radius: var(--r-xl); margin: 0; }
.idx-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.idx-frame img.is-on { opacity: 1; }
.idx-frame figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; padding: 8px 14px; border-radius: var(--r-sm); background: rgba(251,246,238,.92); color: var(--ink); font-size: var(--meta); font-weight: 600; }

.brand { padding: 96px 0; scroll-margin-top: calc(var(--hh) + 72px); }
.brand.bg-ivory { background: var(--oat); }
.brand-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.brand-logo { min-height: 60px; display: flex; align-items: center; margin-bottom: 22px; }
.bc-logo { max-height: 56px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.bc-logo--jt { display: inline-flex; align-items: center; gap: 10px; }
.bc-logo--jt img { height: 20px; width: auto; }
.bc-logo--jt em { font-style: normal; font-size: 19px; font-weight: 700; color: var(--brand); }
.brand h2 { font-size: 38px; }
.brand-en { font-size: 14px; font-weight: 650; color: var(--honey); margin-top: 4px; }
.brand-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.brand-facts div { padding: 10px 16px; display: grid; gap: 0; background: var(--surface); border-radius: var(--r-md); }
.sec .brand-facts div, .brand:not(.bg-ivory) .brand-facts div { background: var(--oat); }
.brand.bg-ivory .brand-facts div { background: var(--surface); }
.brand-facts dt { font-size: 12px; color: var(--honey); font-weight: 700; }
.brand-facts dd { font-size: 15px; font-weight: 650; }
.brand-story { font-family: var(--serif); font-size: 19px; line-height: 1.7; margin-top: 24px; color: var(--brand); font-weight: 700; }
.brand-dl { margin-top: 22px; display: grid; gap: 14px; }
.brand-dl div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; font-size: 15.5px; line-height: 1.75; }
.brand-dl dt { font-weight: 700; color: var(--brand); }
.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.brand-media { display: grid; gap: 14px; }
.brand-hero { aspect-ratio: 16 / 10; overflow: hidden; background: var(--oat); margin: 0; border-radius: var(--r-xl); }
.brand-hero img { width: 100%; height: 100%; object-fit: cover; }
.brand-hero.is-contain { background: var(--surface); }
.brand-hero.is-contain img { object-fit: contain; padding: 6%; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.spec { background: var(--surface); border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; transition: transform .3s var(--ease); }
.brand:not(.bg-ivory) .spec { background: var(--oat); }
.spec:hover { transform: translateY(-3px); }
.spec:hover .sp-name { color: var(--brand); }
.sp-img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 10%; }
.sp-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sp-name { font-size: 14px; font-weight: 650; padding: 0 16px 16px; }
.brand-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.brand-gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--oat); }

.otable { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.otable th, .otable td { text-align: left; padding: 16px 18px; font-size: 16px; border-bottom: 1px solid var(--ink-12); vertical-align: top; }
.otable tr:last-child th, .otable tr:last-child td { border-bottom: 0; }
.otable th { width: 132px; font-weight: 700; color: var(--brand); background: var(--sage); }
.otable a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(42,73,57,.3); }

.hist { display: grid; gap: 40px; }
.hist-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px 56px; }
.hist-dec { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--brand); }
.hist-list { display: grid; gap: 8px; }
.hist-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 64px; gap: 18px; align-items: center; padding: 12px 14px 12px 20px; background: var(--surface); border-radius: var(--r-md); }
.sec:not(.bg-tint):not(.bg-ivory) .hist-list li { background: var(--oat); }
.hy { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.ht b { font-size: 16.5px; font-weight: 650; }
.ht p { font-size: 15px; color: var(--ink-70); margin-top: 2px; }
.hp { width: 64px; height: 64px; overflow: hidden; background: var(--oat); border-radius: var(--r-sm); }
.hp img { width: 100%; height: 100%; object-fit: cover; }

.family { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fam { background: var(--oat); border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.bg-tint .fam, .bg-ivory .fam { background: var(--surface); }
.fam h3 { font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--brand); }
.fam p { font-size: 15.5px; color: var(--ink-70); flex: 1; }
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.place { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; padding-bottom: 26px; }
.place figure { aspect-ratio: 16 / 10; overflow: hidden; margin: 10px 10px 0; border-radius: calc(var(--r-xl) - 10px); }
.place figure img { width: 100%; height: 100%; object-fit: cover; }
.place h3 { padding: 22px 24px 0; font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--brand); }
.place p { font-size: 15.5px; padding: 8px 24px 0; }

/* reveal: gentle rise on first appearance */
.rv-ready [data-rv] { opacity: 0; transform: translateY(16px); }
.rv-ready [data-rv].is-in { opacity: 1; transform: none; transition: opacity .7s ease-out, transform .7s var(--ease); transition-delay: var(--d, 0s); }
.rv-ready [data-rv="mask"] { transform: none; }

/* responsive */
@media (max-width: 1180px) {
  .gnb, .hd-mall, .hd-util .btn--line { display: none; }
  .menu-btn { display: inline-flex; }
  .hd-util { margin-left: auto; }
  .mega { display: none; }
  .logo-grid, .logo-grid--own { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .intro, .field, .board2, .contact, .split, .index-wrap, .season, .biz, .brand-grid, .hist-group { grid-template-columns: 1fr; gap: 36px; }
  .split.rev > :first-child { order: 0; }
  .areas, .values { grid-template-columns: 1fr 1fr; }
  .materials { grid-template-columns: 1fr 1fr; }
  .mat:nth-child(3) { grid-column: 1 / -1; }
  .figures--plain { grid-template-columns: 1fr 1fr; }
  .milestones { grid-template-columns: 1fr 1fr; }
  .principles3 { grid-template-columns: 1fr; }
  .craft { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .months-grid, .gallery4 { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr; }
  .ui-grid, .family, .places { grid-template-columns: 1fr; }
  .idx-frame { display: none; }
  .idx-row { grid-template-columns: minmax(0, 1fr) 72px; grid-template-areas: "d pic" "p pic" "k pic"; column-gap: 16px; row-gap: 2px; align-items: start; }
  .idx-row .d { grid-area: d; } .idx-row .p { grid-area: p; } .idx-row .k { grid-area: k; }
  .idx-row .inline-pic { grid-area: pic; display: block; width: 72px; height: 72px; overflow: hidden; align-self: center; border-radius: var(--r-sm); }
  .idx-row .inline-pic img { width: 100%; height: 100%; object-fit: cover; }
  .subv { height: 440px; }
  .subv h1 { font-size: 48px; }
  .cta-inner { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .quick-grid { grid-template-columns: 1fr; gap: 8px; }
  .quick b { font-size: 17px; }
  .quick span { font-size: 14px; margin-top: 2px; }
  .intro h2 { font-size: 24px; }
  .figures { grid-template-columns: 1fr; }
  .areas, .values, .materials { grid-template-columns: 1fr; }
  .mat:nth-child(3) { grid-column: auto; }
  .logo-grid, .logo-grid--own { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lg-logo { height: 96px; }
  .field-list li { grid-template-columns: 1fr; }
  .fl-date { grid-row: auto; justify-self: start; margin-bottom: 4px; }
  .milestones { grid-template-columns: 1fr; }
  .board { padding: 24px 20px 18px; }
  .rows li, .rows li > a { grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; }
  .r-date { grid-column: 2; }
  .cta-inner h2 { font-size: 25px; }
  .steps { grid-template-columns: 1fr; }
  .craft { grid-template-columns: 1fr 1fr; }
  .months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .specs, .brand-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sp-name { font-size: 12.5px; padding: 0 8px 10px; }
  .f-2 { grid-template-columns: 1fr; }
  .c-form { padding: 24px 20px; }
  .subv { height: 400px; }
  .subv h1 { font-size: 38px; }
  .subv-desc { font-size: 16px; }
  .crumb-cap { display: none; }
  .btable th, .btable td { padding: 12px 10px; font-size: 14.5px; }
  .btable th { width: 60px; }
  .otable, .otable tbody, .otable tr { display: block; }
  .otable tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .otable th, .otable td { width: auto; padding: 12px; font-size: 15px; }
  .ft-grid { grid-template-columns: 1fr 1fr; padding: 22px; }
  .ft-family, .ft-family select { width: 100%; }
  .hist-list li { grid-template-columns: 56px minmax(0, 1fr) 52px; gap: 12px; padding: 10px 12px; }
  .hp { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .rv-ready [data-rv] { opacity: 1 !important; transform: none !important; }
}


/* ===== lux layer: the parts that are new in this version ===== */

/* hero: full-bleed and cinematic */
.hero { position: relative; height: 100svh; min-height: 660px; max-height: 1100px; overflow: hidden; background: var(--night); color: var(--on-brand); }
.hero-media { position: absolute; inset: 0; }
.hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hs.is-on { opacity: 1; }
.hs img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.74) saturate(.92) contrast(1.05); transform: scale(1.08); transition: transform 9s linear; }
.hs.is-on img { transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 11, 9, .9) 0%, rgba(8, 11, 9, .25) 50%, rgba(8, 11, 9, .5) 100%), linear-gradient(90deg, rgba(8, 11, 9, .55) 0%, rgba(8, 11, 9, 0) 62%); } /* taste-skill-ignore: neutral photo scrim under the hero type */
.hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(132px, 18vh, 200px); }
.hero h1 { font-size: clamp(56px, 7.2vw, 120px); line-height: 1.04; letter-spacing: -0.045em; color: #fff; max-width: 8em; }
.hero-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.8; color: rgba(243, 240, 233, .78); max-width: 35em; margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.hero .btn { background: var(--brass); color: var(--night); }
.hero .btn:hover { background: var(--brass-2); }
.hero .btn--ghost { background: rgba(243, 240, 233, .12); color: var(--on-brand); }
.hero .btn--ghost:hover { background: rgba(243, 240, 233, .22); }
.hero-bar { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; align-items: center; gap: 24px; }
.hero-cap { flex: 1; font-size: var(--meta); color: rgba(243, 240, 233, .55); }
.hero-dots { display: flex; gap: 6px; }
.hero-dots button { width: 56px; height: 32px; border: 0; padding: 0; background: transparent; display: flex; align-items: center; }
.hero-dots i { display: block; width: 100%; height: 2px; background: rgba(243, 240, 233, .25); position: relative; overflow: hidden; }
.hero-dots i::after { content: ""; position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; }
.hero-dots button[aria-pressed="true"] i::after { animation: heroProg 7s linear forwards; }
.hero:has([data-pause][aria-pressed="true"]) .hero-dots button[aria-pressed="true"] i::after { animation: none; transform: scaleX(1); }
@keyframes heroProg { to { transform: scaleX(1); } }
.hero-btns { display: flex; gap: 6px; }
.hero-btns button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(243, 240, 233, .12); color: var(--on-brand); display: grid; place-items: center; transition: background-color .25s; }
.hero-btns button:hover { background: rgba(243, 240, 233, .22); }
.hero-btns button[aria-pressed="true"] { background: var(--brass); color: var(--night); }
.hero-btns svg { width: 16px; height: 16px; }

/* brand marquee on the stone ground */
.marq { background: var(--ground); padding: 64px 0; overflow: hidden; }
.marq-track { display: flex; width: max-content; animation: marq 70s linear infinite; }
.marq-track ul { display: flex; align-items: center; gap: clamp(56px, 6vw, 112px); padding-right: clamp(56px, 6vw, 112px); }
.marq img { height: 36px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .82; transition: filter .3s, opacity .3s; }
.marq li:hover img { filter: none; opacity: 1; }
.marq:hover .marq-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }

/* intro and figures */
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px 96px; align-items: end; }
.intro h2 { font-size: clamp(36px, 3.9vw, 64px); line-height: 1.16; }
.intro .lead { max-width: 40em; }
.intro .figures { display: grid; grid-template-columns: 1fr; gap: 10px; }
.intro .figures li { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); column-gap: 28px; align-items: baseline; padding: 24px 28px; background: var(--surface); border-radius: var(--r-lg); transform: none; }
.intro .figures b { grid-row: span 2; font-family: var(--en); font-size: clamp(44px, 3.8vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.intro .figures b small { font-family: var(--font); font-size: 16px; font-weight: 600; margin-left: 4px; letter-spacing: 0; color: var(--ink-70); }
.intro .figures li > span { font-size: 16px; font-weight: 600; color: var(--ink); }
.intro .figures em { font-style: normal; font-size: var(--meta); color: var(--ink-70); }

/* scroll stage: pinned while four photographs change */
.stage { position: relative; background: var(--night); color: var(--on-brand); }
.js .stage { height: 400vh; }
.stage-sticky { position: relative; min-height: 100svh; }
.js .stage-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.stage-media { position: absolute; inset: 0; }
.stage-media figure { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.stage-media figure.is-on { opacity: 1; }
.stage-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); transform: scale(1.06); transition: transform 2.4s var(--ease); }
.stage-media figure.is-on img { transform: scale(1); }
.stage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 11, 9, .92) 0%, rgba(8, 11, 9, .6) 46%, rgba(8, 11, 9, .15) 100%); } /* taste-skill-ignore: neutral photo scrim under the stage text */
.stage-inner { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto; column-gap: 64px; padding-top: calc(var(--hh) + 48px); padding-bottom: 48px; }
.stage-title { grid-column: 1 / -1; font-size: clamp(30px, 2.8vw, 46px); color: #fff; }
.stage-list { grid-column: 1; grid-row: 2; align-self: center; position: relative; }
.js .stage-list { min-height: 320px; }
.stage-list li { padding: 32px 0; }
.js .stage-list li { position: absolute; left: 0; right: 0; top: 50%; padding: 0; opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 24px)); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.js .stage-list li.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stage-list h3 { font-size: clamp(44px, 4.6vw, 80px); font-weight: 700; line-height: 1.08; letter-spacing: -0.045em; color: #fff; }
.stage-list p { font-size: 17.5px; line-height: 1.8; color: rgba(243, 240, 233, .78); max-width: 32em; margin-top: 22px; }
.stage-list .link-arrow { margin-top: 18px; color: var(--brass); }
.stage-list .link-arrow svg { background: rgba(243, 240, 233, .12); color: var(--brass); }
.stage-index { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; display: grid; gap: 2px; min-width: 260px; }
.stage-index button { width: 100%; display: flex; align-items: baseline; gap: 16px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: rgba(243, 240, 233, .5); font-size: 16px; font-weight: 600; text-align: left; transition: color .3s; }
.stage-index button:hover { color: var(--on-brand); }
.stage-index button[aria-current="step"] { color: #fff; }
.stage-prog { grid-column: 1 / -1; grid-row: 3; height: 2px; background: rgba(243, 240, 233, .16); margin-top: 32px; }
.stage-prog i { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; }

/* brand collection: real products on a gallery wall, the brand scene on hover */
.gm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gm-grid a { display: block; }
.gm-img { position: relative; aspect-ratio: 4 / 5; background: #E6E3DC; border-radius: var(--r-lg); overflow: hidden; }
.gm-img img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.gm-p { object-fit: contain; padding: 14%; mix-blend-mode: multiply; }
.gm-l { object-fit: cover; opacity: 0; transform: scale(1.04); }
.gm-grid a:hover .gm-l, .gm-grid a:focus-visible .gm-l { opacity: 1; transform: none; }
.gm-grid a:hover .gm-p, .gm-grid a:focus-visible .gm-p { opacity: 0; }
.gm-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 4px 0; }
.gm-name b { font-family: var(--en); font-size: 14px; font-weight: 600; letter-spacing: .12em; }
.gm-name span { font-size: 13.5px; color: var(--ink-70); }
.sec-more { margin-top: 40px; display: flex; justify-content: flex-end; }

/* calls to action and sub-page banners */
.cta-band .cta-inner { padding-top: 96px; padding-bottom: 96px; }
.subv { color: var(--on-brand); }
.subv-scrim { background: linear-gradient(0deg, rgba(8, 11, 9, .84) 0%, rgba(8, 11, 9, .22) 55%, rgba(8, 11, 9, .56) 100%); } /* taste-skill-ignore: neutral photo scrim under the banner type */
.subv h1 { letter-spacing: -0.045em; }
.sec-head h2 { letter-spacing: -0.04em; }

@media (max-width: 1180px) {
  .gm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-index { display: none; }
  .stage-inner { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .hero h1 { font-size: clamp(48px, 9vw, 76px); }
  .intro { grid-template-columns: 1fr; gap: 40px; }
  .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .quick a { padding: 22px 20px; min-height: 0; }
  .cta-band .cta-inner { padding-top: 72px; padding-bottom: 72px; }
  .stage-shade { background: linear-gradient(0deg, rgba(8, 11, 9, .94) 0%, rgba(8, 11, 9, .6) 55%, rgba(8, 11, 9, .4) 100%); } /* taste-skill-ignore: neutral photo scrim under the stage text */
  .stage-list { align-self: end; }
}
@media (max-width: 640px) {
  .hero { min-height: 600px; }
  .hero-copy { bottom: 112px; }
  .hero h1 { font-size: 46px; }
    .hero-lead { font-size: 15.5px; margin-top: 18px; }
  .hero-actions { margin-top: 26px; gap: 8px; }
  .hero-actions .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
  .hero-bar { bottom: 22px; gap: 12px; }
  .hero-cap { display: none; }
  .hero-dots { flex: 1; }
  .hero-dots button { width: 36px; }
  .quick-grid { grid-template-columns: 1fr; gap: 6px; }
  .quick a { padding: 18px; }
  .marq { padding: 40px 0; }
  .marq img { height: 30px; }
  .intro h2 { font-size: 30px; }
  .intro .figures li { grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; padding: 18px 20px; }
  .intro .figures b { font-size: 40px; }
  .stage-inner { padding-top: calc(var(--hh) + 28px); padding-bottom: 28px; }
  .stage-title { font-size: 26px; }
  .stage-list h3 { font-size: 40px; }
  .stage-list p { font-size: 15.5px; margin-top: 16px; }
  .js .stage-list { min-height: 360px; }
  .gm-name { flex-direction: column; gap: 2px; padding-top: 12px; }
  .gm-name b { font-size: 12.5px; }
  .cta-inner h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs img, .stage-media img { transform: none !important; }
  .marq-track { animation: none !important; }
}

/* ===== v2 components: scale, business map, brand wall, product river, education, field wall, standards ===== */
:root { --accent: #D6B57E; --accent-ink: #0B0F0D; --chip: #E4E8E1; }

/* scale band */
.scale { background: var(--night); color: var(--on-brand); padding: 64px 0 96px; }
.scale-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.scale-head h2 { font-size: clamp(30px, 3vw, 48px); color: #fff; }
.scale-head p { font-size: 15px; color: var(--on-brand-70); max-width: 34em; }
.scale-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scale-grid li { background: var(--night-2); border-radius: var(--r-lg); padding: 28px 28px 26px; display: grid; gap: 10px; align-content: start; min-height: 184px; }
.scale-grid b { font-family: var(--en); font-size: clamp(48px, 4.4vw, 76px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.scale-grid b small { font-family: var(--font); font-size: 18px; font-weight: 700; margin-left: 4px; color: var(--accent); letter-spacing: 0; }
.scale-grid span { font-size: 16px; font-weight: 600; }
.scale-grid em { font-style: normal; font-size: 13px; line-height: 1.55; color: var(--on-brand-70); }

/* business map: a bento of real photographs */
.bizmap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 12px; }
.bm { position: relative; grid-column: span 3; border-radius: var(--r-lg); overflow: hidden; background: var(--night); color: #fff; isolation: isolate; }
.bm--xl { grid-column: span 6; grid-row: span 2; }
.bm--wide { grid-column: span 6; }
.bm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.bm::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 11, 9, .86) 0%, rgba(8, 11, 9, .32) 48%, rgba(8, 11, 9, .06) 100%); } /* taste-skill-ignore: photo scrim under the tile text */
.bm a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 26px 24px; }
.bm h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.bm--xl h3 { font-size: clamp(30px, 2.6vw, 42px); }
.bm p { font-size: 14.5px; line-height: 1.6; color: rgba(243, 240, 233, .82); margin-top: 8px; max-width: 32em; }
.bm .bm-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent); }
.bm .bm-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.bm:hover img { transform: scale(1.045); }
.bm:hover .bm-go svg { transform: translateX(4px); }

/* brand wall */
.bwall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bwall a { display: grid; grid-template-rows: 1fr auto; gap: 12px; aspect-ratio: 5 / 4; background: var(--surface); border-radius: var(--r-lg); padding: 20px 20px 18px; transition: background-color .3s var(--ease); }
.bwall a:hover { background: var(--sage); }
.bwall img { align-self: center; justify-self: center; max-height: 58px; max-width: 70%; width: auto; object-fit: contain; }
.bwall p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-70); }
.bwall p b { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.bwall .is-own { background: var(--brand); color: var(--on-brand); }
.bwall .is-own:hover { background: var(--brand-deep); }
.bwall .is-own p, .bwall .is-own p b { color: var(--on-brand); }
.bwall .is-own img { filter: brightness(0) invert(1); }
.bwall-past { margin-top: 28px; font-size: 15px; line-height: 1.8; color: var(--ink-70); max-width: 72em; }
.bwall-past b { color: var(--ink); font-weight: 600; margin-right: 8px; }

/* product river: two rows that drift in opposite directions */
.river { overflow: hidden; display: grid; gap: 12px; padding: 4px 0; }
.river-row { display: flex; width: max-content; gap: 12px; animation: river 90s linear infinite; }
.river-row--rev { animation-direction: reverse; animation-duration: 110s; }
.river:hover .river-row { animation-play-state: paused; }
.river figure { width: 216px; flex: none; background: var(--surface); border-radius: var(--r-lg); padding: 14px 14px 16px; }
.river img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.river figcaption { font-size: 13.5px; line-height: 1.45; margin-top: 10px; color: var(--ink); }
.river figcaption span { display: block; font-family: var(--en); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-70); margin-bottom: 3px; }
@keyframes river { to { transform: translateX(-50%); } }

/* education and lectures */
.edu-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.edu-media { position: sticky; top: calc(var(--hh) + 32px); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--oat); }
.edu-media img { width: 100%; height: 100%; object-fit: cover; }
.edu-media figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(11, 15, 13, .72); color: #fff; font-size: 13px; }
.edu-list { display: grid; gap: 8px; }
.edu-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--surface); border-radius: var(--r-md); padding: 18px 22px; }
.edu-date { font-family: var(--en); font-size: 14px; font-weight: 600; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.edu-title { font-size: 16.5px; font-weight: 600; line-height: 1.5; }
.edu-title small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-70); margin-top: 2px; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--chip); color: var(--brand); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* field wall */
.fwall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 10px; }
.fwall figure { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--oat); }
.fwall figure.is-big { grid-column: span 2; grid-row: span 2; }
.fwall figure.is-wide { grid-column: span 2; }
.fwall img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.fwall figure:hover img { transform: scale(1.04); }
.fwall figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(11, 15, 13, .74); color: #fff; font-size: 13px; line-height: 1.45; }
.fwall figcaption b { display: block; font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--accent); }

/* standards */
.std { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.std li { background: var(--surface); border-radius: var(--r-lg); padding: 30px 30px 32px; }
.std svg { width: 34px; height: 34px; color: var(--brand); }
.std h3 { margin-top: 20px; font-size: 20px; font-weight: 700; }
.std p { margin-top: 8px; font-size: 15.5px; line-height: 1.7; color: var(--ink-70); }

@media (max-width: 1180px) {
  .scale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bizmap { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bm, .bm--wide { grid-column: span 3; }
  .bm--xl { grid-column: span 6; grid-row: span 2; }
  .bwall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fwall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .edu-grid { grid-template-columns: 1fr; gap: 28px; }
  .edu-media { position: relative; top: 0; aspect-ratio: 16 / 10; }
  .bwall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .std { grid-template-columns: 1fr 1fr; }
  .scale-head { flex-direction: column; align-items: start; }
}
@media (max-width: 640px) {
  .scale { padding: 48px 0 64px; }
  .scale-grid li { min-height: 0; padding: 22px 20px; }
  .scale-grid b { font-size: 44px; }
  .bizmap { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 10px; }
  .bm, .bm--wide, .bm--xl { grid-column: auto; grid-row: auto; }
  .bm--xl { grid-row: span 1; }
  .bm h3, .bm--xl h3 { font-size: 22px; }
  .bwall { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bwall a { padding: 14px; }
  .bwall img { max-height: 40px; }
  .river figure { width: 156px; padding: 10px 10px 12px; }
  .river figcaption { font-size: 12.5px; }
  .edu-list li { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 18px; }
  .edu-date { grid-column: 1 / -1; }
  .fwall { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 8px; }
  .fwall figure.is-big { grid-column: 1 / -1; grid-row: span 2; }
  .fwall figure.is-wide { grid-column: 1 / -1; }
  .std { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .river-row { animation: none !important; }
}

/* ===== v2 edge layer: forest identity, one citron accent, bright corporate body ===== */
:root { --brass: #D7F75B; --brass-2: #E8FC9A; --accent: #D7F75B; --ground: #F6F5F0; --sage: #E8EDE5; --oat: #ECEBE4; --ink: #17251C; --ink-70: #526257; --ink-12: rgba(23, 37, 28, .1); --h2: 48px; }
@media (max-width: 960px) { :root { --h2: 36px; } }
@media (max-width: 640px) { :root { --h2: 30px; } }

.scale { background: var(--brand); }
.scale-grid li { background: rgba(243, 240, 233, .07); }
.scale-grid b i, .inst-facts b i { font-style: normal; }
.sec--tight { padding-bottom: 72px; }

/* three capability bundles */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cap { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; }
.cap-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cap-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cap:hover .cap-img img { transform: scale(1.025); }
.cap-img figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(11, 15, 13, .7); color: #fff; font-size: 12.5px; }
.cap h3 { padding: 26px 28px 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; }
.cap ul { padding: 0 12px 14px; display: grid; gap: 2px; }
.cap li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 14px 16px; border-radius: var(--r-md); transition: background-color .2s; }
.cap li a:hover { background: var(--sage); }
.cap li b { font-size: 16.5px; font-weight: 700; color: var(--brand); }
.cap li span { grid-column: 1; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.cap li svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; color: var(--brand); transition: transform .2s; }
.cap li a:hover svg { transform: translateX(3px); }

/* brand portfolio: own brands first, partners on a static wall */
.port-sub { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--ink); }
.own + .port-sub { margin-top: 56px; }
.own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.own-card { display: grid; grid-template-columns: 44% minmax(0, 1fr); background: var(--brand); color: var(--on-brand); border-radius: var(--r-xl); overflow: hidden; min-height: 270px; transition: background-color .3s var(--ease); }
.own-card:hover { background: var(--brand-deep); }
.own-card figure { background: #E9E7E1; display: grid; place-items: center; }
.own-card img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 12%; }
.own-text { padding: 26px 24px 24px; display: flex; flex-direction: column; }
.own-text h4 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.own-en { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--accent); margin-top: 4px; }
.own-text p:not(.own-en) { font-size: 14.5px; line-height: 1.65; color: var(--on-brand-70); margin-top: 12px; }
.own-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.own-go svg { width: 16px; height: 16px; }
.bwall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bwall a { aspect-ratio: auto; min-height: 150px; }

/* product river links */
.river a { display: block; flex: none; }
.stage-tag { display: inline-flex; margin-top: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(243, 240, 233, .14); color: #fff; font-size: 13px; }

/* institution supply */
.bg-sage { background: var(--sage); }
.inst { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips .chip { background: var(--surface); }
.inst-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.inst-media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.inst-media img { width: 100%; height: 100%; object-fit: cover; }
.inst-media figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(11, 15, 13, .72); color: #fff; font-size: 13px; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.flow li { position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 26px 26px 28px; }
.flow h3 { font-size: 19px; font-weight: 700; color: var(--brand); }
.flow p { font-size: 15px; line-height: 1.65; color: var(--ink-70); margin-top: 8px; }
.flow-next { position: absolute; right: -19px; top: 50%; transform: translateY(-50%); z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--accent); display: grid; place-items: center; }
.flow-next svg { width: 14px; height: 14px; }
.inst-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.inst-facts li { background: var(--brand); color: var(--on-brand); border-radius: var(--r-lg); padding: 24px 26px; display: grid; gap: 6px; }
.inst-facts b { font-family: var(--en); font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.inst-facts b small { font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--accent); margin-left: 4px; letter-spacing: 0; }
.inst-facts span { font-size: 15.5px; font-weight: 600; }
.inst-facts em { font-style: normal; font-size: 13px; color: var(--on-brand-70); }

/* stores and online */
.net { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.net-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.net-stores li { background: var(--surface); border-radius: var(--r-lg); padding: 24px 24px 22px; display: grid; gap: 8px; align-content: start; }
.net-stores h3 { font-size: 18px; font-weight: 700; }
.net-stores p { font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.net-stores .chip { justify-self: start; }
.net-online { display: grid; gap: 8px; }
.net-online a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; background: var(--brand); color: var(--on-brand); border-radius: var(--r-lg); padding: 20px 22px; transition: background-color .25s var(--ease); }
.net-online a:hover { background: var(--brand-deep); }
.net-online b { font-size: 16.5px; font-weight: 700; }
.net-online span { grid-column: 1; font-family: var(--en); font-size: 13px; color: var(--on-brand-70); }
.net-online svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--accent); }

@media (max-width: 1180px) {
  .caps { grid-template-columns: 1fr 1fr; }
  .caps .cap:last-child { grid-column: 1 / -1; }
  .caps .cap:last-child .cap-img { aspect-ratio: 16 / 7; }
  .own { grid-template-columns: 1fr; }
  .own-card { min-height: 220px; grid-template-columns: 34% minmax(0, 1fr); }
  .bwall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow-next { display: none; }
  .inst-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .caps { grid-template-columns: 1fr; }
  .caps .cap:last-child .cap-img { aspect-ratio: 4 / 3; }
  .inst, .net { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .cap h3 { font-size: 22px; padding: 22px 20px 6px; }
  .cap ul { padding: 0 6px 10px; }
  .own-card { grid-template-columns: 1fr; }
  .own-card figure { aspect-ratio: 16 / 10; }
  .bwall { grid-template-columns: 1fr 1fr; }
  .flow, .inst-facts, .net-stores { grid-template-columns: 1fr; }
  .flow { margin-top: 40px; }
  .inst-facts b { font-size: 38px; }
}

/* v2 polish: brighter real photos in the hero, stacked partner labels, steady section rhythm */
:root { --sec: 120px; }
@media (max-width: 960px) { :root { --sec: 88px; } }
@media (max-width: 640px) { :root { --sec: 64px; } }
.hs img { filter: brightness(.88) saturate(1) contrast(1.04); }
.hero-shade { background: linear-gradient(0deg, rgba(8, 11, 9, .86) 0%, rgba(8, 11, 9, .16) 52%, rgba(8, 11, 9, .36) 100%), linear-gradient(90deg, rgba(8, 11, 9, .5) 0%, rgba(8, 11, 9, 0) 60%); } /* taste-skill-ignore: neutral photo scrim under the hero type */
.bwall p { flex-direction: column; align-items: flex-start; gap: 2px; }
.inst-media, .cap-img, .edu-media { background: var(--oat); }
.own-card figure { position: relative; min-height: 0; overflow: hidden; }
.own-card img { position: absolute; inset: 0; }
@media (max-width: 640px) { .own-card figure { aspect-ratio: 16 / 9; } .own-card { min-height: 0; } }

/* ===== mobile optimisation: shorter page, swipe rails, 44px targets, quick bar ===== */
.m-cta, .edu-toggle { display: none; }
@media (max-width: 640px) {
  .hero-dots button { width: 40px; height: 44px; }
  .c-dl a { display: inline-block; padding: 10px 0; }
  .river figcaption span, .own-en, .fwall figcaption b, .r-cat { font-size: 12.5px; }
  .js .stage { height: 300vh; }
  .scale-grid { gap: 6px; }
  .scale-grid li { padding: 18px 16px 16px; gap: 6px; }
  .scale-grid b { font-size: 38px; }
  .scale-grid span { font-size: 14.5px; line-height: 1.45; }
  .scale-grid em { font-size: 12.5px; }
  .cap-img, .caps .cap:last-child .cap-img { aspect-ratio: 16 / 9; }
  .cap li a { padding: 12px 14px; }
  .own, .flow, .materials { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) 6px; scroll-padding-inline: var(--m); scrollbar-width: none; overscroll-behavior-x: contain; }
  .own::-webkit-scrollbar, .flow::-webkit-scrollbar, .materials::-webkit-scrollbar { display: none; }
  .own > *, .flow > *, .materials > * { scroll-snap-align: start; margin-top: 0; }
  .own-card { grid-template-columns: 1fr; }
  .bwall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bwall a { min-height: 112px; padding: 12px 10px 10px; gap: 8px; }
  .bwall img { max-height: 30px; max-width: 82%; }
  .bwall p b { font-size: 13px; }
  .bwall p span { font-size: 12px; line-height: 1.4; }
  .inst-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inst-facts li { padding: 18px 16px; }
  .inst-facts b { font-size: 32px; }
  .inst-facts span { font-size: 14.5px; }
  .inst-facts em { font-size: 12.5px; }
  .edu-list li.is-extra { display: none; }
  .edu-list.is-open li.is-extra { display: grid; }
  .edu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--sage); color: var(--brand); font-size: 15px; font-weight: 600; }
  .net-online { grid-template-columns: 1fr 1fr; }
  .net-online a { padding: 16px; }
  .net-online span { font-size: 12px; overflow-wrap: anywhere; }
  .net-stores li { padding: 18px; }
  .m-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 250; display: grid; grid-template-columns: 1fr 1.35fr; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(11, 15, 13, .94); box-shadow: 0 12px 30px rgba(8, 12, 10, .28); transform: translateY(150%); transition: transform .35s var(--ease); } /* taste-skill-ignore: sticky quick bar is a real overlay */
  .show-mcta .m-cta { transform: none; }
  .menu-open .m-cta { transform: translateY(150%); }
  .m-cta .btn { min-height: 46px; padding: 0 14px; justify-content: center; font-size: 14.5px; }
  .show-mcta .to-top { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .m-cta { transition: none; } }
.mm-foot a:not(.btn) { color: var(--on-brand); }
.mm-foot a:not(.btn):hover { color: var(--accent); }
.m-cta .btn { background: var(--accent); color: var(--night); }
.m-cta .btn--ghost { background: rgba(243, 240, 233, .12); color: var(--on-brand); }
@media (max-width: 640px) { .hero-btns [data-prev], .hero-btns [data-next] { display: none; } }
/* own-brand cards: trimmed high-resolution products fill the frame and drift gently */
.own-card img { padding: 7%; transition: transform .9s var(--ease); }
.own-card:hover img { transform: scale(1.05) translateY(-4px); }
@media (prefers-reduced-motion: no-preference) {
  .rv-ready .own-card[data-rv] figure img { animation: ownFloat 6s ease-in-out infinite alternate; }
  .rv-ready .own-card[data-rv]:nth-child(2) figure img { animation-delay: -2s; }
  .rv-ready .own-card[data-rv]:nth-child(3) figure img { animation-delay: -4s; }
}
@keyframes ownFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* brand hub: one card per dedicated brand page */
.hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hub--own { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-card { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--surface); border-radius: var(--r-xl); overflow: hidden; transition: background-color .3s var(--ease); }
.hub-card:hover { background: var(--sage); }
.hub-card figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--oat); }
.hub--own .hub-card figure { aspect-ratio: 16 / 10; }
.hub-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.hub-card:hover img { transform: scale(1.05); }
.hub-text { display: flex; flex-direction: column; padding: 20px 22px 22px; }
.hub-meta { font-size: 13px; color: var(--ink-70); }
.hub-card h3 { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hub-card h3 span { font-family: var(--en); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--b-accent); }
.hub-text > p:not(.hub-meta) { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.hub-go { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--b-accent); }
.hub-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.hub-card:hover .hub-go svg { transform: translateX(4px); }
@media (max-width: 1180px) { .hub, .hub--own { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hub, .hub--own { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hub > li { min-width: 0; }
  .hub--own { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) 6px; scrollbar-width: none; }
  .hub--own::-webkit-scrollbar { display: none; }
  .hub--own > li { scroll-snap-align: start; }
  .hub-text { padding: 14px 14px 16px; }
  .hub-card h3 { font-size: 17px; }
  .hub-card h3 span { font-size: 11.5px; }
  .hub:not(.hub--own) .hub-text > p:not(.hub-meta) { display: none; }
  .hub-meta { font-size: 12.5px; }
}
.hub-card figure.is-prod { background: #fff; }
.hub-card figure.is-prod img { object-fit: contain; padding: 8%; }

/* ===== company archive: full chronicle, import archive, press archive ===== */
.hist-type { display: inline-flex; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--sage); color: var(--brand); font-size: 11.5px; font-weight: 600; vertical-align: 2px; }
.hist-list li.no-pic { grid-template-columns: 72px minmax(0, 1fr); }
.imports-filter, .press-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.imports-filter button, .press-filter button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink-70); font-size: 14.5px; font-weight: 600; }
.imports-filter button[aria-pressed="true"], .press-filter button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.imports { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.imports li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; background: var(--surface); border-radius: var(--r-lg); padding: 20px 20px 18px; }
.imports li[hidden] { display: none; }
.imports .im-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.imports .im-name { font-size: 17px; font-weight: 700; line-height: 1.35; }
.imports .im-en { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ink-70); }
.imports .im-what { font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.imports .im-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.imports .im-meta span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--oat); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.imports .im-meta .is-now { background: var(--brand); color: var(--on-brand); }
.imports a.im-link { font-size: 13px; color: var(--brand); text-decoration: underline; text-underline-offset: .2em; justify-self: start; }
.press-year { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 28px; margin-top: 28px; }
.press-year:first-of-type { margin-top: 0; }
.press-year > h3 { font-family: var(--en); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--brand); position: sticky; top: calc(var(--hh) + 84px); align-self: start; }
.press-list { display: grid; gap: 8px; }
.press-list li[hidden] { display: none; }
.press-list a, .press-list .pl-static { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 18px; align-items: start; padding: 16px 20px; border-radius: var(--r-md); background: var(--surface); transition: background-color .25s var(--ease); }
.press-list a:hover { background: var(--sage); }
.press-list .pl-date { font-family: var(--en); font-size: 13.5px; font-weight: 600; color: var(--ink-70); font-variant-numeric: tabular-nums; padding-top: 2px; }
.press-list .pl-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.press-list .pl-sum { grid-column: 2; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.press-list .pl-outlet { grid-column: 3; grid-row: 1; font-size: 13px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.press-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.press-strip a { display: grid; gap: 8px; align-content: start; min-height: 168px; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--surface); transition: background-color .25s var(--ease); }
.press-strip a:hover { background: var(--sage); }
.press-strip .ps-m { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-70); }
.press-strip .ps-m b { color: var(--brand); }
.press-strip .ps-t { font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; }
.press-strip .ps-s { font-size: 14px; line-height: 1.6; color: var(--ink-70); }
.milestones--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .imports { grid-template-columns: repeat(3, minmax(0, 1fr)); } .press-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .imports { grid-template-columns: 1fr 1fr; }
  .press-year { grid-template-columns: 1fr; }
  .press-year > h3 { position: relative; top: 0; font-size: 24px; }
  .milestones--wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .imports { grid-template-columns: 1fr 1fr; gap: 8px; }
  .imports li { padding: 14px 14px 12px; }
  .imports .im-name { font-size: 15.5px; }
  .imports .im-what { display: none; }
  .press-list a, .press-list .pl-static { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .press-list .pl-sum, .press-list .pl-outlet { grid-column: 1; grid-row: auto; }
  .press-strip { grid-template-columns: 1fr; }
  .press-strip a { min-height: 0; }
  .milestones--wide { grid-template-columns: 1fr; }
  .imports-filter, .press-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m); }
  .imports-filter::-webkit-scrollbar, .press-filter::-webkit-scrollbar { display: none; }
  .imports-filter button, .press-filter button { flex: none; }
}

/* ===== v4: generated pictures, lineage, pride, vision statement, IP ===== */
.gen-pic { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--oat); }
.gen-pic img { width: 100%; height: 100%; object-fit: cover; }
.gen-pic figcaption { position: absolute; right: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(11, 15, 13, .66); color: #fff; font-size: 12px; }
.lin-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; margin-bottom: 40px; }
.lin-head h2 { font-size: var(--h2); }
.lin-pic { aspect-ratio: 3 / 2; }
.lin-cta { margin-top: 14px; }
.lin-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.lin-filter button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink-70); font-size: 14px; font-weight: 600; }
.lin-filter button[aria-pressed="true"] { background: var(--sc, var(--brand)); color: #fff; }
.lin-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 0 10px; scrollbar-width: thin; }
.lin-rail li { flex: none; width: 236px; scroll-snap-align: start; }
.lin-rail li[hidden] { display: none; }
.lin-rail li > a, .lin-rail li > div { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; height: 100%; min-height: 200px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--surface); transition: background-color .25s var(--ease), transform .3s var(--ease); }
.lin-rail li > a:hover { background: var(--sage); transform: translateY(-3px); }
.ln-y { font-family: var(--en); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--sc); font-variant-numeric: tabular-nums; }
.ln-t { font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.ln-d { font-size: 13.5px; line-height: 1.6; color: var(--ink-70); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ln-s { justify-self: start; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--sc); color: #fff; font-size: 11.5px; font-weight: 600; }
.lin-sub { margin: 48px 0 14px; font-size: 20px; font-weight: 700; }
.lin-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lin-links li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); }
.lin-links .lk-a, .lin-links .lk-b { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--sc); }
.lin-links .lk-b { text-align: right; }
.lin-links small { display: block; font-family: var(--en); font-size: 12px; font-weight: 600; color: var(--ink-70); }
.lin-links .lk-l { font-size: 12px; font-weight: 600; text-align: center; color: var(--ink-70); max-width: 110px; }
.pride-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; align-items: start; }
.pride-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pride-list li { display: grid; gap: 6px; align-content: start; padding: 24px 24px 22px; border-radius: var(--r-lg); background: var(--surface); }
.pride-list b { font-family: var(--en); font-size: clamp(36px, 3.2vw, 52px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.pride-list b small { font-family: var(--font); font-size: 17px; font-weight: 700; margin-left: 3px; letter-spacing: 0; }
.pr-t { font-size: 16.5px; font-weight: 700; }
.pr-d { font-size: 14.5px; line-height: 1.65; color: var(--ink-70); }
.pride-side { position: sticky; top: calc(var(--hh) + 24px); display: grid; gap: 10px; }
.pride-pic { aspect-ratio: 4 / 5; }
.pride-ip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 22px; border-radius: var(--r-lg); background: var(--brand); color: var(--on-brand); }
.pride-ip b { font-size: 17px; }
.pride-ip span { grid-column: 1; font-size: 14px; line-height: 1.6; color: var(--on-brand-70); }
.pride-ip i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); }
.pride-ip i svg { width: 20px; height: 20px; }
.vs-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.vs-title { font-size: clamp(34px, 3.8vw, 60px); line-height: 1.15; }
.vs-promise { margin-top: 22px; padding: 18px 22px; border-radius: var(--r-md); background: var(--sage); font-size: 16.5px; font-weight: 600; line-height: 1.65; color: var(--brand); }
.vs-pic { aspect-ratio: 4 / 3; }
.vs-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.vs-pillars li { padding: 26px 24px 28px; border-radius: var(--r-lg); background: var(--surface); }
.vs-pillars h3 { font-size: 19px; font-weight: 700; color: var(--brand); }
.vs-pillars p { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ink-70); }
.vs-sub { margin: 48px 0 14px; font-size: 20px; font-weight: 700; }
.vs-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vs-who li { padding: 22px; border-radius: var(--r-lg); background: var(--brand); color: var(--on-brand); }
.vs-who b { font-size: 17px; color: var(--accent); }
.vs-who p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--on-brand-70); }
.ip-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-bottom: 40px; }
.ip-head h2 { font-size: var(--h2); }
.ip-pic { aspect-ratio: 3 / 2; }
.ip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ip-list li { display: grid; gap: 8px; align-content: start; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--surface); }
.ip-k { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; }
.ip-list b { font-size: 17px; line-height: 1.45; }
.ip-list p { font-size: 14.5px; line-height: 1.65; color: var(--ink-70); }
.ip-list dl { display: grid; gap: 4px; margin-top: 4px; }
.ip-list dl div { display: flex; gap: 10px; font-size: 13.5px; }
.ip-list dt { flex: none; width: 36px; color: var(--ink-70); }
.ip-list dd { margin: 0; font-family: var(--en); font-weight: 600; overflow-wrap: anywhere; }
.ip-sub { margin: 40px 0 12px; font-size: 19px; font-weight: 700; }
.ip-certs { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-certs li { display: inline-flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); font-size: 14px; }
.ip-certs span { font-family: var(--en); font-weight: 600; color: var(--ink-70); }
.ip-note { margin-top: 24px; font-size: 13px; line-height: 1.7; color: var(--ink-70); }
.import-pic { aspect-ratio: 21 / 8; margin-bottom: 28px; }
.hub-pic { aspect-ratio: 21 / 9; margin-bottom: 32px; }
@media (max-width: 1180px) {
  .lin-links, .ip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-pillars, .vs-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .lin-head, .vs-grid, .ip-head, .pride-grid { grid-template-columns: 1fr; gap: 28px; }
  .pride-side { position: relative; top: 0; }
  .pride-pic { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .lin-rail li { width: 200px; }
  .lin-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m); }
  .lin-filter::-webkit-scrollbar { display: none; }
  .lin-filter button { flex: none; }
  .lin-links, .ip-list, .vs-pillars, .vs-who { grid-template-columns: 1fr; }
  .pride-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pride-list li { padding: 16px; }
  .pride-list b { font-size: 32px; }
  .pr-d { display: none; }
  .import-pic, .hub-pic { aspect-ratio: 16 / 9; }
}
/* chronicle: room for YYYY.MM and 1990년대 labels */
.hist-list li { grid-template-columns: 96px minmax(0, 1fr) 64px; }
.hist-list li.no-pic { grid-template-columns: 96px minmax(0, 1fr); }
.hy { white-space: nowrap; font-size: 17px; }
@media (max-width: 640px) {
  .hist-list li { grid-template-columns: 76px minmax(0, 1fr) 48px; }
  .hist-list li.no-pic { grid-template-columns: 76px minmax(0, 1fr); }
  .hy { font-size: 14.5px; }
}
@media (max-width: 640px) { .lin-links li.is-extra { display: none; } .lin-links.is-open li.is-extra { display: grid; } }
.family-sites { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px; font-size: 13.5px; line-height: 1.75; color: var(--on-brand-70); }
.family-sites .fs-h { margin-right: 0; color: var(--on-brand); font-weight: 600; }
.family-sites a { color: var(--on-brand-70); }
.family-sites a:hover, .family-sites a:focus-visible { color: var(--on-brand); }