/* ============================================================
   CONTEXTURE  |  Form Follows Context.
   ============================================================ */
:root {
  --bg: #000;
  --bg-alt: #0a0a0a;
  --fg: #fff;
  --muted: rgba(255, 255, 255, .4);
  --dim: rgba(255, 255, 255, .72);
  --line: rgba(255, 255, 255, .14);
  --font-en: "Montserrat", sans-serif;
  --font-jp: "Hiragino Sans", "Noto Sans JP", sans-serif;
  --gutter: clamp(20px, 7vw, 120px);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-jp); line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.container { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; width: 100%; }
::selection { background: var(--fg); color: var(--bg); }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 32px var(--gutter); }
.preloader__mark { align-self: center; }
.pl-stroke { stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.preloader__count { position: absolute; right: var(--gutter); bottom: 28px; font: 700 clamp(64px, 12vw, 180px)/1 var(--font-en); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.preloader__caption { position: absolute; left: var(--gutter); bottom: 40px; font: 500 12px var(--font-en); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* ---------- Cursor / Grain ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 90; width: 12px; height: 12px; border-radius: 50%; background: #fff; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); display: grid; place-items: center; transition: width .35s var(--ease-out), height .35s var(--ease-out), background .3s; }
.cursor.is-hover { width: 56px; height: 56px; }
.cursor.is-view { width: 96px; height: 96px; mix-blend-mode: normal; background: #fff; }
.cursor__label { font: 700 12px var(--font-en); letter-spacing: .08em; color: #000; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-view .cursor__label { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }
.grain { position: fixed; inset: -100%; z-index: 80; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-1%,3%)} 80%{transform:translate(3%,-1%)} 100%{transform:translate(0,0)} }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px var(--gutter); transition: transform .6s var(--ease), background .4s; }
.header.is-hidden { transform: translateY(-110%); }
.header.is-scrolled { background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,0)); }
.header__logo img { width: 132px; }
.header__nav { display: flex; gap: 30px; font: 500 12px/1 var(--font-en); letter-spacing: .12em; text-transform: uppercase; }
.header__nav a { position: relative; color: var(--dim); padding: 6px 0; transition: color .3s; }
.header__nav a span { font-size: 9px; vertical-align: top; margin-right: 6px; color: var(--muted); }
.header__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.header__nav a:hover { color: var(--fg); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.header__cta { position: relative; overflow: hidden; border: 1px solid var(--fg); padding: 11px 22px; border-radius: 999px; font: 500 12px/1 var(--font-en); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; }
.header__cta span { position: relative; z-index: 1; transition: color .4s; }
.header__cta::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.header__cta:hover span { color: var(--bg); }
.header__cta:hover::before { transform: translateY(0); }
.header__menu { display: none; width: 44px; height: 44px; position: relative; }
.header__menu i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: #fff; top: 18px; transition: transform .5s var(--ease), top .5s var(--ease); }
.header__menu i:last-child { top: 26px; }
.header__menu.is-open i:first-child { top: 22px; transform: rotate(45deg); }
.header__menu.is-open i:last-child { top: 22px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__nav { display: grid; gap: 4px; }
.menu__nav a { font: 700 clamp(40px, 11vw, 72px)/1.15 var(--font-en); letter-spacing: -.02em; display: flex; gap: 16px; align-items: baseline; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.menu__nav a span { font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu.is-open .menu__nav a:nth-child(n) { transition-delay: calc(.25s + var(--i, 0) * .06s); }
.menu__foot { position: absolute; bottom: 32px; left: var(--gutter); font: 500 12px var(--font-en); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }

/* ---------- Shared ---------- */
.label { font: 700 12px/1 var(--font-en); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 14px; }
.label::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.section { padding-block: clamp(96px, 14vw, 200px); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(48px, 6vw, 96px); }
.section__note { font-size: 13px; color: var(--muted); }

.reveal-up { opacity: 0; transform: translateY(40px); }
.reveal-mask { display: block; overflow: hidden; }
.reveal-mask > * { transform: translateY(110%); }
.reveal-line span { display: inline-block; clip-path: inset(0 100% 0 0); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__symbol { position: absolute; top: 50%; left: 50%; width: min(1100px, 95vw); aspect-ratio: 1; transform: translate(-30%, -50%); pointer-events: none; will-change: transform; }
.hero__symbol img { width: 100%; height: 100%; }
.hero__inner { position: relative; min-width: 0; }
.hero__eyebrow { margin-bottom: 28px; }
.hero__eyebrow img { width: min(333px, 48vw); }
.hero__logo { width: min(676px, 100%); }
.hero__tagline { display: block; margin-top: 22px; font: 500 clamp(26px, 3.4vw, 50px)/1.1 var(--font-en); letter-spacing: .01em; color: rgba(255, 255, 255, .4); white-space: nowrap; }
@media (max-width: 520px) { .hero__tagline { white-space: normal; } }
.hero__meta { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--font-en); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hero__scroll { display: flex; align-items: center; gap: 12px; }
.hero__scroll-line { width: 48px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(-100%); animation: scrollline 2.2s var(--ease) infinite; }
@keyframes scrollline { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
.hero__loc span { margin-left: 10px; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- Manifesto ---------- */
.manifesto { padding-block: clamp(120px, 18vw, 260px) clamp(80px, 10vw, 140px); }
.manifesto .label { margin-bottom: 40px; }
.manifesto__text { font-weight: 800; font-size: clamp(30px, 5.4vw, 84px); line-height: 1.35; letter-spacing: -.01em; max-width: 1300px; }
.manifesto__text .w { display: inline-block; white-space: nowrap; opacity: .12; }

/* ---------- About ---------- */
.about { padding-block: 0 clamp(96px, 14vw, 200px); }
.about__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.about__side { position: sticky; top: 120px; align-self: start; }
.about__body { display: grid; gap: 28px; max-width: 760px; color: var(--dim); font-size: 16px; }
.about__lead { color: var(--fg); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.8; margin-bottom: 16px; }

/* ---------- Process ---------- */
.process { height: 400vh; position: relative; }
.process__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg); }
.process__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.process__ui { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: 96px; pointer-events: none; }
.process__words { margin-top: 32px; display: grid; gap: 2px; }
.process__words li { display: flex; align-items: baseline; gap: 20px; font: 700 clamp(40px, 7.6vw, 120px)/1.05 var(--font-en); letter-spacing: -.035em; color: rgba(255,255,255,.12); transition: color .6s; }
.process__words li em { font: 500 12px var(--font-en); letter-spacing: .2em; color: var(--muted); font-style: normal; min-width: 28px; }
.process__words li small { font: 500 clamp(12px, 1vw, 15px) var(--font-jp); letter-spacing: .1em; color: var(--muted); opacity: 0; transition: opacity .5s; }
.process__words li.is-active { color: var(--fg); }
.process__words li.is-active small { opacity: 1; }
.process__eq { margin-top: 40px; font: 500 clamp(13px, 1.1vw, 16px) var(--font-en); letter-spacing: .08em; color: var(--muted); display: flex; gap: 14px; align-items: baseline; }
.process__eq i { font-style: normal; }
.process__eq strong { color: var(--fg); }
.process__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 36px; height: 1px; background: var(--line); }
.process__bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; background: var(--bg); }
.marquee__track { display: flex; align-items: center; gap: 48px; width: max-content; will-change: transform; }
.marquee__track span { font: 700 clamp(28px, 4vw, 56px)/1 var(--font-en); letter-spacing: -.02em; white-space: nowrap; color: rgba(255,255,255,.9); }
.marquee__track img { width: 28px; height: 28px; border-radius: 6px; opacity: .8; }

/* ---------- Products ---------- */
.products__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.product { position: relative; }
.has-cursor .product, .has-cursor a, .has-cursor button { cursor: none; }
.product__media { display: block; position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 1200 / 630; background: #111; }
.product__media img { width: 100%; height: 100%; object-fit: contain; }
.product__media::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .5s; pointer-events: none; }
.product:hover .product__media::after { opacity: .06; }
.product__body { padding-top: 28px; display: grid; gap: 14px; justify-items: start; }
.product__head { width: 100%; }
.product__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.product__name { font: 700 clamp(28px, 2.6vw, 40px)/1 var(--font-en); letter-spacing: -.02em; }
.product__name span { font: 500 12px var(--font-jp); letter-spacing: .14em; color: var(--muted); margin-left: 12px; }
.product__status { font-size: 12px; font-weight: 700; letter-spacing: .08em; border: 1px solid var(--fg); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.product__copy { font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; }
.product__desc { color: var(--dim); font-size: 14px; max-width: 520px; }

/* ---------- Business rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row__head { width: 100%; display: grid; grid-template-columns: 60px 1fr auto 48px; align-items: center; gap: 24px; padding: clamp(28px, 3.4vw, 48px) 0; text-align: left; }
.row__no { font: 500 12px var(--font-en); letter-spacing: .2em; color: var(--muted); }
.row__title { font-weight: 800; font-size: clamp(24px, 3.6vw, 56px); line-height: 1.2; letter-spacing: -.01em; transition: transform .6s var(--ease); }
.row:hover .row__title { transform: translateX(16px); }
.row__en { font: 500 12px var(--font-en); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.row__icon { position: relative; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; justify-self: end; transition: background .4s, border-color .4s; }
.row__icon::before, .row__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); transition: transform .5s var(--ease), background .4s; }
.row__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.row.is-open .row__icon { background: #fff; border-color: #fff; }
.row.is-open .row__icon::before, .row.is-open .row__icon::after { background: #000; }
.row.is-open .row__icon::after { transform: translate(-50%, -50%) rotate(0); }
.row__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.row__inner { overflow: hidden; }
.row.is-open .row__panel { grid-template-rows: 1fr; }
.row__inner p:first-child { padding-left: 84px; max-width: 720px; color: var(--dim); }
.row__tags { padding: 20px 0 clamp(28px, 3vw, 48px) 84px; display: flex; flex-wrap: wrap; gap: 8px; }
.row__tags span { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--dim); }

/* ---------- Company ---------- */
.company { background: var(--bg-alt); }
.company__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.company .section__head { display: block; margin: 0; position: sticky; top: 120px; align-self: start; }
.company .section__note { margin-top: 12px; }
.table div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.table div:first-child { border-top: 1px solid var(--line); }
.table dt { color: var(--muted); font: 500 12px var(--font-jp); letter-spacing: .14em; padding-top: 6px; }
.table dd { font-size: 17px; font-weight: 500; }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; padding-block: clamp(140px, 20vw, 280px); background: var(--bg); }
.contact__symbol { position: absolute; top: 50%; right: -20%; width: min(900px, 90vw); aspect-ratio: 1; transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.contact__inner { position: relative; }
.contact__text { margin-top: 40px; font-weight: 800; font-size: clamp(30px, 5vw, 72px); line-height: 1.4; letter-spacing: -.01em; }
.contact__btn { margin-top: 56px; display: inline-flex; align-items: center; gap: 28px; border: 1px solid var(--fg); border-radius: 999px; padding: 22px 36px 22px 40px; font-weight: 700; font-size: 16px; position: relative; overflow: hidden; }
.contact__btn::before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(101%); transition: transform .6s var(--ease); }
.contact__btn span { position: relative; z-index: 1; transition: color .4s; }
.contact__btn-arrow { font-family: var(--font-en); font-size: 20px; transition: transform .5s var(--ease), color .4s; }
.contact__btn:hover::before { transform: translateY(0); }
.contact__btn:hover span { color: #000; }
.contact__btn:hover .contact__btn-arrow { transform: translateX(8px); }
.contact__mail { display: block; margin-top: 32px; font: 500 14px var(--font-en); letter-spacing: .06em; color: var(--muted); transition: color .3s; width: max-content; }
.contact__mail:hover { color: var(--fg); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: 40px; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.footer__nav { display: flex; gap: 24px; font: 500 12px var(--font-en); letter-spacing: .14em; text-transform: uppercase; }
.footer__nav a:hover { color: var(--fg); }
.footer__logo { margin: clamp(40px, 6vw, 96px) auto 0; padding-inline: var(--gutter); max-width: 1680px; overflow: hidden; }
.footer__logo img { width: 100%; }
.footer__bottom { display: flex; justify-content: space-between; padding-block: 24px 32px; font: 500 11px var(--font-en); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .header { grid-template-columns: auto 1fr; }
  .header__nav { display: none; }
  .header__menu { display: block; }
  .about__grid, .company__grid { grid-template-columns: 1fr; }
  .about__side, .company .section__head { position: static; }
  .products__list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero__symbol { width: 150vw; transform: translate(-45%, -50%); }
  .hero__meta { font-size: 10px; }
  .hero__est { display: none; }
  .row__head { grid-template-columns: 40px 1fr 40px; }
  .row__en { display: none; }
  .row__icon { width: 40px; height: 40px; }
  .row__inner p:first-child, .row__tags { padding-left: 0; }
  .table div { grid-template-columns: 1fr; gap: 4px; }
  .process__eq { display: none; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .header__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader, .grain, .cursor { display: none !important; }
  .reveal-up, .reveal-mask > *, .reveal-line span, .manifesto__text .w { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__scroll-line::after { animation: none; }
  .process { height: auto; }
  .process__sticky { position: static; height: auto; padding-block: 120px; }
}

/* ---------- Contact page ---------- */
.veil-in { position: fixed; inset: 0; background: #fff; z-index: 200; pointer-events: none; }
.header--solid { background: var(--bg); }
.contact-page { position: relative; min-height: 100svh; padding: 180px 0 120px; overflow: hidden; }
.contact-page__symbol { position: absolute; top: 0; right: -30%; width: min(900px, 90vw); aspect-ratio: 1; opacity: .7; pointer-events: none; }
.contact-page__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-page__title { margin-top: 32px; font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: 1.2; letter-spacing: -.01em; }
.contact-page__lead { margin-top: 24px; color: var(--dim); }
.contact-page__info { margin-top: 56px; display: grid; gap: 20px; }
.contact-page__info div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.contact-page__info dt { font: 500 11px var(--font-en); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.contact-page__info dd { font-size: 15px; }
.contact-page__info a { border-bottom: 1px solid var(--line); transition: border-color .3s; }
.contact-page__info a:hover { border-color: var(--fg); }
.form { display: grid; gap: 8px; padding-top: 8px; }
.field { display: grid; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.field:focus-within { border-color: var(--fg); }
.field.is-invalid { border-color: #ff5a5a; }
.field__label { font-family: var(--font-jp); font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.field__label i { font-style: normal; font-size: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; color: var(--fg); font: 500 18px/1.6 var(--font-jp); outline: none; resize: vertical; }
.form .contact__btn { margin-top: 40px; justify-self: start; }
.form .contact__btn:disabled { opacity: .5; pointer-events: none; }
.form__status { min-height: 1.6em; font-size: 13px; color: var(--dim); margin-top: 8px; }
.footer--min { padding-top: 0; }
@media (max-width: 900px) { .contact-page__grid { grid-template-columns: 1fr; gap: 40px; } .contact-page { padding-top: 140px; } }

/* ---------- Link arrow ---------- */
.link-arrow { display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; font: 700 14px var(--font-en); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 8px; transition: border-color .3s; }
.link-arrow i { font-style: normal; transition: transform .5s var(--ease); }
.link-arrow:hover { border-color: var(--fg); }
.link-arrow:hover i { transform: translateX(8px); }

/* ---------- Member page ---------- */
.member-page { position: relative; min-height: 100svh; padding: 180px 0 140px; overflow: hidden; }
.member-page__symbol { position: absolute; top: -10%; right: -25%; width: min(900px, 90vw); aspect-ratio: 1; opacity: .7; pointer-events: none; }
.member-page__head { position: relative; margin-bottom: clamp(56px, 8vw, 120px); }
.member-page__title { margin-top: 32px; font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: 1.2; letter-spacing: -.01em; }
.member-page__lead { margin-top: 24px; color: var(--dim); max-width: 640px; }
.members { position: relative; border-top: 1px solid var(--line); }
.member { display: grid; grid-template-columns: 60px 1fr 2fr; gap: 32px; padding: clamp(36px, 4vw, 64px) 0; border-bottom: 1px solid var(--line); }
.member__no { font: 500 12px var(--font-en); letter-spacing: .2em; color: var(--muted); padding-top: 10px; }
.member__name { font-weight: 800; font-size: clamp(26px, 3vw, 44px); line-height: 1.2; letter-spacing: -.01em; }
.member__role { margin-top: 10px; font: 500 12px var(--font-en); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.member__bio { color: var(--dim); font-size: 15px; max-width: 680px; }
@media (max-width: 900px) {
  .member { grid-template-columns: 40px 1fr; }
  .member__bio { grid-column: 2; }
  .member-page { padding-top: 140px; }
}