/* ============================================================
   GUYUN v3.0 「墨金堂」 — editorial-luxury skin.
   Loaded AFTER base styles; refines tokens + shared components so
   every template inherits, plus gy3-* classes for the new homepage.
   ============================================================ */

:root{
	--ink:#0c0a08; --ink-2:#14100c; --ink-3:#181310;
	--bone:#ece5d8; --bone-dim:#a89d8a; --smoke:#6f665a;
	--resin:#c9a05c; --resin-deep:#8a6633; --vermilion:#a03f2d;
	--line:rgba(236,229,216,.10); --line-strong:rgba(236,229,216,.18);
	--ease:cubic-bezier(.32,.72,0,1);
}
body.guyun-light{
	--ink:#f6f1e7; --ink-2:#efe8db; --ink-3:#e9e1d2;
	--bone:#23201a; --bone-dim:#5d564a; --smoke:#8d846f;
	--resin:#8a6633; --resin-deep:#6f5228;
	--line:rgba(35,32,26,.12); --line-strong:rgba(35,32,26,.22);
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);letter-spacing:.02em}

/* grain — fixed, pointer-safe */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>")}

/* ---- type refinements (global) ---- */
h1,h2,h3{font-weight:300}
.guyun-sec-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:.16em;line-height:1.7}
.guyun-eyebrow{letter-spacing:.5em;color:var(--resin-deep);font-size:.62rem}
.gy-phero h1{font-weight:200;letter-spacing:.18em;font-size:clamp(2.4rem,6vw,4.4rem)}
.gy-phero .lede{color:var(--bone-dim);line-height:2.15}
.guyun-section{padding:clamp(90px,11vw,150px) 0 clamp(80px,10vw,130px)}
.gy-article p{line-height:2.15;max-width:68ch}

/* ---- buttons → hairline editorial links (site-wide) ---- */
.guyun-btn{border:0;border-bottom:1px solid var(--line-strong);background:none;padding:0 0 10px;
	font-size:.68rem;letter-spacing:.34em;color:var(--bone-dim);border-radius:0;
	transition:color .5s var(--ease),border-color .5s var(--ease),transform .35s var(--ease)}
.guyun-btn:hover{color:var(--bone);border-color:var(--resin);background:none;transform:translateY(-1px)}
.guyun-btn:active{transform:translateY(0) scale(.985)}
.guyun-btn.solid{background:none;color:var(--bone);border-bottom-color:var(--resin)}
.guyun-btn.solid:hover{color:var(--resin)}
.gy-hero-cta,.gy-closing .cta{display:flex;gap:52px;flex-wrap:wrap}
.gy-closing .cta{justify-content:center}
/* keep real button affordance where commerce demands it */
.single_add_to_cart_button.guyun-btn,.woocommerce .button.guyun-btn,.gy-submit{
	border:1px solid var(--resin);padding:16px 34px;background:none;color:var(--bone)}
.single_add_to_cart_button.guyun-btn:hover,.gy-submit:hover{background:var(--resin);color:var(--ink)}

/* ---- header refinement ---- */
.guyun-header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:blur(14px)}
.guyun-nav a{letter-spacing:.3em;font-size:.66rem}
.guyun-nav a[aria-current],.guyun-nav a.on{color:var(--bone)}
.guyun-logo-svg,.guyun-brand .custom-logo{height:40px}

/* ---- shared card grids → ruled columns (inner pages inherit) ---- */
.gy-cards3{gap:0;background:none;border:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px}
.gy-vcard{background:none;border:0;border-top:1px solid var(--line-strong);padding:26px 0 0}
.gy-vcard .vn{width:auto;height:auto;background:none;border:0;color:var(--resin);font-size:.8rem;letter-spacing:.4em;margin-bottom:14px}
.gy-vcard h4{font-size:1rem;letter-spacing:.22em;margin-bottom:12px}
.gy-vcard p{line-height:2.05;font-size:.9rem}
.gy-box{border:0;border-left:2px solid var(--vermilion);background:none;padding:6px 0 6px 30px}
.gy-table th{letter-spacing:.2em}
.gy-qa{border-color:var(--line)}
.gy-current-term,.gy-morco-cert,.gy-member-gate{border-color:var(--line-strong);background:var(--ink-2)}

/* ============================================================
   gy3 — homepage compositions
   ============================================================ */
.gy3-sec{position:relative;overflow:hidden}
.gy3-rail{position:absolute;left:clamp(18px,4vw,64px);top:0;bottom:0;border-left:1px solid var(--line)}
.gy3-rail span{position:absolute;top:0;left:14px;writing-mode:vertical-rl;font-size:.6rem;letter-spacing:.5em;
	text-transform:uppercase;color:var(--smoke);font-family:var(--label,inherit)}
.gy3-wrap{max-width:1160px;margin:0 auto;padding-left:clamp(70px,12vw,150px);padding-right:24px;position:relative}

.gy3-seal{display:inline-block;width:34px;height:34px;background:var(--vermilion);color:#f4efe6;
	font-size:1.05rem;line-height:34px;text-align:center;vertical-align:middle;margin-right:24px}
.gy3-h2{display:inline-block;vertical-align:middle;font-size:clamp(1.6rem,3.2vw,2.5rem);font-weight:300;letter-spacing:.16em;line-height:1.75}

/* hero */
.gy3-hero{border-bottom:1px solid var(--line);padding:clamp(110px,14vw,160px) 0 clamp(90px,12vw,140px)}
.gy3-hero .kicker{font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--resin-deep);margin-bottom:44px}
.gy3-hero h1{font-size:clamp(3.4rem,9vw,7.4rem);font-weight:200;line-height:1.16;letter-spacing:.1em;margin:0}
.gy3-hero h1 em{font-style:normal;color:var(--resin)}
.gy3-hero .tri{font-style:italic;color:var(--bone-dim);margin-top:42px;letter-spacing:.05em;font-size:1.02rem}
.gy3-hero .line{color:var(--bone-dim);margin-top:18px;line-height:2.1}
.gy3-hero .gy-hero-cta{margin-top:60px}
.gy3-ghost{position:absolute;right:max(-140px,-10vw);top:60px;width:clamp(320px,42vw,620px);color:var(--bone);opacity:.05;pointer-events:none}
.gy3-ghost-gu{position:absolute;left:-160px;bottom:-120px;width:520px;color:var(--bone);opacity:.04;pointer-events:none}
.gy3-smoke{position:absolute;right:clamp(80px,22vw,330px);bottom:0;opacity:.35;animation:gy3smoke 9s var(--ease) infinite}
@keyframes gy3smoke{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* index rows (五谱 / journal) */
.gy3-rows{border-bottom:1px solid var(--line)}
.gy3-row{position:relative;display:block;border-top:1px solid var(--line);padding:44px 0;overflow:hidden;
	transition:padding-left .6s var(--ease)}
.gy3-row:hover{padding-left:14px}
.gy3-row .ghostnum{position:absolute;left:-168px;top:-58px;font-size:190px;font-weight:200;color:var(--bone);opacity:.045;line-height:1;pointer-events:none}
.gy3-row .nm{font-size:clamp(1.4rem,2.6vw,2.35rem);font-weight:300;letter-spacing:.22em;color:var(--bone)}
.gy3-row .ln{color:var(--bone-dim);margin-left:38px;font-size:.94rem;letter-spacing:.06em}
.gy3-row .en{float:right;font-style:italic;font-size:.86rem;color:var(--resin-deep);margin-top:14px}
.gy3-row .en b{color:var(--resin);font-weight:400;transition:transform .5s var(--ease);display:inline-block}
.gy3-row:hover .en b{transform:translateX(6px)}
.gy3-row::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--resin);transition:width .7s var(--ease)}
.gy3-row:hover::after{width:100%}

/* terroir ledger */
.gy3-ledger .l{display:flex;align-items:baseline;gap:26px;border-top:1px solid var(--line);padding:30px 0}
.gy3-ledger .st{font-size:1.5rem;font-weight:300;letter-spacing:.14em;white-space:nowrap}
.gy3-ledger .di{font-style:italic;color:var(--resin);font-size:.94rem;white-space:nowrap}
.gy3-ledger .no{margin-left:auto;max-width:460px;color:var(--bone-dim);font-size:.88rem;line-height:1.95;text-align:left}
.gy3-callout{border-left:2px solid var(--vermilion);padding:6px 0 6px 30px;margin-top:56px;color:var(--bone-dim);line-height:2.05;max-width:740px}
.gy3-callout strong{color:var(--bone)}

/* feature (本月之选) */
.gy3-feat{display:grid;grid-template-columns:400px 1fr;gap:clamp(40px,7vw,90px);align-items:start}
.gy3-feat .img{aspect-ratio:4/5;background:var(--ink);border:1px solid var(--line-strong);position:relative;overflow:hidden}
.gy3-feat .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.gy3-feat .img .chip{position:absolute;left:20px;top:20px;width:26px;height:40px;background:var(--vermilion);color:#f4efe6;font-size:.8rem;line-height:1.2;padding:3px 0 0 5px;z-index:2}
.gy3-feat .serial{font-style:italic;font-weight:300;font-size:clamp(1.9rem,4vw,3.3rem);color:var(--resin);letter-spacing:.03em}
.gy3-feat h3{font-size:clamp(1.5rem,2.8vw,2.25rem);font-weight:300;letter-spacing:.14em;margin:24px 0 0}
.gy3-feat .meta{color:var(--bone-dim);margin-top:22px;line-height:2.1;font-size:.9rem}
.gy3-feat .note{color:var(--bone-dim);margin-top:26px;line-height:2.1;letter-spacing:.04em}

/* journal rows */
.gy3-jrow .dt{position:absolute;left:0;top:40px;font-size:.6rem;letter-spacing:.3em;color:var(--smoke)}
.gy3-jrow .ti{display:block;padding-top:26px;font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:300;letter-spacing:.1em;color:var(--bone)}
.gy3-jrow .ex{color:var(--bone-dim);margin-top:12px;line-height:1.95;max-width:760px;font-size:.9rem}

/* closing */
.gy3-close{text-align:center;padding:clamp(110px,14vw,160px) 24px;background:var(--ink-2);border-top:1px solid var(--line)}
.gy3-close .big{font-size:clamp(2rem,5vw,4rem);font-weight:200;letter-spacing:.24em}
.gy3-close .sub{font-style:italic;color:var(--smoke);margin-top:26px;letter-spacing:.08em}

/* reveals */
.gy3-r{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.gy3-in{opacity:1;transform:none}
.gy3-noanim .gy3-r{opacity:1;transform:none}

@media(max-width:900px){
	.gy-cards3{grid-template-columns:1fr;row-gap:34px}
	.gy3-feat{grid-template-columns:1fr}
	.gy3-ledger .l{flex-wrap:wrap;gap:10px 22px}
	.gy3-ledger .no{margin-left:0;max-width:none}
	.gy3-ghost{opacity:.035;right:-30vw;width:80vw}
	.gy3-row .en{float:none;display:block;margin-top:14px}
	.gy3-row .ln{display:block;margin:12px 0 0}
	.gy3-rail{display:none}
	.gy3-wrap{padding-left:24px}
	.gy-hero-cta,.gy-closing .cta{gap:30px}
}
.gy3-ghost svg,.gy3-ghost-gu svg{width:100%;height:auto;display:block}

/* ============================================================
   v3.1 — mobile refinement (≤680px). Desktop untouched.
   Goal: bigger hero, tappable targets, clean stacking,
   seal aligned to first text line, generous rhythm.
   ============================================================ */
@media(max-width:680px){

  /* — rhythm — */
  .guyun-section,.gy3-hero{padding-left:0;padding-right:0}
  .gy3-wrap{padding-left:clamp(22px,5.5vw,48px);padding-right:clamp(22px,5.5vw,48px)}
  .gy3-sec{padding-top:clamp(64px,16vw,96px);padding-bottom:clamp(64px,16vw,96px)}

  /* — hero: let it breathe big — */
  .gy3-hero{padding-top:76px;padding-bottom:80px}
  .gy3-hero h1{font-size:clamp(3.4rem,15vw,4.9rem);line-height:1.15;letter-spacing:.07em}
  .gy3-hero .kicker{margin-bottom:30px;font-size:.58rem;letter-spacing:.42em}
  .gy3-hero .tri{margin-top:30px;font-size:.9rem;line-height:1.7}
  .gy3-hero .line{margin-top:16px;font-size:.95rem}
  .gy3-ghost{top:auto;bottom:-4vh;right:-22vw;width:96vw;opacity:.04}
  .gy3-smoke{display:none}

  /* — CTAs: stacked, full-width, thumb-friendly — */
  .gy-hero-cta,.gy-closing .cta{flex-direction:column;gap:0;margin-top:44px}
  .gy-hero-cta .guyun-btn,.gy-closing .cta .guyun-btn{
    display:block;width:100%;padding:19px 0;margin:0;border-bottom:1px solid var(--line);
    font-size:.7rem;letter-spacing:.3em;text-align:left;position:relative}
  .gy-hero-cta .guyun-btn:first-child,.gy-closing .cta .guyun-btn:first-child{border-top:1px solid var(--line-strong)}
  .gy-hero-cta .guyun-btn::after,.gy-closing .cta .guyun-btn::after{
    content:"→";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--resin);transition:transform .4s var(--ease)}
  .gy-hero-cta .guyun-btn:active::after{transform:translate(4px,-50%)}
  .gy-hero-cta .guyun-btn.solid,.gy-closing .cta .guyun-btn.solid{color:var(--bone)}
  .gy-closing .cta{align-items:stretch}

  /* — section headers: seal aligns to first line, title flows below — */
  .gy3-seal{display:flex;width:38px;height:38px;align-items:center;justify-content:center;
    margin:0 0 20px;font-size:1.1rem}
  .gy3-h2{display:block;font-size:clamp(1.5rem,6.2vw,2.15rem);letter-spacing:.11em;line-height:1.64;max-width:22ch}

  /* — 品牌承诺 cards: comfortable stacked — */
  .gy-cards3{grid-template-columns:1fr;column-gap:0;row-gap:0}
  .gy-vcard{border-top:1px solid var(--line);padding:28px 0}
  .gy-vcard:first-child{border-top-color:var(--line-strong)}
  .gy-vcard .vn{font-size:.72rem;letter-spacing:.34em;margin-bottom:12px}
  .gy-vcard p{font-size:clamp(.94rem,2.6vw,1rem);line-height:2.05;max-width:52ch}

  /* — 五谱 / journal index rows: two-line stack, big tap target — */
  .gy3-row{padding:26px 0}
  .gy3-row:hover{padding-left:0}
  .gy3-row .ghostnum{font-size:clamp(120px,34vw,180px);left:-10px;top:-32px;opacity:.05}
  .gy3-row .nm{display:block;font-size:clamp(1.6rem,7.5vw,2.35rem);letter-spacing:.17em}
  .gy3-row .ln{display:block;margin:13px 0 0;font-size:clamp(.9rem,2.6vw,1rem);line-height:1.78;max-width:56ch;padding-right:24px}
  .gy3-row .en{float:none;display:flex;justify-content:space-between;align-items:center;
    margin-top:16px;font-size:.72rem;letter-spacing:.14em}
  .gy3-row .en b{color:var(--resin);font-size:1.1rem}
  .gy3-row:hover .en b{transform:none}
  .gy3-jrow .dt{position:static;display:block;margin-bottom:4px;font-size:.58rem}
  .gy3-jrow .ti{padding-top:0;font-size:clamp(1.35rem,6vw,1.7rem);position:relative}
  .gy3-jrow .ti .en{position:absolute;right:0;top:2px;float:none;margin:0}
  .gy3-jrow .ex{font-size:clamp(.9rem,2.6vw,1rem);margin-top:14px;padding-right:8px;max-width:60ch}

  /* — terroir ledger: card-like rows — */
  .gy3-ledger .l{flex-direction:column;gap:6px;padding:24px 0}
  .gy3-ledger .st{font-size:clamp(1.35rem,6vw,1.7rem)}
  .gy3-ledger .di{font-size:.9rem}
  .gy3-ledger .no{font-size:clamp(.88rem,2.6vw,.98rem);line-height:1.9;max-width:60ch}
  .gy3-callout{margin-top:44px;font-size:clamp(.9rem,2.6vw,.98rem);line-height:1.98;padding-left:22px;max-width:64ch}
  .gy3-ghost-gu{left:-40vw;bottom:-6vh;width:88vw;opacity:.03}

  /* — 本月之选: image full-bleed on top, text below — */
  .gy3-feat{grid-template-columns:1fr;gap:34px;max-width:620px}
  .gy3-feat .img{aspect-ratio:4/5;width:100%;max-width:440px}
  .gy3-feat .serial{font-size:clamp(2.2rem,11vw,3.6rem)}
  .gy3-feat h3{font-size:clamp(1.5rem,6.5vw,1.9rem);margin-top:20px}
  .gy3-feat .meta{margin-top:18px;font-size:clamp(.88rem,2.6vw,.96rem);line-height:2.05;max-width:52ch}
  .gy3-feat .note{margin-top:20px;font-size:clamp(.92rem,2.6vw,1rem);line-height:2.05;max-width:52ch}

  /* — closing — */
  .gy3-close{padding:clamp(80px,18vw,110px) 22px}
  .gy3-close .big{font-size:clamp(1.9rem,8.4vw,3.1rem);letter-spacing:.15em;line-height:1.48;max-width:16ch;margin:0 auto}
  .gy3-close .sub{margin-top:20px;font-size:.85rem}

  /* — MORCO grid (when live) stacks — */
  .gy-morco{grid-template-columns:1fr;gap:34px}
  .gy-morco-six{grid-template-columns:1fr}
}

/* very narrow phones */
@media(max-width:380px){
  .gy3-hero h1{font-size:clamp(3rem,16vw,4rem)}
  .gy3-wrap{padding-left:18px;padding-right:18px}
  .gy3-row .nm{font-size:1.45rem}
}

/* landscape / large-phone tune */
@media(min-width:520px) and (max-width:680px){
  .gy-cards3{grid-template-columns:1fr 1fr;column-gap:34px}
  .gy-cards3 .gy-vcard:nth-child(3){grid-column:1/-1}
}

/* ============================================================
   v3.1 — full-screen editorial mobile drawer.
   Upgrades the base dropdown into a luxury overlay.
   ============================================================ */
@media(max-width:680px){
  .guyun-header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 92%,transparent)}
  .guyun-nav{padding:15px 22px}
  .guyun-logo-svg,.guyun-brand .custom-logo{height:34px}

  /* toggle → clean glyph, big tap area */
  .guyun-menu-toggle{display:flex;align-items:center;gap:9px;border:0;padding:8px 2px;
    font-size:.6rem;letter-spacing:.28em;color:var(--bone-dim);background:none}
  .guyun-menu-toggle::before{content:"";width:22px;height:9px;
    border-top:1.5px solid var(--bone);border-bottom:1.5px solid var(--bone);transition:.4s var(--ease)}
  .guyun-header.nav-open .guyun-menu-toggle::before{border-color:var(--resin);transform:rotate(0);height:0;border-bottom:0}

  /* full-screen overlay */
  .guyun-header.nav-open .guyun-main-nav{
    position:fixed;inset:0;top:0;z-index:50;display:flex;flex-direction:column;justify-content:center;
    gap:0;background:var(--ink);padding:0 34px;border:0;
    animation:gy3drawer .5s var(--ease)}
  @keyframes gy3drawer{from{opacity:0}to{opacity:1}}
  .guyun-header.nav-open .guyun-main-nav::before{
    content:"古 韵";position:absolute;top:60px;left:34px;font-family:var(--serif,serif);
    font-size:1.1rem;letter-spacing:.5em;color:var(--resin)}
  .guyun-header.nav-open .guyun-main-nav::after{
    content:"千年沉香 · 一脉古韵";position:absolute;bottom:60px;left:34px;right:34px;
    font-family:var(--serif,serif);font-size:.72rem;letter-spacing:.24em;color:var(--smoke)}
  .guyun-header.nav-open .guyun-main-nav a{
    padding:0;border:0;font-family:var(--serif,serif);font-size:2rem;font-weight:300;
    letter-spacing:.18em;color:var(--bone);line-height:2.2;position:relative;width:max-content}
  .guyun-header.nav-open .guyun-main-nav a::after{
    content:"";position:absolute;left:0;bottom:8px;height:1px;width:0;background:var(--resin);transition:width .5s var(--ease)}
  .guyun-header.nav-open .guyun-main-nav a:active::after{width:100%}
  /* stagger entry */
  .guyun-header.nav-open .guyun-main-nav a{opacity:0;animation:gy3navin .55s var(--ease) forwards}
  .guyun-header.nav-open .guyun-main-nav a:nth-child(1){animation-delay:.08s}
  .guyun-header.nav-open .guyun-main-nav a:nth-child(2){animation-delay:.14s}
  .guyun-header.nav-open .guyun-main-nav a:nth-child(3){animation-delay:.2s}
  .guyun-header.nav-open .guyun-main-nav a:nth-child(4){animation-delay:.26s}
  .guyun-header.nav-open .guyun-main-nav a:nth-child(5){animation-delay:.32s}
  @keyframes gy3navin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* keep icons reachable above overlay, tucked top-right */
  .guyun-header.nav-open .guyun-icons{position:fixed;top:56px;right:34px;z-index:51;flex-direction:column;gap:14px;text-align:right}
  .guyun-header.nav-open .guyun-icons a{font-size:.64rem;letter-spacing:.22em;color:var(--bone-dim)}
  body.gy3-navlock{overflow:hidden}
}

/* ============================================================
   v3.3 — large-phone / phablet tier (481–680px).
   iPhone Pro Max, Plus models, small tablets in portrait.
   The ≤680 rules were tuned for ~390px; here we scale padding
   and type UP with the wider canvas and restore comfortable
   reading measure, so wide phones stop looking "stretched".
   ============================================================ */
@media(min-width:430px) and (max-width:680px){

  /* generous, proportional side gutters (was flat 22px) */
  .gy3-wrap{padding-left:clamp(34px,7vw,52px);padding-right:clamp(34px,7vw,52px)}
  .gy3-sec{padding-top:clamp(88px,15vw,120px);padding-bottom:clamp(88px,15vw,120px)}

  /* hero: hold at a refined ceiling, not edge-to-edge huge */
  .gy3-hero{padding-top:96px;padding-bottom:104px}
  .gy3-hero h1{font-size:clamp(4rem,15.5vw,4.9rem);letter-spacing:.08em;line-height:1.16}
  .gy3-hero .kicker{font-size:.62rem;letter-spacing:.46em;margin-bottom:36px}
  .gy3-hero .tri{font-size:1rem;margin-top:34px}
  .gy3-hero .line{font-size:1.02rem;margin-top:18px;line-height:1.95}

  /* CTAs full-width but capped so they don't span a huge bar */
  .gy-hero-cta,.gy-closing .cta{max-width:460px}
  .gy-hero-cta .guyun-btn,.gy-closing .cta .guyun-btn{padding:20px 0;font-size:.72rem;letter-spacing:.32em}

  /* section headers scale up */
  .gy3-seal{width:42px;height:42px;font-size:1.2rem;margin-bottom:22px}
  .gy3-h2{font-size:clamp(1.7rem,7.5vw,2.15rem);letter-spacing:.13em;line-height:1.62;max-width:20ch}

  /* 品牌承诺: single column 430-519 (still narrow), 2-up from 520 */
  .gy-cards3{grid-template-columns:1fr;column-gap:44px;row-gap:0}
  .gy-vcard{padding:32px 0}
  .gy-vcard .vn{font-size:.74rem;letter-spacing:.36em}
  .gy-vcard p{font-size:.98rem;line-height:2.05;max-width:46ch}

  /* index rows scale with the canvas */
  .gy3-row{padding:34px 0}
  .gy3-row .ghostnum{font-size:clamp(140px,38vw,180px);left:-14px;top:-40px}
  .gy3-row .nm{font-size:clamp(1.9rem,8vw,2.35rem);letter-spacing:.18em}
  .gy3-row .ln{font-size:1rem;line-height:1.8;margin-top:14px;max-width:52ch}
  .gy3-row .en{font-size:.76rem;margin-top:20px}
  .gy3-row .en b{font-size:1.2rem}
  .gy3-jrow .ti{font-size:1.7rem}
  .gy3-jrow .ex{font-size:.98rem;max-width:60ch}
  .gy3-jrow .dt{font-size:.62rem}

  /* terroir: keep station + district on one line, note below */
  .gy3-ledger .l{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px 22px;padding:30px 0}
  .gy3-ledger .st{font-size:1.7rem}
  .gy3-ledger .di{font-size:1rem}
  .gy3-ledger .no{flex-basis:100%;margin-left:0;font-size:.96rem;line-height:1.9;max-width:60ch}
  .gy3-callout{font-size:.98rem;line-height:2;max-width:64ch}

  /* 本月之选: cap image width, center the block, roomy text */
  .gy3-feat{grid-template-columns:1fr;gap:42px;max-width:560px}
  .gy3-feat .img{max-width:400px}
  .gy3-feat .serial{font-size:clamp(2.8rem,13vw,3.6rem)}
  .gy3-feat h3{font-size:1.9rem;margin-top:22px}
  .gy3-feat .meta{font-size:.96rem;line-height:2.05;max-width:52ch}
  .gy3-feat .note{font-size:1rem;line-height:2.05;max-width:52ch}

  /* closing scales up */
  .gy3-close{padding:clamp(110px,16vw,150px) clamp(34px,7vw,52px)}
  .gy3-close .big{font-size:clamp(2.3rem,10vw,3.1rem);letter-spacing:.15em;line-height:1.45;max-width:16ch;margin:0 auto}
  .gy3-close .sub{font-size:.92rem;margin-top:24px}

  /* drawer nav: larger tap type on the bigger canvas */
  .guyun-header.nav-open .guyun-main-nav{padding:0 clamp(44px,9vw,64px)}
  .guyun-header.nav-open .guyun-main-nav a{font-size:2.4rem;line-height:2.3}
  .guyun-header.nav-open .guyun-main-nav::before{top:66px;left:clamp(44px,9vw,64px)}
  .guyun-header.nav-open .guyun-main-nav::after{bottom:66px;left:clamp(44px,9vw,64px)}
  .guyun-header.nav-open .guyun-icons{top:62px;right:clamp(44px,9vw,64px)}
}

/* two-up cards from 520 (roomy enough for a comfortable measure) */
@media(min-width:520px) and (max-width:680px){
  .gy-cards3{grid-template-columns:1fr 1fr;column-gap:44px}
  .gy-cards3 .gy-vcard:nth-child(3){grid-column:1 / -1}
}

/* seam guard: at exactly 680 (tablet edge) the desktop grid resumes cleanly */
@media(min-width:681px) and (max-width:820px){
  .gy3-wrap{padding-left:clamp(52px,9vw,90px)}
}