/* hidden must always win — real bug seen before */ [hidden]{display:none!important} /* ============================================================ うつろい UTSUROI — style.css Palette named for the times of day and their light. ============================================================ */ :root{ /* Palette (only place raw HEX is allowed) */ --kami:#F6F2E9; /* unbleached paper — base surface */ --sumi:#26221C; /* sumi ink — text on light panels */ --shinonome:#E08A73; /* dawn coral */ --komorebi:#8FA153; /* morning leaf-gold */ --hakuu:#6D8CA6; /* afternoon rain-blue */ --tasogare:#C4763B; /* dusk amber */ --geppaku:#BFCDDB; /* moonlit pale blue */ --yoru:#171D2B; /* night surface */ /* Runtime environment light — JS interpolates 5 stops in oklab into this */ --hikari:#E08A73; /* Easing vocabulary — fixed to 3 (keeps the whole site's tempo coherent) */ --ease:cubic-bezier(.33,1,.68,1); /* easeOutCubic — main */ --ease-move:cubic-bezier(.65,0,.35,1); /* easeInOutCubic — big moves */ /* Panel tint amount over paper */ --tint:20%; color-scheme:light; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:"Zen Kaku Gothic New",system-ui,sans-serif; color:var(--sumi); background:var(--kami); overflow-x:hidden; /* default: page scrolls vertically (mobile / no-JS) */ -webkit-font-smoothing:antialiased; } .is-horizontal body{overflow:hidden} /* horizontal mode owns scrolling */ img{max-width:100%;display:block} a{color:inherit} /* --- Continuous sky (environment light) --- */ .sky{ position:fixed;inset:0;z-index:0; background:color-mix(in oklab, var(--kami), var(--hikari) var(--tint)); transition:background-color .12s linear; will-change:background-color; } /* --- Drifting light motes --- */ .motes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;will-change:transform} .mote{ position:absolute;border-radius:50%; background:radial-gradient(circle at 50% 50%, color-mix(in oklab,var(--hikari),#fff 30%) 0%, transparent 70%); opacity:.34;filter:blur(2px); } /* --- DEMO badge --- */ .badge{ position:fixed;top:18px;right:18px;z-index:40; font-family:"Fraunces",serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--sumi); padding:6px 11px;border:1px solid color-mix(in oklab,var(--hikari),transparent 55%); background:color-mix(in oklab,var(--kami),transparent 25%); border-radius:2px;backdrop-filter:blur(4px);pointer-events:none; } /* ============================================================ Layout — default is VERTICAL stack (safe / no-JS / mobile). JS adds .is-horizontal to when eligible. ============================================================ */ .journey-viewport{position:relative;z-index:2} .journey-track{display:block} .panel{position:relative;width:100%;padding:8vh 7vw} .panel__inner{position:relative;max-width:1180px;margin:0 auto} /* Horizontal (desktop, non-touch) */ .is-horizontal body{overflow:hidden} .is-horizontal .journey-viewport{ height:100svh;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none;will-change:scroll-position; } .is-horizontal .journey-viewport::-webkit-scrollbar{display:none} .is-horizontal .journey-track{display:flex;flex-flow:row nowrap;width:max-content;height:100%} .is-horizontal .panel{ height:100%;flex:0 0 auto;width:auto; padding:10vh clamp(48px,6vw,120px); display:flex;align-items:center; } .is-horizontal .panel__inner{height:100%;max-width:none;width:100%;display:flex;align-items:center} /* Panel widths (horizontal only) */ .is-horizontal .panel--intro{width:100vw} .is-horizontal .panel--ink{min-width:88vw} .is-horizontal .panel--craft{min-width:110vw} .is-horizontal .panel--lineup{min-width:86vw} .is-horizontal .panel--footer{min-width:56vw} /* reduced-motion horizontal: native snap instead of lerp hijack */ .is-horizontal.reduced .journey-viewport{scroll-snap-type:x proximity} .is-horizontal.reduced .panel{scroll-snap-align:center} /* ============================================================ Typography primitives ============================================================ */ .wordmark{font-family:"Fraunces",serif;font-weight:500;letter-spacing:.34em;text-transform:uppercase} .kicker{ font-family:"Fraunces",serif;font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase; color:color-mix(in oklab,var(--sumi),transparent 25%); } .vertical{writing-mode:vertical-rl;text-orientation:upright;font-feature-settings:"vert" on} .colorname{ writing-mode:vertical-rl;font-family:"Zen Old Mincho",serif;font-weight:700; margin:0;line-height:1.06;display:flex;flex-flow:row nowrap;align-items:flex-start;gap:.15em; } .colorname .cn-ja{font-size:clamp(3rem,7.4vh,5.4rem);letter-spacing:.05em} .colorname .cn-en{ writing-mode:horizontal-tb;font-family:"Fraunces",serif;font-weight:400; font-size:11px;letter-spacing:.34em;text-transform:uppercase; color:color-mix(in oklab,var(--sumi),transparent 35%); align-self:flex-start;margin-top:.4em;writing-mode:vertical-rl;text-orientation:sideways; } .phrase{ font-family:"Zen Old Mincho",serif;font-weight:600; font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.7;margin:0 0 1.4em; letter-spacing:.02em; } .phrase--hero{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.5} .origin{ font-size:14.5px;line-height:2.1;max-width:32em;margin:0 0 1.5em;font-weight:400; color:color-mix(in oklab,var(--sumi),transparent 8%); } .spec{ font-family:"Fraunces",serif;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:color-mix(in oklab,var(--sumi),transparent 30%);margin:0; } .scene__time{ font-family:"Fraunces",serif;font-size:12px;font-weight:500;letter-spacing:.3em; color:color-mix(in oklab,var(--sumi),transparent 20%);margin:0; } /* ============================================================ Reveal animations ============================================================ */ .reveal{opacity:0;transform:translateX(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0s)} .is-enter .reveal{opacity:1;transform:none} .reveal-chars{--cbase:0s} .reveal-chars .char{ display:inline-block;opacity:0;filter:blur(8px); transition:opacity .8s var(--ease),filter .8s var(--ease); transition-delay:var(--cd,0s); } /* vertical-rl already flows inline-block glyphs top-to-bottom in reading order */ .is-enter .reveal-chars .char{opacity:1;filter:blur(0)} /* ============================================================ Scene photo windows (the "hanging-scroll" frame) ============================================================ */ .scene{position:relative;margin:0;overflow:hidden;background:color-mix(in oklab,var(--kami),var(--sumi) 6%)} .scene img{width:100%;height:100%;object-fit:cover} .scene::after{ /* subtle paper edge, all four sides — never a single coloured border */ content:"";position:absolute;inset:0;border:1px solid color-mix(in oklab,var(--sumi),transparent 82%);pointer-events:none; } .scene figcaption{position:absolute;left:14px;bottom:12px;padding:4px 9px;background:color-mix(in oklab,var(--kami),transparent 20%);backdrop-filter:blur(3px);border-radius:2px} /* ============================================================ Bottle figure ============================================================ */ .bottle-fig{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center} .bottle{display:block;height:auto;filter:drop-shadow(0 6px 10px rgba(38,34,28,.10))} .bottle-shadow{ position:absolute;left:50%;bottom:-4px;transform:translateX(-50%); width:64%;height:14px;border-radius:50%; background:color-mix(in oklab,var(--sumi),transparent 10%);opacity:.18;filter:blur(6px); } /* Sink the bottle into the night ambience (photo was shot in bright studio light) */ .panel--night .bottle{filter:brightness(.85) saturate(.92) drop-shadow(0 6px 14px rgba(0,0,0,.45))} /* Photo bottles are ~0.6:1 (w:h) — widths below read as ~1.68x heights */ .bottle-fig--sm .bottle{width:clamp(88px,13vh,120px)} .bottle-fig--md .bottle{width:clamp(106px,17vh,150px)} .bottle-fig--lg .bottle{width:clamp(130px,22vh,180px)} /* ============================================================ 01 Intro ============================================================ */ .panel--intro .panel__inner{ display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:center;gap:clamp(32px,5vw,72px); } .intro__mark{display:flex;flex-direction:column;gap:.7em;text-align:left} .intro__h1{display:contents;font-weight:inherit;margin:0} .intro__mark .wordmark{font-size:clamp(1.6rem,3vw,2.4rem)} .intro__mark .wordmark-ja{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:.14em} .intro__mark .kicker{margin-top:.4em} .intro__poem{ font-family:"Zen Old Mincho",serif;font-weight:600; font-size:clamp(1rem,1.7vh,1.18rem);line-height:2.15;letter-spacing:.08em; max-height:76vh;color:color-mix(in oklab,var(--sumi),transparent 4%); } .intro__hint{ position:absolute;bottom:2vh;left:50%;transform:translateX(-50%); font-family:"Fraunces",serif;font-size:12px;letter-spacing:.24em; color:color-mix(in oklab,var(--sumi),transparent 25%);white-space:nowrap; } .intro__hint .arrow{display:inline-block;animation:nudge 2.4s var(--ease) infinite} @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} .intro__hint .hint-sp,.dir-sp{display:none} @media (max-width:880px){ .intro__hint .hint-pc,.dir-pc{display:none} .intro__hint .hint-sp,.dir-sp{display:inline} .intro__hint .arrow--down{animation-name:nudgeDown} } @keyframes nudgeDown{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* ============================================================ Ink panel layouts — each arranged differently ============================================================ */ .panel--ink .panel__inner{gap:clamp(28px,4vw,64px)} /* A — 東雲: name / text left, photo right, small bottle */ .layout-a .panel__inner{display:flex;flex-flow:row nowrap;align-items:center} .layout-a .colorname{align-self:stretch;height:70vh} .layout-a .ink-body{flex:1 1 30em;max-width:34em} .layout-a .scene--tall{flex:0 0 clamp(240px,26vw,360px);height:72vh} .layout-a .bottle-fig{margin-left:-1vw} /* B — 木漏れ日: full-bleed photo, text overlay */ .layout-b .panel__inner{display:block;position:relative;width:100%;height:80vh;align-items:stretch} .layout-b .scene--bleed{position:absolute;inset:0;width:100%;height:100%} .layout-b .overlay-veil{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in oklab,var(--kami),transparent 25%) 0%,color-mix(in oklab,var(--kami),transparent 55%) 38%,transparent 70%)} .layout-b .colorname{position:absolute;top:6vh;right:5%;height:auto;z-index:3} .layout-b .colorname .cn-ja{color:var(--kami);text-shadow:0 2px 12px rgba(23,29,43,.4)} .layout-b .colorname .cn-en{color:color-mix(in oklab,var(--kami),transparent 20%)} .layout-b .ink-body--overlay{position:absolute;left:5%;bottom:7vh;z-index:3;max-width:32em} .layout-b .ink-body--overlay .phrase{color:var(--sumi)} .layout-b .bottle-fig{position:absolute;right:8%;bottom:7vh;z-index:3} /* C — 白雨: photo left, big bottle, text right */ .layout-c .panel__inner{display:flex;flex-flow:row nowrap;align-items:center;gap:clamp(20px,2.4vw,44px)} .layout-c .scene--portrait{flex:0 0 clamp(240px,25vw,360px);height:74vh} .layout-c .bottle-fig--lg{align-self:flex-end;margin-bottom:6vh} .layout-c .bottle-fig--lg .bottle{width:clamp(140px,22vh,184px)} .layout-c .colorname{height:56vh;align-self:flex-start;margin-top:4vh} .layout-c .ink-body{flex:0 1 27em;max-width:28em} /* D — 黄昏: hero phrase centered, photo offset high, bottle low-right */ .layout-d .panel__inner{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;align-items:center;gap:clamp(24px,3vw,56px);width:100%} .layout-d .colorname{grid-column:1;grid-row:1 / span 2;height:66vh;align-self:center} .layout-d .scene--offset{grid-column:3;grid-row:1;width:clamp(200px,20vw,300px);height:40vh;justify-self:end;transform:translateY(-2vh)} .layout-d .phrase--hero{grid-column:2;grid-row:1;align-self:end;max-width:16em} .layout-d .ink-body--center{grid-column:2;grid-row:2;max-width:34em} .layout-d .bottle-fig{grid-column:3;grid-row:2;justify-self:end;align-self:end;margin-bottom:2vh} /* E — 月白: night, small window, maximum breathing space */ .panel--night{--sumi:var(--geppaku)} .panel--night .night-veil{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,transparent 0%,var(--yoru) 16%,var(--yoru) 84%,transparent 100%)} .panel--night .panel__inner{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(32px,6vw,110px)} .panel--night .colorname{grid-column:1;height:60vh} .panel--night .colorname .cn-ja{color:var(--geppaku)} .panel--night .colorname .cn-en{color:color-mix(in oklab,var(--geppaku),transparent 40%)} .layout-e .scene--window{grid-column:2;width:clamp(200px,19vw,290px);height:52vh;justify-self:center} .layout-e .ink-body--night{grid-column:3;max-width:30em} .panel--night .phrase{color:var(--geppaku)} .panel--night .origin{color:color-mix(in oklab,var(--geppaku),transparent 12%)} .panel--night .spec{color:color-mix(in oklab,var(--geppaku),transparent 32%)} /* caption sits on a light paper chip, so keep its text dark even at night */ .panel--night .scene figcaption{color:color-mix(in oklab,var(--yoru),transparent 8%);background:color-mix(in oklab,var(--geppaku),transparent 25%)} .panel--night .bottle-fig{grid-column:3;justify-self:end;position:absolute;right:7vw;bottom:9vh} .layout-e .ink-body--night{padding-bottom:14vh} /* ============================================================ 07 Craft — にじみまで、設計する。 (unequal figures) ============================================================ */ .panel--craft .panel__inner{display:flex;flex-flow:row nowrap;align-items:center;gap:clamp(40px,6vw,110px);width:100%} .craft__lead{flex:0 0 clamp(300px,34vw,440px)} .craft__title{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.35;margin:0 0 1.1em;letter-spacing:.03em} .craft__body{font-size:14.5px;line-height:2.1;max-width:30em;margin:0 0 1.3em;color:color-mix(in oklab,var(--sumi),transparent 8%)} .craft__figures{flex:1 1 auto;display:flex;flex-flow:row nowrap;align-items:flex-end;justify-content:flex-start;gap:clamp(28px,4vw,70px);margin:0} .fig{margin:0} .fig dt{font-family:"Zen Old Mincho",serif;font-size:1rem;color:color-mix(in oklab,var(--sumi),transparent 25%);margin-bottom:.3em;letter-spacing:.1em} .fig dd{margin:0;display:flex;align-items:baseline;gap:.2em;line-height:1;color:var(--sumi)} .fig__num{font-family:"Fraunces",serif;font-weight:500} .fig__unit{font-family:"Zen Old Mincho",serif;font-size:1rem;color:color-mix(in oklab,var(--sumi),transparent 20%)} .fig__note{font-size:12px;line-height:1.8;max-width:12em;margin:.7em 0 0;color:color-mix(in oklab,var(--sumi),transparent 30%)} /* unequal sizes + vertical offsets */ .fig--1{transform:translateY(0)} .fig--1 .fig__num{font-size:clamp(3.2rem,7vw,5.6rem)} .fig--2{transform:translateY(-8vh)} .fig--2 .fig__num{font-size:clamp(2.2rem,4.4vw,3.4rem)} .fig--3{transform:translateY(4vh)} .fig--3 .fig__num{font-size:clamp(2.6rem,5.4vw,4.2rem)} .craft__disclaim{position:absolute;bottom:5vh;left:clamp(48px,6vw,120px);font-size:11px;color:color-mix(in oklab,var(--sumi),transparent 45%);margin:0} /* ============================================================ 08 Lineup + CTA ============================================================ */ .panel--lineup .panel__inner{display:flex;flex-flow:row nowrap;align-items:center;gap:clamp(40px,6vw,90px);width:100%} .lineup__head{flex:0 0 clamp(280px,30vw,400px)} .lineup__title{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1.4;margin:0 0 1em;letter-spacing:.03em} .lineup__price{font-size:15px;line-height:1.9;margin:0 0 .3em} .lineup__price--set{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:17px;margin-bottom:1.4em} .lineup__note{font-size:12px;color:color-mix(in oklab,var(--sumi),transparent 32%);margin:1.4em 0 0;max-width:26em;line-height:1.8} .lineup__shelf{flex:1 1 auto;display:flex;flex-flow:row nowrap;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,22px)} /* size強弱 across the five */ .lu--1 .bottle{width:clamp(88px,13vh,120px)} .lu--2 .bottle{width:clamp(112px,18vh,158px)} .lu--3 .bottle{width:clamp(96px,15vh,132px)} .lu--4 .bottle{width:clamp(124px,21vh,178px)} .lu--5 .bottle{width:clamp(84px,12vh,112px)} .lu--2{margin-bottom:2vh}.lu--4{margin-bottom:4vh}.lu--5{margin-bottom:-1vh} /* Button */ .btn{ font-family:"Zen Kaku Gothic New",sans-serif;font-size:14px;font-weight:500;letter-spacing:.06em; color:var(--sumi);background:transparent;cursor:pointer; padding:13px 26px;border:1px solid color-mix(in oklab,var(--hikari),var(--sumi) 20%);border-radius:2px; transition:background-color .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease); } .btn:hover,.btn:focus-visible{background:var(--hikari);color:var(--kami);border-color:var(--hikari)} .cta{margin-top:.4em} /* ============================================================ 09 Footer ============================================================ */ .panel--footer .panel__inner{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:clamp(40px,6vw,90px)} .footer__brand{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:clamp(1.4rem,3.4vh,2.2rem);letter-spacing:.14em;height:auto;max-height:66vh;color:color-mix(in oklab,var(--sumi),transparent 6%)} .footer__meta{display:flex;flex-direction:column;gap:1.1em;max-width:24em} .footer__demo{font-size:13px;line-height:1.9;margin:0;color:color-mix(in oklab,var(--sumi),transparent 12%)} .footer__credit{font-family:"Fraunces",serif;font-size:12px;letter-spacing:.2em;margin:0;color:color-mix(in oklab,var(--sumi),transparent 22%)} .footer__link a{font-family:"Fraunces",serif;font-size:13px;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--hikari),transparent 40%);padding-bottom:2px;transition:border-color .3s ease} .footer__link a:hover{border-color:var(--hikari)} /* ============================================================ 一日の帯ナビ (day-band) ============================================================ */ .daynav{ position:fixed;left:0;right:0;bottom:0;z-index:35; display:flex;align-items:center;gap:16px; padding:14px clamp(20px,4vw,48px) 18px; pointer-events:none; } .daynav__label{ font-family:"Zen Old Mincho",serif;font-size:12px;letter-spacing:.14em;white-space:nowrap; color:color-mix(in oklab,var(--sumi),transparent 30%);flex:0 0 auto; } .daynav__track{position:relative;flex:1 1 auto;height:22px;display:flex;align-items:center;pointer-events:auto} .daynav__bar{position:relative;width:100%;height:3px;border-radius:2px;background:color-mix(in oklab,var(--sumi),transparent 82%);overflow:hidden} .daynav__fill{ position:absolute;inset:0; background:linear-gradient(90deg,var(--shinonome),var(--komorebi) 32%,var(--hakuu) 55%,var(--tasogare) 78%,var(--geppaku)); clip-path:inset(0 100% 0 0); } .daynav__stop{ position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px; background:none;border:none;cursor:pointer;padding:0; } .daynav__stop::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:color-mix(in oklab,var(--sumi),transparent 55%);transition:background-color .3s ease,transform .3s ease} .daynav__stop:hover::after,.daynav__stop:focus-visible::after{background:var(--hikari);transform:scale(1.3)} .daynav__t{ position:absolute;bottom:20px;left:50%;transform:translateX(-50%); font-family:"Fraunces",serif;font-size:10px;letter-spacing:.12em;white-space:nowrap; color:color-mix(in oklab,var(--sumi),transparent 20%); opacity:0;transition:opacity .25s ease;pointer-events:none; } .daynav__stop:hover .daynav__t,.daynav__stop:focus-visible .daynav__t{opacity:1} .daynav__dot{ position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%; background:var(--kami);border:1.5px solid var(--hikari); box-shadow:0 0 10px color-mix(in oklab,var(--hikari),transparent 45%); } .daynav__dot.is-moon{background:var(--geppaku);border-color:color-mix(in oklab,var(--geppaku),#fff 20%);box-shadow:inset -4px 0 0 color-mix(in oklab,var(--yoru),transparent 20%),0 0 10px color-mix(in oklab,var(--geppaku),transparent 40%)} /* ============================================================ Modal ============================================================ */ .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px} .modal__scrim{position:absolute;inset:0;background:color-mix(in oklab,var(--yoru),transparent 25%);backdrop-filter:blur(3px)} .modal__panel{ position:relative;max-width:400px;width:100%;text-align:center; background:var(--kami);border:1px solid color-mix(in oklab,var(--hikari),transparent 40%);border-radius:3px; padding:40px 34px 34px; } .modal__badge{font-family:"Fraunces",serif;font-size:10px;letter-spacing:.3em;color:color-mix(in oklab,var(--sumi),transparent 40%);margin:0 0 14px} .modal__title{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:1.25rem;line-height:1.6;margin:0 0 .6em} .modal__desc{font-size:14px;line-height:1.9;margin:0 0 1.8em;color:color-mix(in oklab,var(--sumi),transparent 12%)} /* Focus visibility */ :focus-visible{outline:2px solid var(--hikari);outline-offset:3px} /* ============================================================ Responsive — VERTICAL stack (<=880px or touch / no-JS) ============================================================ */ @media (max-width:880px){ html.is-horizontal .journey-viewport{height:auto;overflow:visible} html.is-horizontal .journey-track{display:block;width:100%} html.is-horizontal .panel{width:100%!important;min-width:0!important;height:auto;display:block;padding:9vh 8vw} html.is-horizontal .panel__inner{height:auto;display:block} } /* Simplify each layout when stacked vertically */ @media (max-width:880px){ .panel__inner, .layout-a .panel__inner,.layout-b .panel__inner,.layout-c .panel__inner, .layout-d .panel__inner,.panel--night .panel__inner, .panel--craft .panel__inner,.panel--lineup .panel__inner, .panel--intro .panel__inner,.panel--footer .panel__inner{ display:flex;flex-direction:column;align-items:flex-start;gap:26px;height:auto;position:relative; grid-template-columns:none;grid-template-rows:none; } /* Neutralise desktop flex-basis (would become forced heights in a column) */ .panel__inner > *{flex:0 0 auto!important;align-self:stretch;height:auto!important;margin:0} .ink-body,.craft__lead,.lineup__head{max-width:100%} /* Vertical headings back to horizontal for readability. Also reset vert glyph forms — leftover "vert" features float punctuation. */ .colorname,.vertical{writing-mode:horizontal-tb;text-orientation:mixed;font-feature-settings:normal;height:auto!important} .colorname{flex-flow:row wrap;align-items:baseline;gap:.5em;margin:0} .colorname .cn-en{transform:none;writing-mode:horizontal-tb;margin-top:0} .intro__poem{max-height:none;font-size:1.05rem} .panel--intro .panel__inner{flex-direction:column} .intro__hint{position:static;transform:none;left:auto;margin-top:12px} /* Layout B overlay -> normal flow */ .layout-b .panel__inner{height:auto} .layout-b .scene--bleed{position:relative;inset:auto;width:100%;height:auto} .layout-b .overlay-veil{display:none} .layout-b .colorname,.layout-b .ink-body--overlay,.layout-b .bottle-fig, .panel--night .bottle-fig{position:static;right:auto;bottom:auto;top:auto} .layout-b .colorname .cn-ja{color:var(--sumi);text-shadow:none} .layout-b .colorname .cn-en{color:color-mix(in oklab,var(--sumi),transparent 35%)} .scene,.scene--tall,.scene--portrait,.scene--offset,.scene--window,.scene--bleed{ width:100%!important;height:auto!important;flex:none;transform:none!important;aspect-ratio:3/4;max-height:64vh } .scene img{aspect-ratio:3/4} /* Craft / lineup vertical */ .craft__figures{flex-flow:row wrap;gap:24px 34px} .fig--1,.fig--2,.fig--3{transform:none} .craft__disclaim{position:static;margin-top:10px} .lineup__shelf{flex-flow:row wrap;justify-content:flex-start;gap:14px} .lu .bottle{width:clamp(72px,20vw,110px)!important} .lu--2,.lu--4,.lu--5{margin-bottom:0} .panel--night{background:var(--yoru)} .panel--night .night-veil{display:none} .bottle-fig{margin:0!important} .footer__brand{max-height:none} .daynav__label{display:none} } @media (max-width:480px){ .phrase--hero{font-size:1.7rem} .colorname .cn-ja{font-size:2.6rem} .badge{top:12px;right:12px;font-size:9px;padding:5px 8px} } /* Short viewports: tighten vertical rhythm in horizontal mode */ @media (min-width:881px) and (max-height:640px){ .is-horizontal .panel{padding-top:7vh;padding-bottom:9vh} .layout-a .colorname,.layout-c .colorname,.layout-d .colorname,.panel--night .colorname{height:64vh} } /* ============================================================ reduced-motion ============================================================ */ @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .reveal-chars .char{opacity:1;filter:none;transition:none} .intro__hint .arrow{animation:none} .mote{display:none} .sky{transition:none} *{scroll-behavior:auto} }