/* pomfs-neutral-260826b.css — 2026-08-26
   260826a에서 GF 데이터 패널 잔해를 걷어낸 판. 홈의 .gf-chart 블록을 삭제한 뒤 남아
   있던 규칙들이다. 클래스 27종(.gf-chart/.gf-col*/.gf-cov/.gc-*/.gt*/.gv-*)이 마크업과
   외부 JS 어디에도 없음을 대조로 확인하고 지웠다. 매거진(.gf-mag/.mg-*) 18종은 살아
   있으므로 그대로 둔다. ★.hero-aurora 는 마크업엔 없지만 upgrade-21st JS가 만들므로 유지.
   ★파일명이 캐시 키다(immutable 1년). 내용을 고치면 반드시 접미 문자를 올릴 것.
   ★2026-08-26 같이 고침: Poseidon 레일(.coindex)의 메타 3종 .ci-h/.ci-code/.ci-d 가
     rgba(249,249,248,.5~.52) 로 #133955 위에서 4.08~4.29 — 9.5px 모노는 4.5 필요인데
     미달이었다(정리 이전부터 라이브였던 버그). .62 로 올려 5.4대. 세 라벨의 위계는
     원래도 밝기가 아니라 자간(.14/.10/.06em)과 대문자화가 내고 있었다(§2 원칙).
     ★§2의 다크표면 표준 #8A8981 은 #111110 기준이라 Poseidon 위에선 3.43 — 쓰면 안 된다.
   ★중복 셀렉터 84종은 손대지 않았다 — 뒤 레이어가 앞을 의도적으로 덮는 구조라
     병합이 곧 캐스케이드 변경이고, 이 파일이 사고를 낸 지점이 정확히 거기다. */
/* ── Metric-matched fallbacks ──────────────────────────────────────────────
   Measured 2026-08-26: the home page shifted 0.111 CLS, and 0.1112 of it was
   the .coindex company strip on its own — a five-column TEXT grid with no
   images in it, so when the webfonts land the line boxes grow and the whole
   strip gets 41px taller (453 -> 494), shoving the page down. display=swap
   guarantees that swap happens whether or not the stylesheet blocks render, so
   this was never fixable by loading order alone.
   These faces are Arial standing in for each webfont with its metrics forced
   to match, so the fallback occupies exactly the space the real font will.
   ★ The numbers are COMPUTED, not copied: fontTools read ascent/descent/upm
     and the mean advance width over [A-Za-z0-9 .,'&] from the actual Google
     Fonts latin subsets and from /System/Library/Fonts/Supplemental/Arial.ttf,
     then size-adjust = webfontAvgWidth / arialAvgWidth and each vertical
     override is divided by that ratio. Arial reports useTypoMetrics=false, so
     its usWin* values were used — the same ones a browser uses.
   ★ If a family is ever swapped out, RECOMPUTE. A stale override is worse than
     no override: it holds the wrong height with confidence. ── */
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial');size-adjust:101.76%;ascent-override:96.69%;descent-override:28.69%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:104.79%;ascent-override:92.45%;descent-override:23.02%;line-gap-override:0%}
@font-face{font-family:'Space Mono Fallback';src:local('Arial');size-adjust:109.07%;ascent-override:102.69%;descent-override:33.10%;line-gap-override:0%}

/* ============================================================================
   P.O.MFS corporate layer — "Passe-partout" · 2026-08-25
   The parent has no colour; the operating companies do.

   Neutral ramp = Radix Colors "Sand" (MIT, WorkOS) — 12-step, contrast-checked.
   https://github.com/radix-ui/colors

   Loaded ONLY by index.html and ko/index.html, AFTER shared-260611.css and
   upgrade-21st-260625b.css, so it wins the cascade without editing either.
   ⚠ FILENAME IS THE CACHE KEY. This ships as `public, max-age=31536000,
   immutable`, so an edit under the SAME name is invisible to anyone who
   already loaded it — the HTML refreshes every 60s and then references
   rules their cached CSS does not have, which shreds the layout. Bump the
   suffix letter (…260825b → …260825c) on every content change.
   Rollback = remove the one <link>. Other pages (app.html, live/*, ko/live/*)
   are untouched and keep the old palette on purpose.
   ========================================================================= */

:root{
  /* Sand — light */
  --sand-1:#fdfdfc; --sand-2:#f9f9f8; --sand-3:#f1f0ef; --sand-4:#e9e8e6;
  --sand-6:#dad9d6; --sand-7:#cfceca; --sand-8:#bcbbb5; --sand-9:#8d8d86;
  --sand-11:#63635e; --sand-12:#21201c;
  /* Sand — dark */
  --sandd-1:#111110; --sandd-2:#191918; --sandd-3:#222221; --sandd-4:#2a2a28;
  --sandd-6:#3b3a37; --sandd-7:#494844; --sandd-10:#7c7b74; --sandd-11:#b5b3ad;
  --sandd-12:#eeeeec;

  /* Company register — the ONLY saturated colour allowed on a P.O.MFS page.
     One hue per block, and only as a rule, an eyebrow label or an arrow. */
  --co-misfy:#FF6140;    /* MiSFY App (POM-01) */
  --co-scenius:#0B6F65;  /* Scenius (POM-02) — 엔진 브랜드, 2026-08-26 신설.
                            ★주의: v5 에서 --co-channel 이 #14B8A6(173°) 로 옮겨져 있어
                            Scenius(174°) 와 색상각이 겹친다. 밝기로만 갈린다(L44 vs L58).
                            Channel 을 빈 대역(로즈 ~335°)으로 옮기는 건 송대표 결정 대기. */
  --co-channel:#1E88E5;  /* Channel — moved off #A855F7, which collided with GF */
  --co-live:#EAB308;     /* Live & Talent */
  --co-gf:#5F4B8B;       /* Ground Frequency — Ultra Violet */

  /* Site tokens remapped onto the ramp. #2AD829 retires here. */
  --accent:var(--sand-12);
  --accent-soft:rgba(33,32,28,0.10);
  --accent-glow:rgba(33,32,28,0.20);
  --bg-app:var(--sandd-1); --bg-surface:var(--sandd-2);
  --bg-elev:var(--sandd-3); --bg-hover:var(--sandd-4);
  --bg-paper:var(--sand-2);
  --text-primary:var(--sandd-12); --text-secondary:#d6d4ce;
  --text-meta:var(--sandd-11); --text-disabled:var(--sandd-10);
  --text-on-paper:var(--sand-12); --text-on-paper-2:var(--sand-11);
  --text-on-paper-3:var(--sand-9);
  --border-dark:var(--sandd-4); --border-divider:var(--sandd-6);
  --border-light:rgba(33,32,28,0.12); --border-light-soft:rgba(33,32,28,0.07);
}

/* --- Wordmark ------------------------------------------------------------
   L1: the 2024 graffiti mark, colour dropped. Masked so it inherits the
   topbar/footer text colour and flips with the on-dark / on-light state. */
.brand .mark{
  display:block; width:96px; height:52px;
  background-color:currentColor;
  -webkit-mask:url('/assets/pomfs-mark.png') no-repeat center/contain;
          mask:url('/assets/pomfs-mark.png') no-repeat center/contain;
}
.brand img{display:none}
footer .brand .mark{width:82px;height:44px;opacity:.8}
@media(max-width:680px){.brand .mark{width:78px;height:42px}}

/* --- Type ----------------------------------------------------------------
   Display drops from Inter 900 to a serif at 400 — the single loudest change.
   Body and UI stay Inter, so nothing else about the build moves.
   KO has no serif cut here: it stays Pretendard, one weight down. */
.hero h1{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(44px,8vw,112px);
  line-height:1.0;
  letter-spacing:-0.022em;
}
[lang="ko"] .hero h1{
  font-family:'Pretendard Variable',Pretendard,'Inter','Inter Fallback',sans-serif;
  font-weight:600; font-size:clamp(38px,6.6vw,88px);
  line-height:1.14; letter-spacing:-0.035em;
}
.hero h1 .u{border-bottom:3px solid rgba(238,238,236,0.45);padding-bottom:4px}

.sc-hdr h2,.team-h,.follow-h,.contactblock h2,.faq-sec h2,#what h2{
  font-family:'Newsreader',Georgia,serif; font-weight:400; letter-spacing:-0.016em;
}
[lang="ko"] .sc-hdr h2,[lang="ko"] .team-h,[lang="ko"] .follow-h,
[lang="ko"] .contactblock h2,[lang="ko"] .faq-sec h2{
  font-family:'Pretendard Variable',Pretendard,'Inter','Inter Fallback',sans-serif; font-weight:600;
}
.jstep h3{font-family:'Newsreader',Georgia,serif;font-weight:400;letter-spacing:-0.014em}
[lang="ko"] .jstep h3{font-family:'Pretendard Variable',Pretendard,sans-serif;font-weight:600}

/* --- Hero ----------------------------------------------------------------
   The footage is already grayscale(100%); the green came entirely from the
   two radial gradients in .hero::after. Replaced with a warm neutral lift. */
.hero::after{
  background:
    linear-gradient(180deg,rgba(17,17,16,0.34) 0%,rgba(17,17,16,0.56) 55%,rgba(17,17,16,0.93) 100%),
    radial-gradient(ellipse 70% 60% at 80% 25%,rgba(238,232,220,0.10) 0%,transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 95%,rgba(238,232,220,0.05) 0%,transparent 60%);
}
.hero .kicker{color:var(--text-meta)}
.hero .kicker::before{background:var(--sandd-7)}
.hs-n,.hs-n[data-suffix]::after{color:var(--text-primary)}
.hs-n{font-weight:600;letter-spacing:-0.03em}
.hs-n[data-suffix]::after{color:var(--sandd-10);font-weight:500}

/* --- Buttons -------------------------------------------------------------
   No brand hue. Ink on paper, paper on ink, 6px corners instead of pills. */
.btn-accent,.btn-ghost{border-radius:6px;font-weight:600}
.btn-accent{padding:15px 26px}
.btn-ghost{padding:14px 24px}
.btn-accent:hover{transform:none;box-shadow:0 6px 20px rgba(0,0,0,0.18)}
.btn-ghost:hover{border-color:currentColor;color:inherit;background:rgba(255,255,255,0.06)}
.middle .btn-ghost:hover{background:rgba(33,32,28,0.05)}
/* On dark surfaces the ink fill would vanish — invert it there.
   #app / #ai are excluded on purpose: inside those, --accent is MiSFY's
   #FF6140 and the button should stay MiSFY orange. */
.hero .btn-accent,.contactblock .btn-accent,footer .btn-accent{
  background:var(--text-primary);color:var(--sandd-1);
}
.hero .btn-ghost,.contactblock .btn-ghost{border-color:var(--sandd-7)}
.nl-form button{border-radius:6px;font-weight:600}
.nl-form button:hover{background:var(--sand-11);color:var(--bg-paper)}

/* --- Language toggle ------------------------------------------------------ */
.topbar.on-dark .langtoggle a.on{background:var(--text-primary);color:var(--sandd-1)}
.topbar.on-light .langtoggle a.on{background:var(--text-on-paper);color:var(--bg-paper)}
.langtoggle{border-radius:4px}
.langtoggle a{font-weight:600}

/* --- Company index strip -------------------------------------------------
   The one structural addition: five lines, five marks, directly under the
   hero — what makes the page read as a parent rather than a product. */
.coindex{background:var(--sand-3);border-bottom:1px solid var(--border-light)}
.coindex .wrap{padding-top:26px;padding-bottom:28px}
.coindex .ci-h{font-family:'Inter','Inter Fallback',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-on-paper-3);margin-bottom:16px}
.coindex .ci-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.coindex a{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  padding-top:0;transition:opacity .18s var(--ease)}
.coindex a:hover{opacity:.62}
.coindex .ci-bar{display:block;height:2px;background:var(--co);border-radius:1px}
.coindex .ci-n{font-family:'Inter','Inter Fallback',sans-serif;font-size:13px;font-weight:600;letter-spacing:-0.01em}
.coindex .ci-d{font-size:11px;color:var(--text-on-paper-3);line-height:1.4}
.coindex a[data-co="misfy"]{--co:var(--co-misfy)}
.coindex a[data-co="scenius"]{--co:var(--co-scenius)}
.coindex a[data-co="channel"]{--co:var(--co-channel)}
.coindex a[data-co="live"]{--co:var(--co-live)}
.coindex a[data-co="gf"]{--co:var(--co-gf)}
@media(max-width:880px){
  .coindex .ci-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
  .coindex a:last-child{grid-column:1/-1}
  .coindex .wrap{padding-top:22px;padding-bottom:24px}
}

/* --- Company cards -------------------------------------------------------
   Hue reassigned per company and demoted to a 2px rule + the eyebrow + the
   arrow. Never a fill. Corners 20px -> 8px; shadow -> hairline. */
/* (the .wcard photo-card component was replaced by .colist/.corow on 2026-08-25;
   its rules are gone — nothing on either page carries class="wcard" any more) */

/* --- Journey -------------------------------------------------------------
   P.O.MFS's own section, so no company hue: mono numerals, ink headings. */
.jstep .num{color:var(--text-on-paper-3) !important;font-family:'Inter','Inter Fallback',sans-serif;letter-spacing:.14em}
.jstep .jimg{border-radius:6px}

/* --- Cards, fields, misc ------------------------------------------------- */
.rmem{border-radius:8px}
.rmem:hover{border-color:var(--sand-8)}
.jimg,.wimg,.sp-img{filter:saturate(.94)}
.infield input:focus,.infield textarea:focus,.infield select:focus{border-bottom-color:var(--text-primary)}
.inquiry-sent{border-radius:8px;border-color:var(--sandd-7);background:var(--sandd-3);color:var(--text-primary)}
.nl-ok{color:var(--text-on-paper)}
.faq-item{border-radius:8px}
.flogo[data-net="tt"]:hover{color:var(--text-on-paper-2)}
.team span.sep{color:var(--text-on-paper-3)}

/* --- Leftover neon green ---------------------------------------------------
   Three places still painted #2AD829 by hand. Two of them sit INSIDE the MiSFY
   sections, so they become MiSFY's orange rather than neutral — the company
   owns its own section. The aurora belongs to P.O.MFS, so it goes neutral. */
.hero-aurora::before{
  background:radial-gradient(circle at 50% 50%,rgba(238,232,220,0.16) 0%,rgba(238,232,220,0) 62%);
}
.hero-aurora::after{
  background:radial-gradient(circle at 50% 50%,rgba(238,232,220,0.10) 0%,rgba(238,232,220,0) 60%);
}
.showcase::before{
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,97,64,0.10) 0%,transparent 60%);
}
.sp-cap .sp-num{color:var(--accent)}   /* --accent is #FF6140 inside #app */

/* --- Nav CTA -------------------------------------------------------------- */
.nav-cta{color:inherit;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px;opacity:1}
.nav-cta:hover{opacity:.7}

/* --- Fixes found in review ------------------------------------------------ */
/* .coindex sits outside .middle, so it was inheriting the dark-theme body
   colour onto a paper background — the company names rendered invisible. */
.coindex{color:var(--text-on-paper)}
/* Journey is P.O.MFS's own section: neutralise the genre-hue tick + numerals. */
.jstep{--hue:var(--sand-8)}
.jstep::before{background:var(--sand-8)}
.jstep[data-hue="global"] .num{color:var(--text-on-paper-3)}
.jstep.on::before{background:var(--text-on-paper)}

/* ===========================================================================
   v2 — 2026-08-25 · structural pass
   Scales below are the Open Props (MIT, Adam Argyle) spacing / size / easing
   ramps, vendored as the subset this page uses:
   https://github.com/argyleink/open-props
   Together with the Radix Sand ramp above they are the whole token base —
   no hand-picked pixel values below this line.
   ========================================================================= */
:root{
  --size-1:.25rem;  --size-2:.5rem;   --size-3:1rem;    --size-4:1.25rem;
  --size-5:1.5rem;  --size-6:1.75rem; --size-7:2rem;    --size-8:3rem;
  --size-9:4rem;    --size-10:5rem;   --size-11:7.5rem;
  --radius-2:5px;   --radius-3:1rem;
  --ease-3:cubic-bezier(.25,0,.3,1);
  --ease-out-3:cubic-bezier(0,0,.3,1);
  /* NOTE: --co-channel #1E88E5 is ALSO --hue-global ("Pop blue") in
     shared-260611.css and --genre-pop in colors_and_type.css. Harmless on this
     page (the neutral layer repaints every --hue-global consumer), but do not
     "fix" one without checking the other. Approved 2026-08-25. */
}

/* --- 03 · Ground Frequency showcase --------------------------------------
   Same anatomy as #app / #ai: the company owns its section, so the section
   accent is GF's dark-mode Ultra Violet, not the neutral ink. */
#gf{--accent:#A99BD6;--accent-soft:rgba(169,155,214,0.16);--accent-glow:rgba(169,155,214,0.34)}
#gf.showcase::before{
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(95,75,139,0.30) 0%,transparent 62%);
}
.sc-logo-gf{height:30px !important}

/* --- Operating companies ledger ------------------------------------------
   Replaces the four photo cards. Five uniform rows: the parent's list of what
   it owns, not five marketing tiles. The company rule is the only colour. */
.colist{display:flex;flex-direction:column;border-top:1px solid var(--sand-8)}
.corow{
  position:relative;display:grid;
  grid-template-columns:212px minmax(0,1fr) 184px;
  gap:0 var(--size-7);align-items:center;
  padding:var(--size-6) 0;border-bottom:1px solid var(--border-light);
  text-decoration:none;color:inherit;transition:background .22s var(--ease-3);
}
.corow::after{
  content:'';position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--co);transition:width .45s var(--ease-out-3);
}
.corow:hover{background:rgba(33,32,28,0.022)}
.corow:hover::after{width:100%}
.corow[data-co="misfy"]{--co:var(--co-misfy)}
.corow[data-co="scenius"]{--co:var(--co-scenius)}
.corow[data-co="channel"]{--co:var(--co-channel)}
.corow[data-co="live"]{--co:var(--co-live)}
.corow[data-co="gf"]{--co:var(--co-gf)}
.co-fig{
  display:block;height:132px;border-radius:var(--radius-2);
  background-size:cover;background-position:center;filter:saturate(.92);
  border-top:2px solid var(--co);
}
.co-body{display:flex;flex-direction:column;gap:var(--size-2);min-width:0}
.co-tag{font-family:'Inter','Inter Fallback',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--co)}
.co-name{font-family:'Inter','Inter Fallback',sans-serif;font-size:26px;font-weight:600;letter-spacing:-0.024em;
  color:var(--text-on-paper);line-height:1.1}
.co-desc{font-size:14px;line-height:1.6;color:var(--text-on-paper-2);max-width:62ch}
.co-meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--size-2);text-align:right}
.co-metric{font-family:'Inter','Inter Fallback',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-on-paper-3)}
.co-link{font-family:'Inter','Inter Fallback',sans-serif;font-size:12px;font-weight:700;color:var(--text-on-paper)}
.co-arr{color:var(--co);transition:transform .25s var(--ease-3)}
.corow:hover .co-arr{transform:translateX(4px)}
@media(max-width:1000px){
  .corow{grid-template-columns:168px minmax(0,1fr);gap:0 var(--size-5);
    grid-template-areas:'fig body' 'fig meta'}
  .co-fig{grid-area:fig;align-self:start;height:118px}
  .co-body{grid-area:body}
  .co-meta{grid-area:meta;flex-direction:row;align-items:center;justify-content:flex-start;
    text-align:left;gap:var(--size-3);margin-top:var(--size-3)}
}
@media(max-width:680px){
  .corow{grid-template-columns:1fr;gap:var(--size-3);grid-template-areas:'fig' 'body' 'meta';
    padding:var(--size-5) 0}
  .co-fig{height:150px;width:100%}
  .co-name{font-size:22px}
}

/* ===========================================================================
   v3 — 2026-08-25 · THE SURFACE FLIP (this is what Direction A actually is)
   v1/v2 kept the old dark page and only retoned it: measured 57% dark, and the
   whole first screen was dark. That is Direction B wearing A's palette.
   Direction A = paper is the GROUND; dark survives only as a CONTAINED FIGURE
   (the map, the GF chart, the stage footage) and as the footer's full stop.
   Token re-scoping does the work — every descendant that reads a token flips
   with the surface, so almost nothing needs a per-rule override.
   ========================================================================= */
.hero,.showcase,.contactblock{
  background:var(--sand-2);
  color:var(--text-on-paper);
  --text-primary:var(--sand-12);
  --text-secondary:var(--sand-11);
  --text-meta:var(--sand-11);
  --text-disabled:var(--sand-9);
  --border-divider:var(--sand-6);
  --border-dark:var(--sand-4);
  --bg-surface:var(--sand-1);
  --bg-elev:var(--sand-3);
}

/* --- Hero: type-led on paper. The footage moves out to its own figure. --- */
.hero{
  min-height:0;padding:var(--size-10) 0 var(--size-9);
  display:block;overflow:visible;border-bottom:0;
}
.hero::before,.hero::after,.hero-aurora{display:none !important}
.hero .kicker{color:var(--text-on-paper-3)}
.hero .kicker::before{background:var(--sand-8)}
.hero h1{color:var(--text-on-paper);font-size:clamp(42px,7.4vw,104px)}
.hero h1 .u{border-bottom:3px solid var(--sand-8);padding-bottom:6px}
.hero .sub{color:var(--text-on-paper-2)}
.hero-stats{border-top:1px solid var(--sand-6)}
.hs-n,.hs-n[data-suffix]::after{color:var(--text-on-paper)}
.hs-n[data-suffix]::after{color:var(--sand-8)}
.hs-l{color:var(--text-on-paper-3)}
.hero .btn-accent{background:var(--sand-12);color:var(--sand-2)}
.hero .btn-ghost{border-color:var(--sand-8);color:var(--text-on-paper)}
.hero .btn-ghost:hover{background:rgba(33,32,28,0.05)}

/* the stage footage, mounted rather than used as wallpaper */
.herofig{background:var(--sand-2);padding:0 0 var(--size-9)}
.hf-frame{
  margin:0;border-radius:var(--radius-3);overflow:hidden;
  border:1px solid var(--sand-6);background:var(--sandd-1);
  aspect-ratio:21/9;position:relative;
}
.hf-frame .hero-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;filter:grayscale(100%) contrast(1.05) brightness(.72);
}
@media(max-width:680px){.hf-frame{aspect-ratio:16/10}.herofig{padding-bottom:var(--size-8)}}
@media(prefers-reduced-motion:reduce){.hf-frame .hero-vid{display:none}}

/* --- Showcase sections on paper ----------------------------------------- */
.showcase{background:var(--sand-2);border-top:1px solid var(--border-light);padding:var(--size-10) 0 var(--size-11)}
/* No glow. Direction A marks a section with a rule, not a wash — and the rule
   is the company's colour, so you can see whose section you are in. */
.showcase::before{display:none}
.showcase{border-top:2px solid var(--accent)}
.sc-hdr h2{color:var(--text-on-paper)}
.sc-hdr .sub{color:var(--text-on-paper-2)}
.sp-cap .sp-t{color:var(--text-on-paper)}
.sp-cap .sp-d{color:var(--text-on-paper-3)}
.c-dot{background:var(--sand-7)}
.ai-stats .l{color:var(--text-on-paper-3)}
.ai-connect p{color:var(--text-on-paper-2)}
.ai-credit{color:var(--text-on-paper-3)}
#gf{--accent:#5F4B8B;--accent-soft:rgba(95,75,139,0.14);--accent-glow:rgba(95,75,139,0.28)}
#gf .btn-accent{color:#fff}
#app .btn-accent{color:#1a0a06}
#ai .btn-accent{color:#0B1614}

/* --- The contained dark figures — the only dark left above the footer --- */
.ai-map-wrap{border-radius:var(--radius-3);border:1px solid var(--sand-6)}

/* --- FAQ + contact on paper --------------------------------------------- */
.faq-sec{border-top:1px solid var(--border-light)}
.faq-sec h2,.contactblock h2{color:var(--text-on-paper)}
.faq-item{border-color:var(--sand-6);background:var(--sand-1)}
.faq-item summary{color:var(--text-on-paper)}
.faq-item p{color:var(--text-on-paper-2)}
.contactblock .slabel{color:var(--text-on-paper-3)}
.contactblock .slabel::before{background:var(--sand-8)}
.infield input,.infield textarea,.infield select{color:var(--text-on-paper)}
.infield select option{background:var(--sand-1);color:var(--text-on-paper)}
.infield label{color:var(--text-on-paper-3)}
.contactblock .btn-accent{background:var(--sand-12);color:var(--sand-2)}
.inquiry-sent{border-color:var(--sand-8);background:var(--sand-3);color:var(--text-on-paper)}
.crow a{color:var(--text-on-paper)}
.recaptcha-note,.c-note{color:var(--text-on-paper-3)}

/* --- Footer keeps the dark: one full stop, not the page's ground -------- */
footer{background:var(--sandd-1);color:var(--sandd-12);border-top:1px solid var(--sand-6)}
.topbar.on-light{background:rgba(249,249,248,0.88);border-bottom-color:var(--border-light)}

/* ===========================================================================
   v4 — 2026-08-25 · P.O.MFS gets its own accent
   Earlier premise ("the parent has no colour") made the page inert. The parent
   now has ONE accent. Placement rule keeps it from becoming a fifth company:
   it marks and it acts — eyebrow rules, the hero underline, the primary CTA,
   links, focus — and it NEVER paints a headline, body copy, or anything inside
   a company's section (#app / #ai / #gf keep their own --accent).

   Hue math: companies sit at 10° / 45° / 208° / 259°. The widest free arc is
   45°→208°, but its centre is 126° — the retired green. So the usable space is
   that arc's teal end, or the 259°→10° arc. #60373D sits at 351°: warm like the
   Sand paper, no green association, and far from every company in lightness and
   chroma even where the hue number looks close to MiSFY.
   ========================================================================= */
:root{
  --pm-accent:#133955;         /* PANTONE 19-4033 TCX Poseidon · 205° L20 S63 · 11.43:1 on paper */
  --pm-accent-hi:#1D5480;      /* hover / on-dark lift */
  --pm-accent-ink:#F9F9F8;     /* text on an accent fill */
  --accent:var(--pm-accent);
  --accent-soft:rgba(19,57,85,0.12);
  --accent-glow:rgba(19,57,85,0.26);
}
.btn-accent{color:var(--pm-accent-ink)}
.hero .btn-accent,.contactblock .btn-accent{background:var(--pm-accent);color:var(--pm-accent-ink)}
.hero .btn-accent:hover,.contactblock .btn-accent:hover{background:var(--pm-accent-hi)}
.hero h1 .u{border-bottom-color:var(--pm-accent)}
.hero .kicker,.slabel.on-light{color:var(--text-on-paper-3)}
.hero .kicker::before,.slabel::before{background:var(--pm-accent);opacity:1}
.hs-n[data-suffix]::after{color:var(--pm-accent)}
.jstep.on::before{background:var(--pm-accent)}
.nl-form button{background:var(--pm-accent);color:var(--pm-accent-ink)}
.nl-form button:hover{background:var(--pm-accent-hi);color:var(--pm-accent-ink)}
.infield input:focus,.infield textarea:focus,.infield select:focus{border-bottom-color:var(--pm-accent)}
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--pm-accent);outline-offset:2px;border-radius:2px;
}
.inquiry-sent{border-color:var(--pm-accent);background:var(--accent-soft);color:var(--pm-accent)}
.nl-ok{color:var(--pm-accent)}
.flogo[data-net="tt"]:hover{color:var(--pm-accent)}
.rmem:hover{border-color:var(--pm-accent)}
footer{--accent:var(--pm-accent-hi)}

/* ===========================================================================
   v5 — 2026-08-25 · T3 · the label voice
   Benchmarked from Ninja Tune (dense catalogue grid, micro uppercase UI, status
   chips) and Ghostly (monospace carries ALL metadata — catalogue numbers, a
   code rail, filter-style indexes). Principles only; nothing copied.

   The rule that makes it a label and not a brochure:
     MONO carries every number, code, label and status.
     GROTESQUE carries every headline.
   Newsreader is gone — a literary serif read as a law firm, not a label.
   ========================================================================= */
:root{
  --font-display:'Space Grotesk','Space Grotesk Fallback','Inter','Inter Fallback',-apple-system,sans-serif;
  --font-mono:'Space Mono','Space Mono Fallback','Pretendard Variable',ui-monospace,monospace;
  --co-channel:#14B8A6;   /* moved off #1E88E5 — 3° from the P.O.MFS Poseidon.
                             173°: 32° from Poseidon, 86° from GF. */
}
body,html{font-family:var(--font-display)}
[lang="ko"]{font-family:'Pretendard Variable',Pretendard,'Space Grotesk',sans-serif}

/* --- Display ------------------------------------------------------------- */
.hero h1,.sc-hdr h2,.team-h,.follow-h,.contactblock h2,.faq-sec h2,#what h2,
.jstep h3,.co-name,.sp-cap .sp-t{
  font-family:var(--font-display);font-weight:700;letter-spacing:-0.04em;
}
[lang="ko"] .hero h1,[lang="ko"] .sc-hdr h2,[lang="ko"] .team-h,[lang="ko"] .follow-h,
[lang="ko"] .contactblock h2,[lang="ko"] .faq-sec h2,[lang="ko"] .jstep h3{
  font-family:'Pretendard Variable',Pretendard,sans-serif;font-weight:700;letter-spacing:-0.035em;
}
.hero h1{font-size:clamp(40px,7.2vw,100px);line-height:.98}
.jstep h3{font-size:30px;font-weight:700}
.hero h1 .u{border-bottom-width:4px;padding-bottom:8px}
.sc-hdr h2 .g,.hero h1 .g{font-style:normal;font-weight:700;color:var(--accent)}

/* --- Mono: every number, code, label, status ----------------------------- */.kicker,.slabel,.prod-tag,.hs-n,.hs-l,.ai-stats .n,.ai-stats .l,.ai-credit,.jstep .num,.co-tag,.co-metric,.ci-code,.ci-d,.img-ph::after,.infield label,.biz,.c-note,.sp-cap .sp-num,.faq-item summary::after{
  font-family:var(--font-mono) !important;
}
.kicker{font-weight:400;font-size:10.5px;letter-spacing:.1em}
.slabel{font-weight:400;letter-spacing:.12em;font-size:10.5px}
.prod-tag{font-weight:400;letter-spacing:.1em;font-size:10.5px}
.hs-n,.ai-stats .n{font-weight:700;letter-spacing:-.02em}
.hs-l,.ai-stats .l{font-weight:400;letter-spacing:.1em;font-size:9.5px}
.co-tag{font-weight:400;letter-spacing:.08em;font-size:10px}
.jstep .num{font-weight:400;letter-spacing:.1em}
.img-ph::after{font-weight:400;letter-spacing:.08em}
.biz,.c-note{font-size:11px;letter-spacing:.02em}

/* --- Catalogue rail (was the plain index strip) -------------------------- */
.coindex{background:var(--pm-accent);border-bottom:0;color:rgba(249,249,248,.92)}
.coindex .wrap{padding-top:18px;padding-bottom:20px}
.coindex .ci-h{font-family:var(--font-mono);font-weight:400;font-size:9.5px;
  letter-spacing:.14em;color:rgba(249,249,248,.62);margin-bottom:13px}
.coindex a{gap:7px}
.coindex a:hover{opacity:1}
.coindex .ci-code{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  color:rgba(249,249,248,.62);order:-1}
.coindex .ci-bar{height:2px;background:var(--co);border-radius:0}
.coindex .ci-n{font-family:var(--font-display);font-weight:600;font-size:13.5px;
  letter-spacing:-.02em;color:#F9F9F8}
.coindex .ci-d{font-size:9.5px;letter-spacing:.06em;color:rgba(249,249,248,.62);text-transform:uppercase}
.coindex a:hover .ci-n{color:#fff}
.coindex a:hover .ci-bar{box-shadow:0 0 0 1px var(--co)}

/* --- Status chip on the ledger ------------------------------------------ */
.co-metric{
  border:1px solid var(--sand-7);border-radius:3px;padding:5px 8px;
  font-size:9.5px;letter-spacing:.1em;color:var(--text-on-paper-2);font-weight:400;
}
.corow:hover .co-metric{border-color:var(--co);color:var(--co)}
.co-link{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:-.01em}

/* --- GF chart in the label register ------------------------------------- */

/* --- Controls ------------------------------------------------------------ */
.btn-accent,.btn-ghost,.nl-form button{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.navlinks,.mobile-menu a,.brand{font-family:var(--font-display)}
.navlinks a,.nav-dd-trigger{font-weight:500;letter-spacing:-.005em}
.langtoggle a{font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.06em}
/* link + arrow belong on one line; the chip sits above them */
.co-meta{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:center;gap:10px 7px;text-align:right}
.co-meta .co-metric{grid-column:1/-1;justify-self:end}
.co-meta .co-link{grid-column:1}
.co-meta .co-arr{grid-column:2}
@media(max-width:1000px){
  .co-meta{justify-content:start;text-align:left;gap:8px 7px;margin-top:var(--size-3)}
  .co-meta .co-metric{justify-self:start}
}
/* Space Mono is much wider than Inter — the three-up stat row needs headroom on phones */
@media(max-width:680px){
  .hs-n{font-size:clamp(20px,5.6vw,28px)}
  .hs-l{font-size:8.5px;letter-spacing:.08em}
  .hero-stats{gap:14px}
}
@media(max-width:400px){.hero-stats{grid-template-columns:1fr 1fr;gap:16px 14px}}

/* --- Wordmark takes the accent ------------------------------------------
   The mark was inheriting currentColor (ink). Painting it Poseidon ties the
   parent's mark to the parent's colour — 11.43:1 on the paper topbar. */
.brand .mark{background-color:var(--pm-accent)}
.brand:hover .mark{background-color:var(--pm-accent-hi)}
.topbar.on-dark .brand .mark,footer .brand .mark{background-color:var(--sandd-12)}

/* ===========================================================================
   v6 — paper-safe company text
   A company's colour is its identity, so fills, rules and marks keep the exact
   brand hex. But #FF6140 reads 2.83:1 on Sand paper and #EAB308 only 1.82:1 —
   below the 4.5 floor for the small mono labels that now carry them. So each
   company gets a darkened INK variant used only where the colour becomes text.
   Same hue and saturation, lightness dropped to the first passing step.
   ========================================================================= */
:root{
  --co-misfy-ink:#DF2700;    /* 4.50:1  (mark stays #FF6140) */
  --co-scenius-ink:#0B6F65;  /* 5.49:1  — 브랜드 헥스 그대로 통과 */
  --co-live-ink:#906E05;     /* 4.51:1  (mark stays #EAB308) */
  --co-channel-ink:#0E8175;  /* 4.51:1  (mark stays #14B8A6) */
  --co-gf-ink:#5F4B8B;       /* 6.96:1  — already passes */
}
.corow[data-co="misfy"]{--co-ink:var(--co-misfy-ink)}
.corow[data-co="scenius"]{--co-ink:var(--co-scenius-ink)}
.corow[data-co="channel"]{--co-ink:var(--co-channel-ink)}
.corow[data-co="live"]{--co-ink:var(--co-live-ink)}
.corow[data-co="gf"]{--co-ink:var(--co-gf-ink)}
.co-tag{color:var(--co-ink,var(--co))}
.co-arr{color:var(--co-ink,var(--co))}
.corow:hover .co-metric{border-color:var(--co-ink,var(--co));color:var(--co-ink,var(--co))}

/* the showcase sections: MiSFY's orange is fine as a fill, not as body-scale text */
#app{--accent-ink:var(--co-misfy-ink)}
#ai{--accent-ink:var(--co-scenius-ink)}
#gf{--accent-ink:var(--co-gf-ink)}
#app .prod-tag,#ai .prod-tag,#gf .prod-tag,
#app .ai-stats .n,#ai .ai-stats .n,#gf .ai-stats .n,
#app .sc-hdr h2 .g,#ai .sc-hdr h2 .g,#gf .sc-hdr h2 .g,
#app .sp-cap .sp-num,#ai .sp-cap .sp-num{
  color:var(--accent-ink);
}
/* fills keep the true brand colour */
#app .btn-accent{background:var(--co-misfy);color:#1a0a06}
#ai .btn-accent{background:var(--co-scenius);color:#FFFFFF}
#gf .btn-accent{background:var(--co-gf);color:#fff}
.showcase{border-top-color:var(--accent)}

/* --- Meta text steps -----------------------------------------------------
   Radix sand-9 (#8d8d86) is the SOLID step, not an accessible text step — it
   lands at 3.17:1 on paper, and the label voice puts a lot of 9–12px mono on
   it (stat labels, section labels, credits, journey numerals, team roles).
   sand-11 passes but equals --text-on-paper-2, which flattens the hierarchy,
   so the meta step sits between them at the first value clearing 4.5 on BOTH
   the paper and the white card. Hierarchy below this comes from size, weight
   and tracking — not from going lighter. */
:root{--text-on-paper-3:#70706A}          /* 4.73 on paper · 4.90 on card */        /* 5.38 on the chart's #111110 */
/* the flipped sections still carried the dark-mode --text-disabled onto paper */
.hero,.showcase,.contactblock{--text-disabled:#70706A}
/* the footer stays dark, so it needs the dark meta step, not the paper one */
footer{--text-on-paper-3:#8A8981;--text-disabled:#8A8981;--text-on-paper-2:#B5B3AD}
footer .biz,footer .biz *{color:#8A8981}

/* ===========================================================================
   v7 — black chrome
   The topbar goes solid black over the paper body — the same chrome/body split
   Ground Frequency uses, so the parent and the title read as one house.
   ========================================================================= */
.topbar.on-dark{
  background:var(--sandd-1);
  border-bottom-color:var(--sandd-4);
  color:var(--sandd-12);
  backdrop-filter:none;
}
.topbar.on-dark .brand .mark{background-color:var(--sandd-12)}
.topbar.on-dark .brand:hover .mark{background-color:#fff}
.brand .mark{width:74px;height:40px}
@media(max-width:680px){.brand .mark{width:62px;height:34px}}
.topbar.on-dark .navlinks a,.topbar.on-dark .nav-dd-trigger{color:var(--sandd-12);opacity:.82}
.topbar.on-dark .navlinks a:hover,.topbar.on-dark .nav-dd-trigger:hover{opacity:1}
.topbar.on-dark .nav-cta{color:var(--sandd-12);opacity:1;border-bottom-color:var(--sandd-12)}
.topbar.on-dark .langtoggle{border-color:var(--sandd-7)}
.topbar.on-dark .langtoggle a{color:var(--sandd-11)}
.topbar.on-dark .langtoggle a.on{background:var(--sandd-12);color:var(--sandd-1)}
.topbar.on-dark .mobile-toggle,.topbar.on-dark .mobile-toggle span{background:var(--sandd-12)}

/* ===========================================================================
   v8 — the hero is a video hero again
   v3 pulled the footage out into its own figure to get off the dark ground.
   That lost the point of the piece: it is a VIDEO HERO — footage behind, type
   in front. Restored, but as a CONTAINED panel with paper margins on every
   side, so the page keeps its paper ground and the dark stays a mounted piece.
   ========================================================================= */
.hero{
  position:relative;
  max-width:1240px;margin:30px auto 0;
  border-radius:16px;overflow:hidden;
  background:var(--sandd-1);color:var(--sandd-12);
  min-height:min(74vh,660px);
  padding:88px 0 80px;
  display:flex;align-items:center;
  /* back to the dark ramp inside the panel */
  --text-primary:var(--sandd-12);
  --text-secondary:#D6D4CE;
  --text-meta:var(--sandd-11);
  --text-disabled:var(--sandd-10);
  --border-divider:var(--sandd-6);
}
.hero .hero-vid{
  display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  filter:grayscale(100%) contrast(1.06) brightness(.52);
  z-index:0;pointer-events:none;
}
.hero::before{display:none}
.hero::after{
  content:'';display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(17,17,16,.94) 0%,rgba(17,17,16,.74) 46%,rgba(17,17,16,.30) 100%),
    linear-gradient(180deg,rgba(17,17,16,.30) 0%,transparent 34%,rgba(17,17,16,.55) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%;padding:0 56px}
@media(prefers-reduced-motion:reduce){.hero .hero-vid{display:none}}

.hero h1{color:var(--sandd-12)}
.hero .sub{color:var(--sandd-11)}
.hero .kicker{color:var(--sandd-11)}
.hero .kicker::before{background:var(--pm-accent-dark)}
.hero h1 .u{border-bottom-color:var(--pm-accent-dark)}
.hero-stats{border-top-color:rgba(255,255,255,.16)}
.hero .hs-n{color:var(--sandd-12)}
.hero .hs-n[data-suffix]::after{color:var(--pm-accent-dark)}
.hero .hs-l{color:var(--sandd-11)}
.hero .btn-accent{background:var(--sandd-12);color:var(--sandd-1)}
.hero .btn-accent:hover{background:#fff}
.hero .btn-ghost{border-color:rgba(255,255,255,.34);color:var(--sandd-12)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5)}
@media(max-width:880px){
  .hero{margin:16px 16px 0;border-radius:12px;padding:64px 0 60px;min-height:0}
  .hero .wrap{padding:0 28px}
}

/* --- Accent on the black chrome ------------------------------------------
   #133955 only reaches 1.57:1 against the bar, so the chip would vanish. The
   dark-surface accent is the same hue lifted until it reads: 4.88:1 on the
   bar, and near-black type on it clears 4.88 too. */
:root{--pm-accent-dark:#3D87C0}
.topbar.on-dark .langtoggle{border-color:var(--pm-accent-dark)}
.topbar.on-dark .langtoggle a{color:var(--sandd-11)}
.topbar.on-dark .langtoggle a:hover{color:var(--pm-accent-dark)}
.topbar.on-dark .langtoggle a.on{background:var(--pm-accent-dark);color:var(--sandd-1)}
.topbar.on-dark .nav-cta{border-bottom-color:var(--pm-accent-dark)}
.topbar.on-dark .nav-cta:hover{color:var(--pm-accent-dark);opacity:1}

/* --- ticker across the top of the chart ---------------------------------- */

/* --- two chart columns --------------------------------------------------- */

/* --- coverage strip ------------------------------------------------------ */

/* --- Footer: two legal entities ----------------------------------------- */
footer .ent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--size-5) var(--size-8);
  padding-bottom:var(--size-4)}
footer .ent-b{display:flex;flex-direction:column;gap:4px;line-height:1.55}
footer .ent-l{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--pm-accent-dark);
  margin-bottom:3px}
footer .ent-b b{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:-.01em;
  color:var(--sandd-12)}
footer .ent-b span{font-size:11px}
footer .ent-f{border-top:1px solid var(--sandd-4);padding-top:var(--size-3);display:flex;
  flex-wrap:wrap;gap:0 6px;align-items:center}
@media(max-width:880px){footer .ent{grid-template-columns:1fr;gap:var(--size-5)}}

/* --- Ground Frequency: the issue, then the data -------------------------
   The section leads with what GF actually publishes — a real spread from
   this week — and the chart panel follows as the evidence behind it. */
.gf-mag{
  margin:0 0 var(--size-5);position:relative;
  border:1px solid var(--sand-6);border-radius:var(--radius-3);overflow:hidden;
  background:var(--sand-1);
}
.gf-mag img{display:block;width:100%;height:auto}
.gf-mag figcaption{
  position:absolute;left:0;bottom:0;right:0;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  color:#EEEEEC;background:linear-gradient(180deg,transparent,rgba(17,17,16,.86) 62%);
  padding:26px var(--size-5) 11px;
}
@media(max-width:680px){
  .gf-mag figcaption{font-size:8.5px;padding-top:20px}
}

/* --- Ground Frequency: this week's issue, in HTML -----------------------
   Native markup rather than a screenshot — it reflows on a phone, the
   headlines are real selectable text, and it weighs nothing. Every piece
   links to the actual article. No third-party thumbnails are mirrored. */
.gf-mag{
  background:var(--sand-1);border:1px solid var(--sand-6);border-radius:var(--radius-3);
  padding:var(--size-6) var(--size-7) var(--size-5);margin-bottom:var(--size-5);
}
.mg-top{display:flex;align-items:baseline;gap:var(--size-3);
  border-bottom:1.5px solid var(--sand-12);padding-bottom:var(--size-3)}
.mg-tw{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--sand-12)}
.mg-wk{font-family:var(--font-display);font-size:13px;color:var(--text-on-paper-3)}
.mg-full{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--co-gf);text-decoration:none}
.mg-full:hover{text-decoration:underline}

.mg-lead{display:flex;flex-direction:column;gap:var(--size-2);text-decoration:none;color:inherit;
  padding:var(--size-5) 0;border-bottom:1px solid var(--sand-4)}
.mg-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.028em;line-height:1.14;
  color:var(--sand-12);font-size:18px}
.mg-h-lead{font-size:33px;letter-spacing:-.034em;line-height:1.08;max-width:19ch}
.mg-dek{font-family:'Newsreader',Georgia,serif;font-size:15.5px;line-height:1.5;
  color:var(--text-on-paper-2);max-width:56ch;margin-top:2px}
.mg-desk{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--text-on-paper-3);margin-top:4px}
.mg-lead:hover .mg-h,.mg-c:hover .mg-h{color:var(--co-gf)}

.mg-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ch{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  padding:3px 6px;border-radius:3px;display:inline-flex;align-items:center;gap:5px}
.ch-r{background:#EFEBF6;color:#4A3A6E}
.ch-t{background:#E6F2EE;color:#0B5F56}
.ch-g{background:transparent;border:1px solid var(--sand-7);color:var(--text-on-paper-2)}
.ch-g i{width:5px;height:5px;border-radius:50%;background:var(--co-gf);display:block}
.mg-cc{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--text-on-paper-3)}

.mg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--size-5) var(--size-8);
  padding:var(--size-5) 0}
.mg-c{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.mg-foot{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--text-on-paper-3);
  border-top:1px solid var(--sand-4);padding-top:var(--size-3)}
@media(max-width:880px){
  .gf-mag{padding:var(--size-5) var(--size-5) var(--size-4)}
  .mg-h-lead{font-size:26px;max-width:none}
  .mg-dek{font-size:14.5px}
  .mg-grid{grid-template-columns:1fr;gap:var(--size-5)}
}

/* --- magazine thumbnails --------------------------------------------------
   Hotlinked from the same origins Ground Frequency serves them from, with GF's
   own credit line kept on every frame. The frame carries a background so a
   thumbnail that 404s later leaves a placeholder, not a collapsed row. */
.mg-fig{position:relative;display:block;border-radius:8px;overflow:hidden;
  background:var(--sand-4);aspect-ratio:10/7;flex:0 0 auto;width:132px}
.mg-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mg-fig em{position:absolute;right:8px;bottom:5px;z-index:1;max-width:76%;text-align:right;
  font-family:var(--font-mono);font-style:normal;font-size:7.5px;letter-spacing:.09em;
  color:rgba(255,255,255,.72);text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.mg-fig-lead{width:100%;aspect-ratio:16/10;margin-bottom:var(--size-4)}
.mg-fig-lead em{right:12px;bottom:9px;font-size:9px}

.mg-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 var(--size-7);align-items:center}
.mg-lead .mg-fig-lead{grid-row:1/5;margin-bottom:0;align-self:stretch;aspect-ratio:auto;min-height:250px}
.mg-c{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 var(--size-4);align-items:start}
.mg-c .mg-fig{grid-row:1/4}
.mg-c .mg-chips,.mg-c .mg-h,.mg-c .mg-desk{grid-column:2}
.mg-c .mg-h{margin-top:5px}
@media(max-width:880px){
  .mg-lead{grid-template-columns:1fr;gap:var(--size-3)}
  .mg-c{grid-template-columns:104px minmax(0,1fr);gap:0 var(--size-3)}
  .mg-c .mg-fig{width:104px}
  /* the lead frame must stay full width — .mg-fig's fixed width would shrink it */
  .mg-lead .mg-fig-lead{width:100%;grid-row:auto;aspect-ratio:16/10;min-height:0;
    margin-bottom:var(--size-2)}
}