/* Kakejiku — shared ground: the typeface, the CURRENT rootlegal.net type scale, grid and spacing
   (same fluid formula: 20rem → 120rem viewport), one palette, a reset, nothing else. */
@font-face{font-family:"GT Sectra";src:url("../fonts/GT-Sectra-Book.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"GT Sectra";src:url("../fonts/GT-Sectra-Medium.otf") format("opentype");font-weight:500;font-display:swap}
:root{
  --paper:#f6f5f1; --ink:#2f2b2d; --ai:#0b405d;
  --mute:color-mix(in srgb,var(--ink) 58%,var(--paper));
  --line:color-mix(in srgb,var(--ink) 22%,transparent);
  --f:calc((100vw - 20rem) / 100);
  --fs-display:clamp(3rem,calc(3rem + 4 * var(--f)),7rem);
  --fs-h2:clamp(2.375rem,calc(2.375rem + 1.625 * var(--f)),4rem);
  --fs-h3:clamp(1.875rem,calc(1.875rem + 1.125 * var(--f)),3rem);
  --fs-h4:clamp(1.5rem,calc(1.5rem + .5 * var(--f)),2rem);
  --fs-h5:clamp(1.375rem,calc(1.375rem + .125 * var(--f)),1.5rem);
  --fs-large:clamp(1.125rem,calc(1.125rem + .125 * var(--f)),1.25rem);
  --fs-main:clamp(1rem,calc(1rem + .125 * var(--f)),1.125rem);
  --margin:clamp(1rem,calc(1rem + 1.5 * var(--f)),2.5rem);
  --gutter:1rem;
  --s4:clamp(1.25rem,calc(1.25rem + .25 * var(--f)),1.5rem);
  --s5:clamp(1.75rem,calc(1.75rem + .25 * var(--f)),2rem);
  --s6:clamp(2rem,calc(2rem + .5 * var(--f)),2.5rem);
  --s8:clamp(2.5rem,calc(2.5rem + 1.5 * var(--f)),4rem);
  --sec-main:clamp(2.8125rem,calc(2.8125rem + 4.1875 * var(--f)),7rem);
  --sec-top:clamp(6.5rem,calc(6.5rem + 7.5 * var(--f)),14rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"GT Sectra","Times New Roman",serif;font-weight:400;font-size:var(--fs-main);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;font:inherit}
ul{list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
address{font-style:normal}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* type roles, exactly as the current site uses them */
.t-display{font-size:var(--fs-display);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.t-h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.t-h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.03em}
.t-h4{font-size:var(--fs-h4);line-height:1.3;text-wrap:balance}
.t-h5{font-size:var(--fs-h5);line-height:1.3;text-wrap:pretty}
.t-large{font-size:var(--fs-large);line-height:1.5;text-wrap:pretty}
.t-body{font-size:var(--fs-large);line-height:1.6;text-wrap:pretty}
.ai{color:var(--ai)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);max-width:120rem;margin-inline:auto;padding-inline:var(--margin)}
p a,.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color .2s,color .2s}
p a:hover,.u:hover{text-decoration-color:currentColor;color:var(--ai)}
.founder p a{color:var(--ai)}
.more{display:inline-block;margin-top:var(--s6);font-size:var(--fs-h5);line-height:1.3;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);padding-bottom:3px;transition:color .2s,border-color .2s}
.more:hover{color:var(--ai);border-color:currentColor}
.reach a{display:block;width:fit-content;transition:color .2s}
.reach a:hover,.legal a:hover,.nav a:hover{color:var(--ai)}
.legal{display:flex;flex-wrap:wrap;gap:.4rem var(--s5);color:color-mix(in srgb,var(--ink) 75%,var(--paper))}
.llm{color:color-mix(in srgb,var(--ink) 7%,var(--paper))}
.logo{display:block;width:3.3rem;height:auto}
.sc{font-variant-caps:all-small-caps;letter-spacing:.04em}
.pm{position:relative;width:1.25rem;height:1.25rem;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:currentColor;transition:transform .5s cubic-bezier(.6,.05,0,1)}
.pm::before{left:0;right:0;top:50%;height:1px}
.pm::after{top:0;bottom:0;left:50%;width:1px}
[open]>summary .pm::after,[aria-selected="true"] .pm::after{transform:scaleY(0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* KAKEJIKU 掛軸 — the hanging scroll.
   Every section is the same three things on the 12-column grid: its name written downwards
   (columns 1–2), what it says (columns 3–9, one left edge for the whole page), and one tall
   narrow photograph hanging on the right (columns 10–12), always the same size. Name and
   picture stay in place while the text is read. The four photographs are four parts of one
   tree, read downwards: leaves, the fork, the trunk, the roots. Space separates the sections.
   Two lines everything hangs from: the mark and the pictures from 2rem; the section links and
   the section name from --stick. */
:root{--rail:5rem;--hang:1/2.2;--stick:7.5rem;--p:calc(50svh - 2rem);--ht:21rem}
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);display:flex;flex-direction:column;align-items:center;padding-block:2rem;z-index:20;background:var(--paper)}
.rail .logo{width:2.6rem}
.rail .mark{display:grid;place-items:center;width:2.6rem;height:2.6rem;background:var(--ink);color:var(--paper);font-weight:500;font-size:2.3rem;line-height:1;overflow:hidden}
.rail .mark span{transform:translateY(.12em)}
/* the section links appear once the page has been scrolled and leave again at the very top */
.rail .nav{position:absolute;top:var(--stick);display:flex;gap:var(--s6);writing-mode:vertical-rl;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.scrolled .rail .nav{opacity:1;visibility:visible;transition:opacity .5s ease}
main{margin-left:var(--rail)}

.name{grid-column:1/3;grid-row:1;writing-mode:vertical-rl;white-space:nowrap;line-height:1;align-self:start;justify-self:start;position:sticky;top:var(--stick)}
.says{grid-column:3/10;grid-row:1;--measure:calc((100% - 6 * var(--gutter)) / 7 * 6 + 5 * var(--gutter))}
.says>p,.says>.cases,.says>.embed{max-width:var(--measure)}
.hang{grid-column:10/13;grid-row:1;aspect-ratio:var(--hang);align-self:start;position:sticky;top:2rem;overflow:hidden}
.hang img{width:100%;height:100%;object-fit:cover}
.hang.portrait img{object-position:50% 20%}
/* a section out of focus fades as a whole: name, text and picture share --o (set by the script) */
.name,.says,.hang{opacity:var(--o,1);transition:opacity .5s ease-out}

section{padding-top:var(--sec-top)}
#intro{padding-top:var(--sec-main)}
#intro .says{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s8)}
section:last-of-type{padding-bottom:var(--sec-main)}

/* First screen: the headline stands on the halfway line and writes itself letter by letter.
   The band (half a window high) starts half sunk below the bottom edge. Scrolling first raises
   only the band; when its top comes level with the headline's top, the headline lets go and
   both travel on together. --p is the band's height, --ht the headline's (measured by script). */
.hero{min-height:calc(150svh - var(--p) / 2 + var(--ht) / 2);align-items:start}
.hero .says{position:sticky;top:0;height:100svh;display:flex;align-items:center;align-self:start}
.hero .hang{position:static;aspect-ratio:auto;height:var(--p);margin-top:calc(100svh - var(--p) / 2)}
.hero .hang img{object-position:50% 42%}
.js .hero h1{visibility:hidden}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .c{opacity:0;animation:letter .8s cubic-bezier(.215,.61,.355,1) forwards;animation-delay:calc(var(--i) * 40ms)}
@keyframes letter{to{opacity:1}}
.js .hero .hang{opacity:0;animation:arrive 1.2s cubic-bezier(.215,.61,.355,1) .9s forwards}
.hero.arrived .hang{animation:none;opacity:var(--o,1)}
@keyframes arrive{to{opacity:1}}

.cases{border-top:1px solid var(--line)}
.case{border-bottom:1px solid var(--line)}
.case summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding-block:var(--s5);transition:color .2s}
.case summary:hover,.case[open] summary{color:var(--ai)}
.open{padding:var(--s4) 0 var(--s8)}
.open>*+*{margin-top:var(--s4)}
.open h4{margin-bottom:var(--s5)}
.open h4:not(:first-child){margin-top:var(--s8)}
.open a{color:var(--ai)}
.about p+p{margin-top:var(--s5)}
.about .t-h5{margin-bottom:var(--s6)}
.reach{margin-top:var(--s8)}
.reach address{margin-top:var(--s6)}
.legal{margin-top:var(--sec-main)}
.contact{margin-top:var(--s8)}

/* documents: privacy statement, terms, complaints procedure. The same three things: the
   document's name written downwards, its text, one picture hanging beside it throughout. */
.doc{padding-top:var(--stick)}
.doc .says>*+*{margin-top:var(--s5)}
.doc .says>*{max-width:var(--measure)}
.doc .says>.t-h5+*{margin-top:var(--s4)}
.doc .says>h3{margin-top:var(--s8)}
/* the first line of the text starts level with the top of the name and of the picture */
.doc .says>:first-child{margin-top:calc((1em - 1lh) / 2)}
.doc strong{font-weight:400;color:var(--ai)} /* no bold anywhere: a term is marked the way the home page marks one */
.doc .note{color:var(--mute)}
.doc li{position:relative}
.doc li+li{margin-top:var(--s4)}
.doc ul>li{padding-left:1.5em}
.doc ul>li::before{content:"–";position:absolute;left:0;color:var(--mute)}
.doc ol{counter-reset:n;list-style:none}
.doc ol>li{counter-increment:n}
.doc ol>li::before{content:counter(n)}
.doc .art{position:relative}
/* article and paragraph numbers hang in the margin left of the text */
.doc .no,.doc ol>li::before{position:absolute;right:100%;margin-right:var(--s4);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.legal a[aria-current]{color:var(--ai)}
.contact p+p{margin-top:var(--s4)}
.says>p+p,.says>p+.embed,.says>.embed+p{margin-top:var(--s6)}

/* film: an embedded video, or a still that links to a broadcast which cannot be embedded */
.embed{position:relative;aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--ink) 10%,var(--paper))}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.still{position:relative;display:block;overflow:hidden;background:var(--ink)}
.still img{width:100%;height:auto;transition:opacity .3s ease,transform .6s ease}
.still:hover img,.still:focus-visible img{opacity:.85;transform:scale(1.02)}
.still .play{position:absolute;left:50%;top:50%;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;border-radius:50%;background:rgba(0,0,0,.55)}
.still .play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.7rem 0 .7rem 1.15rem;border-color:transparent transparent transparent #fff}
.credit{font-size:.8em;color:var(--mute)}
.quote{font-style:italic}

@media (max-width:860px){
  :root{--rail:0rem}
  .rail{inset:0 0 auto 0;width:auto;height:3.75rem;flex-direction:row;justify-content:space-between;padding:0 var(--margin)}
  .rail .logo{width:2rem}
  .rail .mark{width:2rem;height:2rem;font-size:1.8rem}
  .rail .nav{position:static;writing-mode:horizontal-tb;gap:var(--s4)}
  .rail.bare{justify-content:flex-end}
  .doc{padding-top:var(--s6)}
  .doc .no,.doc ol>li::before{position:static;margin-right:.5em}
  main{padding-top:3.75rem}
  .name,.says,.hang{grid-column:1/-1;grid-row:auto;position:static}
  .name{writing-mode:horizontal-tb;white-space:normal;line-height:1.2;margin-bottom:var(--s6)}
  .hang{aspect-ratio:4/5;width:62%;margin-top:var(--s8)}
  .hero{min-height:calc(100svh - 3.75rem);align-content:center;align-items:normal}
  .hero .says{position:static;height:auto;display:block}
  .hero .hang{aspect-ratio:4/5;height:auto;margin-top:var(--s8)}
}
@media (prefers-reduced-motion:reduce){
  .js .hero h1{visibility:visible}.js .hero .hang{opacity:1}
  .rail .nav{opacity:1;visibility:visible}
  .name,.says,.hang{opacity:1!important}
}