/* Dao Digital, site-v16 (v14 with the reference hero: one figure on red). Four colours, Anton for the giants, Archivo (condensed, heavy) for headings and labels,
   hairline frames, notched cards, grain. */
:root {
  --wave: #ce3c21;
  --red: #d33720; --paper: #f1e6cf; --ink: #1c1814; --indigo: #274a6b;
  --big: "Anton", Impact, sans-serif; --head: "Archivo", sans-serif;
  --gut: clamp(16px, 3.4vw, 52px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--red); font: 500 16px/1.5 var(--head); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.tag { font: 600 11px/1 var(--head); color: currentColor; opacity: .7; border-bottom: 1px solid currentColor; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.tag--light { color: var(--paper); }
.frame { position: absolute; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .9; pointer-events: none; }
.frame--l { left: var(--gut); } .frame--r { right: var(--gut); }
.sec { position: relative; padding: clamp(80px, 12vh, 140px) calc(var(--gut) + clamp(16px, 4vw, 64px)); }
.kicker { margin: 0; text-align: center; font: 900 clamp(18px, 1.6vw, 24px)/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.giant { margin: 6px 0 0; text-align: center; font: 400 clamp(96px, 15vw, 250px)/.86 var(--big); text-transform: uppercase; letter-spacing: -.01em; }

/* notched card: corners cut by four small squares */
.card--notch { position: relative; border: 1.5px solid currentColor; --n: 16px; --cut: var(--paper); }
.card--notch .n { position: absolute; width: var(--n); height: var(--n); background: var(--cut); border: 0 solid currentColor; }
.card--notch .n1 { left: -1.5px; top: -1.5px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.card--notch .n2 { right: -1.5px; top: -1.5px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.card--notch .n3 { right: -1.5px; bottom: -1.5px; border-left-width: 1.5px; border-top-width: 1.5px; }
.card--notch .n4 { left: -1.5px; bottom: -1.5px; border-right-width: 1.5px; border-top-width: 1.5px; }

/* 1 hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--red); color: var(--paper); }
.hero__type { position: absolute; inset: 0; z-index: 2; }
/* the reference's index marks at the ends of each rail */
.idx { position: absolute; font: 800 11px/1 var(--head); writing-mode: vertical-rl; white-space: nowrap; }
.idx--tl, .idx--bl { left: calc(var(--gut) - 17px); transform: rotate(180deg); } .idx--tr, .idx--br { right: calc(var(--gut) - 17px); }
.idx--tl, .idx--tr { top: 90px; } .idx--bl, .idx--br { bottom: 30px; }
/* the slicer: red bars over each line of the name, grown from nothing as you scroll so the name is cut away in bands */
.slices { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.slices i { flex: 1; background: var(--red); transform: scaleY(0); transform-origin: 50% 100%; margin-top: -1px; }
.nav { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; z-index: 5; border-bottom: 1px solid currentColor; font: 900 21px/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.nav a { text-decoration: none; }
.hero .frame { top: 60px; opacity: .4; }
.hero__kanji { position: absolute; left: 50%; top: calc(60px + 1.2vh); translate: -50% 0; margin: 0; z-index: 2; font: 400 clamp(30px, 3.2vw, 50px)/1 "Mochiy Pop One", sans-serif; }
.hero__name { position: absolute; left: 50%; top: calc(60px + 9.5vh); translate: -50% 0; margin: 0; z-index: 2; text-align: center; white-space: nowrap; font: 400 clamp(110px, min(25vw, 42vh), 400px)/.84 var(--big); text-transform: uppercase; letter-spacing: -.02em; }
/* hero name lines: each line is its own mask so the name can rise into place (motion, js/hero.js).
   Padding gives Anton's caps room inside the mask; the negative margin keeps the still's spacing exactly. */
.hero__name .ln { display: block; overflow: hidden; padding: .07em .05em 0; margin: -.07em -.05em 0; }
.hero__name .ln > span { display: block; will-change: transform; }
.hero__name .ln { position: relative; }
/* before hero.js takes over: the moving parts wait out of sight (never with JS off or reduced motion) */
html.motion:not(.motion-done) .hero__name .ln > span { transform: translateY(112%); }
html.motion:not(.motion-done) .hero .pc, html.motion:not(.motion-done) .hero .bead, html.motion:not(.motion-done) .hero .part, html.motion:not(.motion-done) .hero .base { opacity: 0; }
/* the figure: centred, its final place set here; scroll brings it up from behind the name (js/scroll.js) */
.hero__fig { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__figure { position: absolute; left: 50%; top: calc(64px - .082 * min(78vw, 124vh)); width: min(78vw, 124vh); translate: -50% 0; display: block; height: auto; overflow: visible; }
/* the line: two beats in one slot at the foot of the frame, each rising through its own mask */
.hero__say { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 54px); translate: -50% 0; margin: 0; z-index: 4; display: grid; justify-items: center; color: var(--paper); font: 400 clamp(38px, 5.4vw, 92px)/.9 var(--big); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.say { grid-area: 1 / 1; display: block; overflow: hidden; padding-top: .06em; }
.say > span { display: block; transform: translateY(110%); }
.say__tag { grid-area: 2 / 1; margin-top: 10px; font-size: 10px; }
html:not(.motion) .say--1 > span { transform: none; }

/* 2 dossier */
.dossier { color: var(--red); }
.dossier__grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 90px); align-items: center; max-width: 1180px; margin: 0 auto; }
.crest { margin: 0; text-align: center; }
.crest__disc { display: block; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: var(--red); overflow: hidden; }
.crest__disc img { width: 100%; height: 100%; object-fit: cover; }
.crest figcaption { margin-top: 18px; font: 800 13px/1 var(--head); text-transform: uppercase; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 28px; margin: 0; text-align: center; }
.facts div { padding-top: 0; }
.facts dt { font: 800 12px/1 var(--head); text-transform: uppercase; opacity: .85; }
.facts dd { margin: 10px 0 0; font: 900 clamp(20px, 1.9vw, 28px)/1.05 var(--head); font-stretch: 100%; text-transform: uppercase; }

/* 3 statement */
.statement { padding-top: 0; }
.statement .card { max-width: 1040px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 110px); text-align: center; }
.card__mark { width: 46px; height: 46px; margin: 0 auto 26px; display: block; }
.statement__h { margin: 0 auto; max-width: 760px; font: 900 clamp(28px, 3.2vw, 46px)/1.06 var(--head); font-stretch: 100%; text-transform: uppercase; }
.statement__p { margin: 26px auto 0; max-width: 460px; font-size: 15px; }

/* 4 wave */
.wave { background: var(--wave); color: var(--paper); display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(140px, 20vh, 220px); }
.wave::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vh, 160px); background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.wave__art { width: 100%; border-radius: 4px; }
.card--paper { background: var(--paper); color: var(--red); --cut: var(--wave); }
.wave__card { padding: clamp(28px, 3.4vw, 48px); }
.wave__h { margin: 0 0 18px; text-align: center; font: 900 clamp(30px, 3vw, 44px)/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid currentColor; align-items: baseline; }
.steps b { font: 900 20px/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.steps span { font-size: 14px; color: var(--ink); }

/* 5 make */
.make__p { max-width: 420px; margin: 18px auto 0; text-align: center; font-size: 15px; }
.cross { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); grid-template-rows: auto auto; justify-content: center; gap: 22px; margin-top: 56px; }
.tile { margin: 0; text-align: center; }
.tile img { width: 100%; }
.tile figcaption { margin-top: 10px; font: 900 18px/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.tile--l { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.tile--t { grid-column: 2; grid-row: 1; }
.tile--r { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.tile--b { grid-column: 2; grid-row: 2; }

/* 6 work */
.rows { list-style: none; max-width: 1100px; margin: 56px auto 0; padding: 0; border-top: 1.5px solid currentColor; }
.row { display: grid; grid-template-columns: 1fr auto 40px; gap: 20px; align-items: baseline; padding: 20px 4px; border-bottom: 1.5px solid currentColor; }
.row b { font: 900 clamp(22px, 2.2vw, 32px)/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.row span { font: 800 13px/1 var(--head); text-transform: uppercase; opacity: .75; }
.row i { font-style: normal; font: 400 28px/1 var(--head); text-align: right; }
.row__body { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: end; padding-top: 18px; }
.row__body img { border-radius: 4px; }
.row__body p { margin: 0; color: var(--ink); font-size: 15px; }

/* 7 begin */
.begin { color: var(--red); padding-bottom: 0; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); max-width: 1100px; margin: 56px auto 0; }
.way { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.way__frame { display: block; aspect-ratio: 1; overflow: hidden; border: 1.5px solid currentColor; }
.way--calm .way__frame { background: var(--paper); }
.way--bold .way__frame { background: var(--red); }
.way__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.way b { margin-top: 10px; font: 900 clamp(26px, 2.6vw, 38px)/1 var(--head); font-stretch: 100%; text-transform: uppercase; }
.way > span:not(.way__frame) { font-size: 15px; opacity: .85; }
.way em { font-style: normal; font: 800 14px/1 var(--head); text-transform: uppercase; color: var(--red); margin-top: 6px; }
.band { height: 120px; margin: clamp(80px, 12vh, 130px) calc(-1 * (var(--gut) + clamp(16px, 4vw, 64px))) 0; background: url("../media/pattern.jpg") 0 0 / 240px; }
.foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px 0 34px; font: 800 13px/1 var(--head); text-transform: uppercase; }

.hero::after, .sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: .18; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (max-width: 760px) {
  .nav { font-size: 16px; height: 52px; } .hero .frame { top: 52px; }
  .hero__kanji { top: calc(52px + 2vh); left: 30%; }
  .hero__name { top: calc(52px + 10vh); font-size: 33vw; }
  .hero__kanji { left: 50%; } .hero__figure { width: 170vw; top: auto; bottom: 0; } .idx { display: none; } .hero__say { font-size: 11vw; }
  .facts { grid-template-columns: 1fr 1fr; }
  .dossier__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .wave { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 1fr; gap: 4px; }
  .cross { grid-template-columns: 1fr 1fr; }
  .tile--l, .tile--t, .tile--r, .tile--b { grid-column: auto; grid-row: auto; }
  .row__body { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
}

/* grain is lighter on the dark section, so paper stays paper */


/* round 1 refinement, 18 Oct: closer to the reference's furniture */
.sec + .sec, .stack + .sec { border-top: 1px solid currentColor; }
.wave { border-top: 0 !important; }
.rail { position: absolute; top: 50%; translate: 0 -50%; font: 800 12px/1 var(--head); text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; }
.rail--l { left: calc(var(--gut) - 18px); transform: rotate(180deg); }
.rail--r { right: calc(var(--gut) - 18px); }
.tile__card { display: block; background: var(--red); }
.tile__card img { mix-blend-mode: multiply; }
.begin__card { max-width: 1100px; margin: 56px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); }
.begin .gate { width: 100%; max-width: 380px; margin: 0 auto; display: block; }
.begin .stud { fill: var(--paper); }
.begin__line { margin: 0 0 22px; font: 900 clamp(24px, 2.4vw, 34px)/1.08 var(--head); text-transform: uppercase; }
.begin__mail { font: 400 clamp(30px, 3.6vw, 54px)/1 var(--big); text-transform: uppercase; text-decoration: none; border-bottom: 3px solid currentColor; }
@media (max-width: 760px) { .begin__card { grid-template-columns: 1fr; } .rail { display: none; } }

/* motion, 18 Oct: layered characters, crest ring, accordion */
.crest__wrap { position: relative; display: block; width: min(100%, 360px); margin: 0 auto; }
.crest__wrap .crest__disc { width: 100%; }
.crest__ring { position: absolute; inset: -11%; width: 122%; height: 122%; fill: var(--red); pointer-events: none; }
.row { cursor: pointer; }
.row:not(.row--open) .row__body { display: none; }
.row__body { overflow: hidden; }
.row:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.wave__art { will-change: clip-path, transform; }

/* ambient life over the hero, 18 Oct */
.ambient { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the wave that washes between sections */
.wash { position: fixed; top: 0; left: 0; height: 100vh; height: 100lvh; width: 135vw; z-index: 60; display: flex; visibility: hidden; pointer-events: none; will-change: transform; }
.wash__body { flex: 1; background: var(--red) url("../media/pattern.jpg") 0 0 / 260px; }
.wash__tail { flex: none; height: 100%; width: 16vh; width: 16lvh; display: block; }
.wash__crest { flex: none; height: 100%; width: 42vh; width: 42lvh; display: block; }

/* depth and wireframe, 18 Oct */
.stack { position: relative; }
.hero { position: sticky; top: 0; z-index: 0; }
.dossier { position: relative; z-index: 2; background: var(--paper); border-top: 1px solid currentColor; }
.wave { overflow: visible; z-index: 3; }
.wave__art { position: relative; z-index: 4; }
.wave__card { position: relative; z-index: 5; }
/* the dossier as a ruled record: crest cell, then fact cells divided by hairlines */
.dossier__grid { gap: 0; align-items: stretch; --cut: var(--paper); }
.dossier__grid .crest { padding: clamp(24px, 3vw, 44px); border-right: 1px solid currentColor; display: flex; flex-direction: column; justify-content: center; }
.dossier__grid .facts { gap: 0; }
.dossier__grid .facts div { padding: clamp(18px, 2.2vw, 30px) 16px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; display: flex; flex-direction: column; justify-content: center; }
.dossier__grid .facts div:nth-child(3n+1) { border-left: 0; }
.dossier__grid .facts div:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 760px) {
  .dossier__grid .crest { border-right: 0; border-bottom: 1px solid currentColor; }
  .dossier__grid .facts div:nth-child(3n+1) { border-left: 1px solid currentColor; }
  .dossier__grid .facts div:nth-child(odd) { border-left: 0; }
  .dossier__grid .facts div:nth-last-child(-n+3) { border-bottom: 1px solid currentColor; }
  .dossier__grid .facts div:nth-last-child(-n+2) { border-bottom: 0; }
}

.crest__wrap + figcaption { margin-top: calc(min(100%, 360px) * .14 + 8px); }

/* site-v16: the hero holds while the Buddha becomes the warrior; this runway is the scroll it takes */
.hero__runway { height: 170vh; height: 170svh; }

/* site-v16, 19 Oct: the hero in the reference's hues and spacing (measured at 1440 x 900: an 82px nav with its
   three links drawn in towards the middle, frame lines 115px in, rails centred in that margin, the kanji at 18%,
   the name's caps from 27% to 84%) */
.hero { --red: #e40038; --paper: #faf3e9; --ink: #201408; --rim: clamp(16px, 8vw, 115px); background: var(--red); }
.hero .nav { height: 82px; display: flex; justify-content: center; gap: min(20vw, 288px); font-size: clamp(16px, 2.1vw, 30px); }
.hero .frame { top: 82px; opacity: .55; }
.hero .frame--l { left: var(--rim); } .hero .frame--r { right: var(--rim); }
.hero .rail--l, .hero .idx--tl, .hero .idx--bl { left: calc(var(--rim) / 2 - 6px); }
.hero .rail--r, .hero .idx--tr, .hero .idx--br { right: calc(var(--rim) / 2 - 6px); }
.hero .idx--tl, .hero .idx--tr { top: 26%; } .hero .idx--bl, .hero .idx--br { top: auto; bottom: 6%; }
.hero__kanji { top: 17.5vh; font-size: clamp(30px, 3.8vw, 56px); }
.hero__name { top: 28.5vh; font-size: clamp(110px, min(22vw, 36.6vh), 360px); line-height: .8; }
@media (max-width: 760px) {
  .hero .nav { height: 52px; gap: 12vw; } .hero .frame { top: 52px; }
  .hero__kanji { top: calc(52px + 3vh); } .hero__name { top: calc(52px + 11vh); font-size: 33vw; }
}
/* the woodblock grain, 19 Oct: Dao's own texture over the hero, in place of plain noise: a slow mottle of uneven ink
   and the long fibres of the paper, over the fine grain */
.hero::after { opacity: .24; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .08  0 0 0 0 .05  0 0 0 0 .02  0 0 0 .9 -.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .35' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .07  0 0 0 0 .04  0 0 0 .42 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }