/* ================================================================
   FOOLSCAP — the home page only. The shell lives in foolscap.css.
   ================================================================ */
/* ---------- masthead: the title page, seen once ---------- */
.masthead{position:relative;z-index:2;text-align:center;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:2rem 1.5rem;}
.masthead .mh-cap{height:128px;height:clamp(96px,15vh,150px);width:auto;overflow:visible;}
.masthead h1{font-family:var(--display);font-weight:500;letter-spacing:.045em;
  font-size:clamp(3rem,8.5vw,4.8rem);line-height:1;margin:.8rem 0 1rem;}
.masthead .motto{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--foxing);margin:0;}

/* ---------- the scroll cue ---------- */
.scrollcue{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;}
.scrollcue .sc-word{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:#8a8270;}
.scrollcue .sc-line{width:3px;height:46px;position:relative;overflow:hidden;
  background:no-repeat center/3px 100%;
  background-image:var(--line-v2);}
.scrollcue .sc-line::after{content:"";position:absolute;left:0;top:-60%;width:3px;height:55%;
  background:linear-gradient(rgba(122,74,46,0),var(--foxing));opacity:.6;
  animation:scTravel 2.4s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes scTravel{0%{top:-60%}55%{top:100%}100%{top:100%}}

/* ---------- the sheet: wide grid, reading still never full-bleed ---------- */
.sheet{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:2.5rem 2rem 4rem;}

/* ---------- pencil lines: the architect's graphite, not a ruler ---------- */
/* ink graphite — structural dividers */
.pencil-h{height:4px;border:0;margin:0;background:no-repeat center/100% 4px;background-image:var(--line-h1);}
/* the hand never repeats itself twice in a row */
.triptych .tcol.pencil-v:nth-child(3)::before{background-image:var(--line-v2);}
.cols3 > article.pencil-v:nth-child(2)::before{background-image:var(--line-v3);}
.cols3 > article.pencil-v:nth-child(3)::before{background-image:var(--line-v1);}
hr.pencil-h:nth-of-type(2n){background-image:var(--line-h2);}
hr.pencil-h:nth-of-type(3n){background-image:var(--line-h3);}
hr.pencil-h:nth-of-type(5n){background-image:var(--line-h4);}
.pencil-v{position:relative;}
.pencil-v::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;
  background:no-repeat center/4px 100%;
  background-image:var(--line-v1);}
/* light graphite — service rules (contents, margins, chrome), same hand, fainter lead */
.pencil-h--lt{height:4px;border:0;margin:0;background:no-repeat center/100% 4px;background-image:var(--line-h5);}

/* ---------- the lead: sketch left, text right ---------- */
.lead-grid{display:grid;grid-template-columns:7fr 5fr;gap:3rem;align-items:center;}
.lead .ph{margin:0;}
.lead .title{font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem,3.4vw,3rem);line-height:1.08;margin:1.05rem 0 .85rem;}
.standfirst{font-size:1.32rem;line-height:1.42;margin:0 0 1.05rem;}
@media (max-width:880px){.lead-grid{grid-template-columns:1fr;gap:1.4rem;}}

/* ---------- the lead image: grid-width between hero and grid ---------- */
.lead-hero{display:block;max-width:1180px;margin:0 auto;padding:0 2rem;}
.lead-hero-ph{margin:0;}
.lead-hero-ph svg{display:block;width:100%;height:auto;}
.lead-hero-ph figcaption{margin:.6rem 0 0;}
.lead-head{max-width:44em;margin:1.8rem auto 0;text-align:center;}
.lead-head .tag{margin-bottom:1rem;}
.lead-title{font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,5vw,3.8rem);line-height:1.05;margin:.9rem 0 .9rem;
  border-bottom:1px solid transparent;transition:border-color .2s;display:inline-block;}
.lead-hero:hover .lead-title{border-color:var(--dust);}
.placeline{display:block;font-family:var(--label);font-weight:500;font-stretch:125%;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;margin:.15rem 0 .9rem;}
.tcol .placeline,.cols3 .placeline{font-size:.54rem;letter-spacing:.18em;margin:.3rem 0 .55rem;}
.lead-standfirst{font-size:1.3rem;line-height:1.45;margin:0 auto 1rem;max-width:36em;}

/* ---------- the lead triptych: three columns divided by graphite ---------- */
.triptych{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:0;margin-top:.5rem;}
.tcol{padding:0 2.4rem;}
.tcol:first-child{padding-left:0;}
.tcol:last-child{padding-right:0;}
.tcol .kicker{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:0 0 1rem;}
.tcol .kicker-tag{margin:0 0 1rem;}
.tag-row{display:block;margin:1.05rem 0 .5rem;}
.tcol .kicker-line{margin-bottom:1.4rem;}
.tcol .lede{font-size:1.12rem;line-height:1.5;margin:0 0 1.4rem;}
.tcol .rl{display:block;font-family:var(--label);font-stretch:125%;font-weight:600;
  font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;margin:1.1rem 0 .15rem;}
.tcol .c-title{font-family:var(--display);font-weight:500;line-height:1.1;margin:.5rem 0 .7rem;display:inline;}
.tcol .t-lg{font-size:2.4rem;}
.tcol .t-md{font-size:1.55rem;}
.tcol .dek{font-size:1rem;line-height:1.5;margin:.5rem 0 .7rem;}
.tcol .t-date{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8270;display:block;margin-bottom:.6rem;}
.tcol a:hover .c-title{border-color:var(--dust);}
.tcol a .c-title{border-bottom:1px solid transparent;transition:border-color .2s;}
.tcol .ph{margin:0 0 1.1rem;}
@media (max-width:900px){
  .triptych{grid-template-columns:1fr;}
  .tcol{padding:2.2rem 0;}
  .tcol:first-child{padding-top:0;}
  .tcol.pencil-v::before{display:none;}
  .tcol.pencil-v{border-top:0;}
  .tcol + .tcol{padding-top:2.2rem;}
}

/* ---------- three columns of pieces ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.cols3 > article{padding:0 2.4rem;}
.cols3 > article:first-child{padding-left:0;}
.cols3 > article:last-child{padding-right:0;}
.rl{display:block;font-family:var(--label);font-stretch:125%;font-weight:600;
  font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;margin-bottom:.15rem;}
.cols3 .rl{margin-top:1.05rem;}
.toc-row .rl{font-size:.52rem;margin-bottom:.1rem;}
.cols3 .c-title{font-family:var(--display);font-weight:500;
  font-size:1.55rem;line-height:1.16;margin:.9rem 0 .5rem;display:inline;}
.cols3 .dek{font-size:1rem;line-height:1.5;margin:.5rem 0 .6rem;}
.cols3 .readon{font-size:.6rem;}
.cols3 a:hover .c-title{border-color:var(--dust);}
.cols3 a .c-title{border-bottom:1px solid transparent;transition:border-color .2s;}
@media (max-width:900px){
  .cols3{grid-template-columns:1fr;}
  .cols3 > article{padding:2.2rem 0;}
  .cols3 > article:first-child{padding-top:0;}
  .cols3 > article.pencil-v::before{display:none;}
}

/* ---------- In Passing: marginalia — it lives in the margin, not on the page ---------- */
.passing{margin:4.6rem 0 0;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3.5rem;align-items:start;}
/* the left column stays empty: the page has moved on, the margin has not */
.passing-margin{position:sticky;top:6rem;}
.passing-head h2{font-family:var(--display);font-weight:500;font-size:1.5rem;margin:0;
  color:var(--foxing);}
.passing-head .p-note{display:block;font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:#948c7a;margin-top:.3rem;}
.passing-rule{height:4px;background:no-repeat center/100% 4px;background-image:var(--line-h2);margin:.9rem 0 0;}
.thought{padding:1.5rem 0;background:no-repeat bottom center/100% 4px;background-image:var(--line-h3);}
.thought:nth-of-type(even){background-image:var(--line-h4);}
.thought:last-of-type{background:none;}
.thought .t-date{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--foxing);
  display:block;margin-bottom:.6rem;}
/* set below the body size — a note in the margin, not a headline */
.thought p{font-size:.94rem;line-height:1.58;margin:0 0 .7rem;}
.thought p:last-child{margin-bottom:0;}
/* the snapshot: tipped in slightly askew, as if laid on the page */
.thought .snap{margin:0 0 .85rem;}
.thought .snap svg,.thought .snap img{display:block;width:100%;height:auto;}
.passing-more{display:inline-block;margin-top:1.3rem;color:var(--foxing);font-size:.56rem;}
@media (max-width:980px){
  .passing{grid-template-columns:1fr;gap:0;margin-top:3.6rem;
    max-width:34em;margin-left:auto;margin-right:auto;}
  .passing-margin{position:static;}
}


/* ---------- contents: the index is the navigation ---------- */
.contents{position:relative;margin-top:0;}
.contents h2{font-family:var(--display);font-weight:500;font-size:2.1rem;margin:0 0 .4rem;}
.contents .c-note{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#8a8270;margin:0 0 1.7rem;}
.wm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(430px,82%);opacity:.055;pointer-events:none;z-index:-1;}
.toc-row{display:grid;grid-template-columns:118px 1fr auto;gap:1.25rem;align-items:center;
  padding:1.05rem 0;background:no-repeat top center/100% 4px;background-image:var(--line-h1);}
.toc-row:nth-of-type(2n){background-image:var(--line-h2);}
.toc-row:nth-of-type(3n){background-image:var(--line-h3);}
.toc-row:nth-of-type(4n){background-image:var(--line-h4);}
.toc-ph svg{display:block;width:100%;height:auto;}
.toc-row:last-of-type{background:no-repeat top center/100% 4px,no-repeat bottom center/100% 4px;background-image:var(--line-h5),var(--line-h6);}
.toc-title{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.2;display:inline;}
.toc-line{font-size:.95rem;line-height:1.45;color:#46423b;margin:.15rem 0 0;}
.toc-date{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8270;white-space:nowrap;}
@media (max-width:640px){
  .toc-row{grid-template-columns:88px 1fr;gap:.9rem;}
  .toc-date{grid-column:2;}
}


/* ---------- founder's words ---------- */
.founder{max-width:46em;margin:1.5rem auto 0;text-align:center;}
.founder .ph{max-width:420px;margin:0 auto;}
.fw-kicker{font-family:var(--label);font-stretch:125%;font-weight:600;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--foxing);
  display:block;margin:1.6rem 0 .4rem;}
.founder .f-title{font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.12;margin:0 0 .8rem;display:inline-block;
  border-bottom:1px solid transparent;transition:border-color .2s;}
.founder a:hover .f-title{border-color:var(--dust);}
.founder .excerpt{font-size:1.22rem;line-height:1.5;margin:0 auto 1.1rem;max-width:36em;}


/* ---------- quiet animations: paper, not pyrotechnics ---------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.22,.6,.25,1),transform .9s cubic-bezier(.22,.6,.25,1);
  transition-delay:var(--d,0s);will-change:opacity,transform;}
.rv.in{opacity:1;transform:none;}
.masthead h1,.masthead .motto{opacity:0;transform:translateY(16px);
  transition:opacity 1s cubic-bezier(.22,.6,.25,1),transform 1s cubic-bezier(.22,.6,.25,1);}
body.loaded .masthead h1{opacity:1;transform:none;transition-delay:2.75s;}
body.loaded .masthead .motto{opacity:1;transform:none;transition-delay:3s;}

/* the cap draws itself: ink crown first on bare paper, then the colour fills in */
.hero-cap .crown path{stroke-dasharray:900;stroke-dashoffset:900;
  transition:stroke-dashoffset 1.05s cubic-bezier(.5,0,.3,1);}
body.loaded .hero-cap .crown path{stroke-dashoffset:0;transition-delay:.2s;}
.hero-cap .bell{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.3,.4,1);}
body.loaded .hero-cap .bell{opacity:1;transform:none;}
body.loaded .hero-cap .bell:nth-of-type(1){transition-delay:1.0s;}
body.loaded .hero-cap .bell:nth-of-type(2){transition-delay:1.1s;}
body.loaded .hero-cap .bell:nth-of-type(3){transition-delay:1.2s;}
.hero-cap .petal{clip-path:inset(0 0 100% 0);
  transition:clip-path .95s cubic-bezier(.4,.05,.2,1);}
.hero-cap .pM{clip-path:inset(100% 0 0 0);}
.hero-cap .pR{clip-path:inset(0 0 100% 0);}
body.loaded .hero-cap .pL{clip-path:inset(0 0 0 0);transition-delay:1.35s;}
body.loaded .hero-cap .pM{clip-path:inset(0 0 0 0);transition-delay:1.65s;}
body.loaded .hero-cap .pR{clip-path:inset(0 0 0 0);transition-delay:1.9s;}
.hero-cap .bristle{opacity:0;transition:opacity .9s ease;}
body.loaded .hero-cap .bristle{opacity:1;transition-delay:2.1s;}
/* returning visit: same order, a fifth of the wait */
body.swift .hero-cap .crown path{transition-duration:.5s;transition-delay:.05s !important;}
body.swift .hero-cap .bell{transition-delay:.35s !important;}
body.swift .hero-cap .petal{transition-duration:.45s;}
body.swift .hero-cap .pL{transition-delay:.3s !important;}
body.swift .hero-cap .pM{transition-delay:.42s !important;}
body.swift .hero-cap .pR{transition-delay:.54s !important;}
body.swift .hero-cap .bristle{transition-delay:.6s !important;}
body.swift .masthead h1{transition-delay:.55s !important;}
body.swift .masthead .motto{transition-delay:.65s !important;}
body.swift .scrollcue{transition-delay:.9s !important;}
.scrollcue{opacity:0;transition:opacity 1.1s ease;}
body.loaded .scrollcue{opacity:1;transition-delay:3.5s;}

/* ---------- the date sets on its own line in the card columns too ---------- */
.cols3 .t-date{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8270;
  display:block;margin:1.05rem 0 0;}
.cols3 .t-date + .c-title{margin-top:.35rem;}

/* ---------- scaffold: the empty cells, and their names ---------- */
.slot .ph-slot{border-style:dashed;}
.slot .rl,.slot .toc-title,.slot .c-title,.slot .f-title,.slot .lead-title{color:#a2998a;}
.slot .dek,.slot .toc-line,.slot .excerpt,.slot .lead-standfirst{color:#a2998a;font-style:italic;}
.slot .toc-date,.slot .t-date,.slot .placeline{color:#c0b8a8;}
.slot .ph figcaption{color:#c0b8a8;}
[data-cell]{position:relative;}
body.scaffold [data-cell]::before{content:attr(data-cell);position:absolute;top:-1.2rem;left:0;
  font-family:var(--label);font-stretch:125%;font-weight:600;font-size:.46rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--foxing);opacity:.7;pointer-events:none;z-index:3;}
body.scaffold .contents [data-cell]::before,body.scaffold .lead-hero::before{top:.3rem;}
body.scaffold main.sheet{padding-top:3.6rem;}
body.scaffold .triptych,body.scaffold .cols3{margin-top:1.4rem;}