/* ==========================================================================
   First view: STACK, band (obi), category tabs, latest three, fixed buttons
   Mobile-first ("column"), then the "spread" layout for wide landscape screens.
   The first view is never taller than --fv-max.
   ========================================================================== */

/* ---------- column layout (phones, tablets in portrait, short windows) ---------- */
.fv{position:relative}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;height:clamp(500px,100svh,var(--fv-max));padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}

.corner{display:flex;flex-wrap:wrap;align-items:center;column-gap:.7em;row-gap:3px;padding:12px var(--m) 0}
.corner span{white-space:nowrap}
.corner i{display:block;flex:none;width:1.8em;height:1px;background:currentColor}
@media (max-width:399px){.corner{letter-spacing:.1em;column-gap:.6em}.corner i{width:1.3em}}
.corner--tl{grid-area:1/1/2/2}
.corner--tr{grid-area:1/2/2/3;justify-content:flex-end;text-align:right}
.corner--bl{grid-area:5/1/6/2;padding:10px var(--m) 12px}
.corner--br{grid-area:5/2/6/3;justify-content:flex-end;text-align:right;padding:10px var(--m) 12px}

.masthead{grid-area:2/1/3/3;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 var(--m);padding:10px 0;border-bottom:2px solid var(--ink)}
.logo{font-size:20px;font-weight:900;line-height:1;letter-spacing:0}
.logo a{display:inline-grid;row-gap:.1em}
.logo a span{display:block;text-align:justify;text-align-last:justify;text-justify:inter-character}
.masthead__toggle{margin:-6px -8px -6px 0}

/* ---------- STACK ---------- */
.stack{grid-area:3/1/4/3;position:relative;min-height:0;overflow:hidden;overflow:clip;overflow-clip-margin:var(--clip-top,0px)}
.stack__fit{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.glyphs{position:absolute;left:0;top:0;margin:0;font-family:var(--lat);font-weight:400;font-stretch:75%;font-size:var(--f,60vh);line-height:1;letter-spacing:0;white-space:nowrap;font-feature-settings:normal;transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scaleY(var(--s,1));-webkit-user-select:none;user-select:none}
.glyphs>span{position:absolute;top:0}
.stack__tier{position:absolute;inset:0}
/* each tier carries the colour of one layer: 基本 at the foundation, 手順 at the top */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .glyphs{color:transparent;background-image:var(--bands,linear-gradient(to top,var(--l1) 0 30%,var(--l3) 30% 60%,var(--l6) 60%));background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
  .stack.is-rot .glyphs{background-image:none;color:inherit}
}
.js .stack:not(.is-fitted) .stack__word,.js.motion .stack:not(.is-built) .stack__word{visibility:hidden}
.stack.is-stacking .stack__tier{animation:dropY 720ms cubic-bezier(.16,.84,.24,1) both}
.stack.is-rot.is-stacking .stack__tier{animation-name:dropX}
@keyframes dropY{from{translate:0 calc(var(--d) * -1)}to{translate:0 0}}
@keyframes dropX{from{translate:var(--d) 0}to{translate:0 0}}
.probe-lat{font-family:var(--lat);font-stretch:75%;font-weight:400}
.probe-jp{font-family:var(--jp);font-weight:900}

/* ---------- band and catch ---------- */
.obi{grid-area:4/1/5/3;margin-top:10px;padding:14px var(--m) 16px;background:var(--ink);color:var(--paper);min-width:0}
.catch{font-weight:900;font-size:var(--catch-f,min(8.6vw,46px));line-height:1.16;letter-spacing:-.045em;font-feature-settings:"palt" 1}
.catch em{font-style:normal}
.hl{color:var(--obi-em)}
.catch .ph{display:inline-block;white-space:nowrap}
.catch .ai{letter-spacing:-.01em;margin-right:.03em}
.ch,.ch>span{display:inline-block}
.is-typing .ch{clip-path:polygon(-40% -20%,140% -20%,140% 100%,-40% 100%)}
.is-typing .ch>span{animation:rise 460ms cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{translate:0 110%}to{translate:0 0}}
.js.motion .catch__set{visibility:hidden}
.js.motion .catch__set.is-typing,.js.motion .catch__set.is-done{visibility:visible}

/* ---------- category tabs ---------- */
.cats{padding:28px var(--m) 0}
.cats__label{margin-bottom:10px}
.tablist{display:flex;flex-wrap:wrap;gap:2px 0;margin-left:-.72em}
.tab{display:inline-flex;align-items:center;min-height:40px;padding:0 .72em;font-size:16px;font-weight:900;line-height:1.2;letter-spacing:.01em;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--strata) left bottom/100% 3px no-repeat,var(--ink);color:var(--paper)}
.tab:hover:not([aria-selected="true"]){text-decoration:underline;text-decoration-color:var(--ul);text-decoration-thickness:2px;text-underline-offset:.3em}

/* ---------- latest three ---------- */
.fv-latest{padding:32px var(--m) 0}
.fv-latest__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.fv-latest__title{font-size:16px;font-weight:900;line-height:1.3;letter-spacing:.06em}
.post{border-bottom:1px solid var(--ink)}
.post__link{display:block;padding:22px 0 24px}
.post__cat{display:flex;align-items:center;gap:.55em;margin-bottom:12px;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.02em}
.post__cat::before{content:"";flex:none;width:1.2em;height:3px;background:var(--lc,var(--ink))}
.post__title{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;font-weight:700}
.post__no{font-family:var(--lat);font-stretch:75%;font-weight:400;font-size:84px;line-height:.8;letter-spacing:0;font-feature-settings:normal;color:var(--ul)}
.post__no>span{display:block}
.posts.is-fit .post__no{position:relative;align-self:stretch;width:var(--nw,1em)}
.posts.is-fit .post__no>span{position:absolute;left:0;top:0;font-size:var(--nf);line-height:1;white-space:nowrap;transform:translate(var(--nx,0px),var(--nt,0px))}
.post__body{display:flex;flex-direction:column;gap:8px;min-width:0;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@supports (word-break:auto-phrase){.post__body{word-break:auto-phrase}}
.post__main{font-size:clamp(20px,5.6vw,24px);line-height:1.4;letter-spacing:-.01em}
.post__sub{font-size:16px;font-weight:500;line-height:1.65;letter-spacing:0;color:var(--ink-2)}
.post__link:hover .post__main{text-decoration:underline;text-decoration-color:var(--ul);text-decoration-thickness:2px;text-underline-offset:.16em}
.empty{padding:18px 0 4px;font-size:16px;line-height:1.6}
.empty button{display:inline-block;margin-top:6px;min-height:40px;font-weight:900;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}

/* ---------- buttons: fixed bar on phones ---------- */
.cta{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.btn{display:flex;align-items:center;justify-content:space-between;gap:10px;height:calc(var(--bar-h) + env(safe-area-inset-bottom));padding:0 var(--m) env(safe-area-inset-bottom);font-size:17px;font-weight:900;line-height:1.2;letter-spacing:.02em}
.btn--paper{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper);border:2px solid var(--ink)}
.btn__label{white-space:nowrap}
.btn__arrow{font-size:18px;line-height:1;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .btn__arrow{translate:4px 0}
.btn:focus-visible{outline-offset:-7px}
.btn--ink:focus-visible{outline-color:var(--paper)}
@media (max-width:359px){
  .btn{justify-content:center;padding:0 10px env(safe-area-inset-bottom);font-size:16px}
  .btn__arrow{display:none}
}

@media (min-width:600px){
  .hero{padding-bottom:88px}
  .cta{left:auto;right:24px;bottom:24px;grid-template-columns:repeat(2,212px);gap:var(--btn-gap)}
  .btn{height:64px;padding:0 18px}
  .btn:focus-visible{outline-offset:3px}
  .btn--ink:focus-visible{outline-color:var(--ink)}
}

/* ---------- short landscape phones ---------- */
@media (orientation:landscape) and (max-height:540px){
  .hero{height:max(100svh,320px);padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .corner{padding-top:8px}
  .corner--bl,.corner--br{padding:6px var(--m) 8px}
  .masthead{padding:6px 0 8px}
  .logo{font-size:18px}
  .logo a{display:inline-flex}
  .logo a span{text-align:left;text-align-last:auto}
  .obi{margin-top:6px;padding:10px var(--m) 12px}
  .cta{left:0;right:0;bottom:0;grid-template-columns:1fr 1fr;gap:0}
  .btn{height:calc(48px + env(safe-area-inset-bottom));padding:0 var(--m) env(safe-area-inset-bottom)}
  .btn:focus-visible{outline-offset:-7px}
  .btn--ink:focus-visible{outline-color:var(--paper)}
}

/* ---------- spread layout: wide landscape screens ----------
   columns: [edge] [STACK] [gutter] [list] [edge]; the edges absorb any width
   beyond STACK + --side-max, so very wide screens keep the composition centred
   while the band still bleeds off the left edge. */
@media (min-width:1024px) and (min-height:640px) and (orientation:landscape){
  .fv{display:grid;min-height:var(--fv-h);grid-template-columns:minmax(var(--m),1fr) var(--stack-w,52vw) var(--gut) minmax(0,var(--side-max)) minmax(var(--m),1fr);grid-template-rows:var(--m) auto 20px 1fr 12px var(--obi-h) var(--m)}
  .hero{display:contents}
  .corner{grid-area:auto;padding:0;flex-wrap:nowrap;white-space:nowrap;align-self:center}
  .corner--tl{grid-column:2/5;grid-row:1;justify-self:start}
  .corner--tr{grid-column:2/5;grid-row:1;justify-self:end}
  .corner--bl{grid-column:2/5;grid-row:7;justify-self:start;padding:0}
  .corner--br{grid-column:2/5;grid-row:7;justify-self:end;padding:0}
  .masthead{grid-column:2/5;grid-row:2;margin:0;padding:0 0 12px}
  .masthead__toggle{margin:0 -8px -2px 0}
  .logo{font-size:22px}
  .stack{grid-column:2;grid-row:4}
  /* --edge is the width of the left edge column (set by hero.js) so the catch starts on STACK's left line */
  .obi{grid-column:1/5;grid-row:6;margin:0 calc(var(--btn-w) * 2 + var(--btn-gap) + 16px) 0 0;padding:0 var(--m) 0 var(--edge,var(--m));display:flex;align-items:center}
  /* the tabs share the logo's row; the 52px gap for the theme toggle is a margin, not padding,
     so the tabs' box never lies over the toggle and swallows its clicks */
  .cats{grid-column:2/5;grid-row:2;justify-self:end;align-self:end;max-width:calc(100% - 262px);margin-right:52px;padding:0}
  .cats__label{display:none}
  .tablist{margin:0 -.72em 0 0;justify-content:flex-end}
  .fv-latest{grid-column:4;grid-row:4;padding:0;display:flex;flex-direction:column}
  .fv-latest__panel{flex:1;display:flex;flex-direction:column}
  .posts{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
  .post{flex:none;min-height:calc(100% / 3);display:flex;flex-direction:column;justify-content:flex-end}
  .post__main{font-size:calc(clamp(19px,1.6vw,26px) * var(--k,1))}
  .post__sub{font-size:max(16px,calc(16px * var(--k,1)))}
  .post__cat{font-size:max(16px,calc(15px * var(--k,1)))}
  .post__link{padding:calc(18px * var(--k,1)) 0 calc(20px * var(--k,1))}
  .posts.is-measure{display:block;flex:none}
  .catch{white-space:nowrap}

  /* docked: the two buttons sit in the band's row while the band is on screen */
  .cta{position:relative;z-index:30;grid-column:4;grid-row:6;justify-self:end;left:auto;right:auto;bottom:auto;height:100%;display:flex;gap:var(--btn-gap)}
  .btn{width:var(--btn-w);height:100%;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:12px 16px 14px;font-size:18px}
  .btn__arrow{order:-1;align-self:flex-end;font-size:20px}
  /* floating: once the band has scrolled away they stay at the bottom right, smaller */
  .cta.is-floating{position:fixed;right:var(--m);bottom:var(--m);height:56px;animation:cta-in .4s cubic-bezier(.2,.8,.2,1) both}
  .cta.is-floating .btn{flex-direction:row;align-items:center;width:auto;min-width:200px;padding:0 18px;font-size:17px}
  .cta.is-floating .btn__arrow{order:0;align-self:center;font-size:18px}
  @keyframes cta-in{from{translate:0 calc(100% + var(--m))}to{translate:0 0}}
}
@media (min-width:1024px) and (max-height:760px) and (min-height:640px) and (orientation:landscape){
  .post__link{padding:calc(14px * var(--k,1)) 0 calc(16px * var(--k,1))}
  .post__cat{margin-bottom:6px}
  .post__main{font-size:calc(clamp(18px,1.5vw,22px) * var(--k,1))}
}