/* Blog article page. Layout measured from the reference project page at 1440 and 390:
   12-column grid with 24px gutters, 12vw title, 5.5vw summary, 20/24 body, mono details,
   16:9 media rows, dark related block, floating pill. Colours come from the article theme. */
@font-face{font-family:Aeonik;src:url('../assets/fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aeonik;src:url('../assets/fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--bg:#efefef;--ink:#252621;--accent:#ab4933;--pad:24px;--gap:24px;--dark:#222;
  --sans:Aeonik,'Helvetica Neue','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --mono:'Plex Mono',ui-monospace,'Hiragino Kaku Gothic ProN','Yu Gothic',monospace;
  --pill-ease:cubic-bezier(.93,-.24,.4,1.17)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:var(--ink);font:500 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:100%;object-fit:cover}
p,h1,h2,h3,ul{margin:0;padding:0}li{list-style:none}
.mono{font:400 10.88px/1.1 var(--mono);text-transform:uppercase;letter-spacing:0}
.tag{display:inline-block;padding:8px;border-radius:20px;background:color-mix(in srgb,var(--ink) 10%,transparent);transition:background .3s}
a.tag:hover{background:color-mix(in srgb,var(--ink) 20%,transparent)}

/* header */
.a-header{position:fixed;inset:0 0 auto;z-index:1000;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:24px 38px 0;height:104px;color:var(--ink);pointer-events:none}
.a-header:before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:linear-gradient(var(--bg),transparent);mask-image:linear-gradient(#000 35%,transparent);-webkit-mask-image:linear-gradient(#000 35%,transparent)}
.a-header>*{pointer-events:auto}
.a-brand{grid-column:1/5;display:flex;gap:10px;align-items:center;align-self:start;font-size:25px;letter-spacing:-1.2px;height:44px}
.a-door{display:block;width:27px;height:32px;background:var(--accent);position:relative;border:4px solid var(--accent)}
.a-door:before,.a-door:after{content:"";position:absolute;background:var(--bg)}.a-door:before{inset:1px 8px 1px 1px}.a-door:after{inset:1px 1px 1px 11px}
.a-header-note{grid-column:7/10;max-width:220px;line-height:1.1}
.a-header-cta{grid-column:11/13;justify-self:end;align-self:start;padding:16px 22px;border-radius:40px;background:var(--ink);color:var(--bg);font-size:17.92px;line-height:25px;transition:transform .3s ease-in-out}
.a-header-cta:hover{transform:scale(1.04)}

/* page */
.a-page{position:relative;background:var(--bg);padding:144px var(--pad) var(--pad)}
.a-title{margin:24px 0 46px;font-size:12vw;line-height:.9;letter-spacing:-.0425em;font-weight:800;text-transform:uppercase;text-align:center;font-kerning:none}
.a-title:lang(ja){font-size:9.2vw;line-height:1.16;letter-spacing:-.03em;font-weight:700;margin-bottom:40px}
/* title: hidden until in view, fades back out when scrolled away (.5s ease-in-out); article.js plays
   the lines once — opacity .8s, first line from -40px, last from +40px, cubic-bezier(.53,.02,0,1) */
.a-title{opacity:0;transition:opacity .5s ease-in-out}
.a-title.is-visible{opacity:1}
.a-line{display:block;overflow:hidden;padding-bottom:10px;margin-bottom:-10px}
.a-meta{display:flex;align-items:center;gap:9px;height:40px;padding-top:15px;box-sizing:content-box}
.a-meta>span:first-child{margin-right:0}
/* hero: opacity 0 -> 1, .5s after .5s */
.a-hero{position:relative;margin:0 0 24px;padding-top:12px;aspect-ratio:1392/795;overflow:hidden;opacity:0;transition:opacity .5s linear .5s}
.is-ready .a-hero{opacity:1}
.a-hero-media{position:absolute;inset:12px 0 0;overflow:hidden}
.a-hero-media>*{position:absolute;inset:-6% 0;height:112%;will-change:transform}
.a-hero-media>.is-still{animation:a-drift 18s ease-in-out infinite alternate}
@keyframes a-drift{from{scale:1}to{scale:1.07;translate:-1.2% .8%}}
/* summary: 2em first-line indent; article.js splits it into lines and raises each character
   from calc(100% + 10px), 1s, .01s per character + .1s per line, cubic-bezier(.93,0,.03,1) */
.a-summary{--indent:2em;font-size:5.5vw;line-height:.9;letter-spacing:-.025em;font-weight:800;padding-bottom:40px;font-kerning:none;display:flow-root;visibility:hidden}
.a-summary.is-split{visibility:visible}
.a-summary:lang(ja){font-size:4.1vw;line-height:1.28;letter-spacing:-.02em;font-weight:700}
.a-summary .split-line{overflow:hidden;padding-bottom:10px;margin-bottom:-10px}
.a-summary .split-line:first-child{text-indent:var(--indent)}
/* text-indent inherits, and every inline-block is its own block container: without this reset each
   character box carries the 2em indent and a line holds a third of the text */
.a-summary .split-word,.a-summary .split-char{display:inline-block;text-indent:0}

/* chapter */
.a-chapter{padding-top:15px}
.a-chapter[hidden]{display:none}
.a-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.a-label{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.a-label:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.a-body{grid-column:1/9;columns:2;column-gap:var(--gap);font-size:20px;line-height:24px;font-weight:400;margin-bottom:80px}
.a-body:lang(ja){font-size:16px;line-height:1.95;letter-spacing:.01em}
.a-body p{break-inside:avoid;margin-bottom:24px}
.a-body h3{font-size:inherit;font-weight:700;margin-bottom:8px;break-after:avoid}
.a-body strong{font-weight:700}
/* row 2 beside the body, pulled up level with the label row (12px label + 24px gap). Spanning
   rows 1-2 instead lets the grid stretch the label row to the list's height. */
.a-side{grid-column:9/13;grid-row:2;margin-top:-36px}
.a-side .a-label{margin-bottom:24px}
.a-side ul{display:grid;gap:12px}
.a-side li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent);min-height:41px}
.a-row{display:grid;gap:var(--gap);margin:24px 0}
.a-row>figure{position:relative;margin:0;overflow:hidden;aspect-ratio:16/9;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.a-row.is-3{grid-template-columns:repeat(3,1fr)}.a-row.is-3>figure{aspect-ratio:8/9}
.a-row.is-2{grid-template-columns:repeat(2,1fr)}
.a-row figure>*{opacity:0;transition:opacity .8s ease-in-out}
.a-row figure.is-loaded>*{opacity:1}
.a-row figcaption{position:absolute;left:12px;bottom:12px;height:auto;width:auto;color:#fff;mix-blend-mode:difference}
.a-next{display:flex;justify-content:space-between;align-items:center;margin:56px 0 96px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.a-next a{font-size:5.5vw;line-height:1;letter-spacing:-.025em;font-weight:800;transition:color .3s}
.a-next a:lang(ja){font-size:4.1vw;font-weight:700}
.a-next a:hover{color:var(--accent)}
.a-chapter.is-leaving{opacity:0;transform:translateY(-12px);transition:opacity .25s ease-in,transform .25s ease-in}
.a-chapter.is-entering{opacity:0;transform:translateY(28px)}
.a-chapter.is-entered{opacity:1;transform:none;transition:opacity .6s ease-out,transform .8s cubic-bezier(.16,1,.3,1)}

/* reveals, once in view: blocks opacity .2s; rules scaleX 1s ease-out; side rows 10px / .5s, .2s apart */
.a-reveal{opacity:0;transition:opacity .2s linear}.a-reveal.is-in{opacity:1}
.a-rule{display:block;height:1px;border:0;margin:14px 0;background:color-mix(in srgb,var(--ink) 25%,transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s ease-out}
.a-rule.is-in{transform:none}
.a-side li{opacity:0;transform:translateY(10px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i,0)*.2s)}
.a-side.is-in li{opacity:1;transform:none}

/* related */
.a-related{position:relative;background:var(--dark);color:#fff;padding:0 20px 100px}
.a-related h2{font-size:3.7vw;line-height:.95;letter-spacing:-.025em;font-weight:800;padding:45px 0 15px;margin-bottom:45px;border-bottom:1px solid #fff3}
.a-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:23.5px}
.a-card figure{margin:0;aspect-ratio:451/253;overflow:hidden;background:#333}
.a-card img{transition:scale .9s cubic-bezier(.16,1,.3,1)}.a-card:hover img{scale:1.05}
.a-card-info{display:flex;gap:10px;align-items:flex-start;height:60px;padding-top:21px}
.a-card-info:before{content:"";width:10px;height:10px;margin-top:5px;background:currentColor;flex:none}
.a-card-info p{opacity:.6;margin-top:3px}
.a-card-info h3{font:inherit}
.a-all{display:block;padding:0 32px;font-size:17vw;line-height:1;letter-spacing:-.025em;font-weight:800;white-space:nowrap;color:#555;transition:color .5s}
.a-all:hover{color:#fff}
.a-sample{background:var(--dark);color:#fff9;text-align:center;padding:0 20px 120px}

/* floating chapter pill */
/* --n equal columns (set by article.js from the chapter count); the highlight is one column wide and
   sits at translate: 100% * index, .7s with overshoot. Enters from below in .5s. No gap, so that
   100% of the highlight is exactly one column. */
.a-pill{--n:3;position:fixed;left:50%;bottom:32px;z-index:100;display:grid;grid-template-columns:repeat(var(--n),minmax(max-content,1fr));padding:5px;border-radius:48px;max-width:calc(100vw - 24px);background:#fff8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#000;translate:-50% 0;transform:translateY(calc(100% + 32px));opacity:0;transition:transform .5s cubic-bezier(.53,.02,0,1) .5s,opacity .5s linear .5s;isolation:isolate}
.is-ready .a-pill{transform:none;opacity:1}
.a-pill-on{position:absolute;top:5px;left:5px;width:calc((100% - 10px)/var(--n));height:calc(100% - 10px);border-radius:40px;background:#fff;z-index:-1;opacity:0;translate:0 0;transition:translate .7s var(--pill-ease),opacity 1s ease-in-out}
.a-pill li{display:flex;justify-content:center}
.a-pill a{display:flex;align-items:baseline;gap:7px;padding:11px 17px;font-size:17.92px;line-height:19px;white-space:nowrap;transition:transform .3s ease-in-out}
.a-pill a:lang(ja){font-size:15px}
.a-pill a:hover{transform:scale(1.06)}
.a-pill a small{font:400 10.88px/1 var(--mono);opacity:.55}
.a-pill a:focus-visible,.a-header a:focus-visible,.a-next a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:40px}

@media(max-width:767px){
  :root{--pad:20px;--gap:20px}
  .a-header{padding:20px 20px 0;height:84px;gap:12px}
  .a-brand{grid-column:1/8;font-size:22px}.a-header-note{display:none}
  .a-header-cta{grid-column:8/13;padding:10px 16px;font-size:14px}
  .a-title{font-size:48px;line-height:.9;letter-spacing:-.0425em;margin:24px 0 46px}
  /* 10 characters per line must fit 350px: 8.6vw = 33.5px, -.03em tracking -> 325px */
  .a-title:lang(ja){font-size:8.6vw;line-height:1.2;margin-bottom:40px}
  .a-title .a-line{white-space:nowrap}
  .a-meta{flex-wrap:wrap;height:auto;min-height:40px;padding-top:15px}
  .a-summary{font-size:24px;line-height:.9;letter-spacing:-.025em;padding-bottom:40px}
  .a-summary:lang(ja){font-size:21px;line-height:1.4}
  .a-body,.a-side{grid-column:1/-1;grid-row:auto}.a-side{margin-top:0}
  .a-body{columns:1;margin-bottom:32px}.a-body p{margin-bottom:16px}
  .a-body:lang(ja){font-size:15px;line-height:1.9}
  .a-label{margin-bottom:8px}
  .a-row,.a-row.is-3,.a-row.is-2{grid-template-columns:1fr}
  .a-next{margin:40px 0 72px}.a-next a,.a-next a:lang(ja){font-size:24px}
  .a-related h2{font-size:13px;padding:14px 0;margin-bottom:20px}
  .a-cards{grid-template-columns:1fr;gap:24px}
  .a-all{padding:24px 0 0;font-size:16.5vw}
  .a-pill{bottom:20px}.a-pill a{padding:10px 9px;font-size:15px}.a-pill a:lang(ja){font-size:12px}
  .a-pill a small{display:none}
}
@media(prefers-reduced-motion:reduce){
  .a-title,.a-hero,.a-pill,.a-pill-on,.a-chapter,.a-reveal,.a-rule,.a-side li,.a-row figure>*{transition:none!important}
  .a-title,.a-hero,.a-reveal,.a-side li{opacity:1}.a-rule,.a-side li,.a-pill{transform:none}.a-pill{opacity:1}
  .a-summary{visibility:visible}
  .a-hero-media>.is-still{animation:none}
}

.is-ready .a-pill.is-footer-hidden{opacity:0;pointer-events:none;transform:translateY(calc(100% + 32px));transition-delay:0s}