/* ================================================================
   FOOLSCAP — shared shell. Loaded by every page.
   Tokens, paper, the sticky header, the menu, rubric labels,
   sketch frames, Read on, the footer. Edit here, not per page.
   ================================================================ */

/* ============ FOOLSCAP HOME TEMPLATE v0.1 ============
   Tokens per VISUAL_IDENTITY v0.2 · labels per rubric_label v2.8
   Reference: airmail.news mixed-scale composition, re-set in
   Foolscap's hand. Texts and sketches are placeholders.       */
:root{
  --paper:#F4F1E8; --paper-dim:#ECE7DA; --ink:#1C1A17;
  --foxing:#7A4A2E; --dust:#B9A98D;
  --azur:#3E6C7E; --olive:#5E6238; --indigo:#34495E;
  --garnet:#7B2D2A; --ochre:#8F7536; --slate:#56524A;
  --line-h1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M1 1.91 C170 1.91 297 2.43 424 2.43 C476 2.43 515 1.71 554 1.71 C662 1.71 744 1.97 825 1.97 C975 1.97 1087 2.13 1199 2.13 ' fill='none' stroke='%231C1A17' stroke-width='1.00' stroke-linecap='round' opacity='0.49'/%3E%3C/svg%3E");
  --line-h2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M1 1.36 C270 1.36 472 2.13 674 2.13 C749 2.13 805 1.70 861 1.70 C996 1.70 1098 1.56 1199 1.56 ' fill='none' stroke='%231C1A17' stroke-width='1.00' stroke-linecap='round' opacity='0.42'/%3E%3C/svg%3E");
  --line-h3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M1 2.11 C117 2.11 203 2.33 290 2.33 C376 2.33 441 1.43 506 1.43 C783 1.43 991 1.37 1199 1.37 ' fill='none' stroke='%231C1A17' stroke-width='1.04' stroke-linecap='round' opacity='0.40'/%3E%3C/svg%3E");
  --line-h4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M1 2.22 C129 2.22 225 2.37 321 2.37 C469 2.37 581 2.41 692 2.41 C895 2.41 1047 2.86 1199 2.86 ' fill='none' stroke='%231C1A17' stroke-width='1.01' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E");
  --line-h5:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M1 1.58 C185 1.58 322 1.27 460 1.27 C594 1.27 695 2.06 796 2.06 C957 2.06 1078 1.67 1199 1.67 ' fill='none' stroke='%231C1A17' stroke-width='0.91' stroke-linecap='round' opacity='0.50'/%3E%3C/svg%3E");
  --line-h6:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M1 2.12 C169 2.12 295 2.60 421 2.60 C454 2.60 479 2.51 504 2.51 C611 2.51 691 1.71 771 1.71 C820 1.71 856 1.42 893 1.42 C1015 1.42 1107 1.58 1199 1.58 ' fill='none' stroke='%231C1A17' stroke-width='1.07' stroke-linecap='round' opacity='0.44'/%3E%3C/svg%3E");
  --line-v1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='1200' preserveAspectRatio='none'%3E%3Cpath d='M2.03 1 C2.03 169 2.61 296 2.61 422 C2.61 526 1.91 603 1.91 681 C1.91 800 2.26 890 2.26 979 C2.26 1067 2.59 1133 2.59 1199 ' fill='none' stroke='%231C1A17' stroke-width='0.97' stroke-linecap='round' opacity='0.40'/%3E%3C/svg%3E");
  --line-v2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='1200' preserveAspectRatio='none'%3E%3Cpath d='M1.69 1 C1.69 178 1.78 310 1.78 443 C1.78 458 1.94 469 1.94 480 C1.94 488 2.36 494 2.36 500 C2.36 592 1.28 661 1.28 730 C1.28 918 1.96 1058 1.96 1199 ' fill='none' stroke='%231C1A17' stroke-width='0.97' stroke-linecap='round' opacity='0.50'/%3E%3C/svg%3E");
  --line-v3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='1200' preserveAspectRatio='none'%3E%3Cpath d='M2.74 1 C2.74 204 2.17 356 2.17 508 C2.17 594 2.60 658 2.60 723 C2.60 755 2.82 779 2.82 803 C2.82 805 2.79 806 2.79 807 C2.79 964 2.29 1081 2.29 1199 ' fill='none' stroke='%231C1A17' stroke-width='0.94' stroke-linecap='round' opacity='0.42'/%3E%3C/svg%3E");
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Newsreader',Georgia,serif;
  --label:'Archivo','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:20px;line-height:1.65;-webkit-font-smoothing:antialiased;}
/* paper grain over everything */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.30;mix-blend-mode:multiply;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;}

/* ---------- sticky header: hidden on the title page, appears on scroll ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1.25rem;background:var(--paper);
  border-bottom:0;
  background-image:var(--line-h6);background-repeat:no-repeat;
  background-position:bottom center;background-size:100% 4px;
  transform:translateY(-102%);transition:transform .35s ease;}
.topbar.show{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.topbar{transition:none;}}
.topbar .site-logo{display:inline-flex;align-items:center;gap:9px;}
.topbar .sl-cap{height:26px;width:auto;overflow:visible;}
.topbar .sl-word{font-family:var(--display);font-weight:500;font-size:1.25rem;}
.burger{appearance:none;background:none;border:none;cursor:pointer;
  width:56px;height:56px;display:grid;place-items:center;padding:0;}
.burger svg{width:38px;height:38px;overflow:visible;}
.burger .bl{stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;
  transition:transform .4s cubic-bezier(.65,0,.35,1);}
.burger .bl1{transform-origin:12px 12px;}
.burger .bl2{transform-origin:15.5px 15px;}
.burger .bl2wrap{transform-origin:12px 12px;
  transition:transform .4s cubic-bezier(.65,0,.35,1);}
/* hover: lines change length and draw apart, no plate */
body:not(.menu-open) .burger:hover .bl1{transform:translateY(-1.5px);}
body:not(.menu-open) .burger:hover .bl2{transform:translateY(1.5px) scaleX(1.18);}
.burger:active{transform:scale(.94);}
.burger:focus-visible{outline:1.5px solid var(--foxing);outline-offset:3px;}
/* open: bl1 to one diagonal; bl2 normalised to full span then crossed */
body.menu-open .burger .bl1{transform:translateY(5px) rotate(45deg);}
body.menu-open .burger .bl2{transform:translateX(-3.5px) scaleX(1.54);}
body.menu-open .burger .bl2wrap{transform:translateY(-5px) rotate(-45deg);}
@media (prefers-reduced-motion:reduce){.burger .bl,.burger .bl2wrap,.burger{transition:none;}}

/* ---------- the menu: a contents leaf, not an app drawer ---------- */
.menu{position:fixed;inset:0;z-index:45;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.05rem;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
body.menu-open .menu{opacity:1;visibility:visible;}
@media (prefers-reduced-motion:reduce){.menu{transition:none;}}
.menu .tag{padding:.86em 2.3em;}
.menu .tag .brush{transition:transform .3s cubic-bezier(.22,.6,.25,1);}
.menu .tag:hover .brush{transform:rotate(-1.3deg) scale(1.045);}
.menu .tag:active .brush{transform:rotate(-.6deg) scale(.97);}
.menu .m-foot{margin-top:1.9rem;font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--foxing);}
.menu .m-foot a{position:relative;padding:2px .55em 3px;}
.menu .m-foot a::before{content:"";position:absolute;left:.55em;right:.55em;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.22,.6,.25,1);}
.menu .m-foot a:hover::before{transform:scaleX(1);}
.menu .m-foot a:active{top:1px;}
body.menu-open{overflow:hidden;}

/* ---------- rubric labels, brushstroke v2.8 ---------- */
.tag{position:relative;display:inline-grid;place-items:center;isolation:isolate;}
.tag .brush{position:absolute;inset:0;width:100%;height:100%;z-index:-1;}
.tag .name{position:relative;font-family:var(--label);font-weight:500;font-stretch:125%;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 3px rgba(28,26,23,.6);white-space:nowrap;}
.tag{padding:.82em 2.05em;}
.tag--sm{padding:.74em 1.75em;}
.tag--sm .name{font-size:.56rem;letter-spacing:.13em;}

/* ---------- placeholder sketches ---------- */
.ph{margin:0;}
.ph svg{display:block;width:100%;height:auto;}
.ph figcaption{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.42rem;letter-spacing:.1em;text-transform:uppercase;color:#948c7a;
  margin-top:.55rem;}

/* ---------- foxing-spot rule: the section divider ---------- */.byline{font-size:1rem;margin:0 0 1.3rem;}
.byline .by{font-style:italic;}
.byline .name{font-variant:small-caps;letter-spacing:.07em;font-weight:500;}
.readon{font-family:var(--label);font-stretch:125%;font-weight:600;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  position:relative;display:inline-block;padding-bottom:3px;
  transition:letter-spacing .35s cubic-bezier(.22,.6,.25,1),transform .12s ease;}
.readon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.35;}
.readon::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.22,.6,.25,1);}
.readon:hover{letter-spacing:.225em;}
.readon:hover::before{transform:scaleX(1);}
.readon:active{transform:translateY(1px);}
.c-azur{color:var(--azur);} .c-olive{color:var(--olive);} .c-indigo{color:var(--indigo);}
.c-garnet{color:var(--garnet);} .c-ochre{color:var(--ochre);} .c-slate{color:var(--slate);}

/* hover: a Dust hairline under titles, nothing louder */
a .title, a .toc-title{border-bottom:1px solid transparent;transition:border-color .2s;}
a:hover .title, a:hover .toc-title{border-color:var(--dust);}


.menu .tag,.menu .m-foot{opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease;}
body.menu-open .menu .tag,body.menu-open .menu .m-foot{opacity:1;transform:none;}
body.menu-open .menu .tag:nth-child(1){transition-delay:.05s;}
body.menu-open .menu .tag:nth-child(2){transition-delay:.1s;}
body.menu-open .menu .tag:nth-child(3){transition-delay:.15s;}
body.menu-open .menu .tag:nth-child(4){transition-delay:.2s;}
body.menu-open .menu .tag:nth-child(5){transition-delay:.25s;}
body.menu-open .menu .tag:nth-child(6){transition-delay:.3s;}
body.menu-open .menu .m-foot{transition-delay:.38s;}
@media (prefers-reduced-motion:reduce){
  .rv,.masthead .mh-cap,.masthead h1,.masthead .motto,.menu .tag,.menu .m-foot,
  .hero-cap .petal,.hero-cap .bristle,.hero-cap .crown path,.hero-cap .bell,.scrollcue{
    opacity:1 !important;transform:none !important;transition:none !important;
    clip-path:none !important;stroke-dashoffset:0 !important;}
  .scrollcue .sc-line::after{animation:none !important;display:none;}
  .readon,.readon::before,.menu .tag .brush,.burger svg,.burger .bl,
  footer nav a::before,.menu .m-foot a::before{transition:none !important;}
}

/* ---------- the quiet footer ---------- */
footer{position:relative;z-index:2;text-align:center;padding:3.5rem 1.5rem 4.5rem;}
footer .colo{max-width:30em;margin:0 auto 1.4rem;font-size:.98rem;line-height:1.6;color:#46423b;}
footer nav{font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--foxing);}
footer nav a{position:relative;padding:2px .55em 3px;}
footer nav a::before{content:"";position:absolute;left:.55em;right:.55em;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.22,.6,.25,1);}
footer nav a:hover::before{transform:scaleX(1);}
footer nav a:active{top:1px;}
footer .foxing-spot{display:block;width:7px;height:7px;border-radius:50%;
  background:var(--foxing);margin:2.4rem auto 0;opacity:.85;}

/* ---------- photograph slot: paper held open until the picture arrives ---------- */
.ph-slot{position:relative;width:100%;aspect-ratio:3/2;background:var(--paper-dim);
  border:1px solid var(--dust);display:grid;place-items:center;}
.ph-slot::after{content:attr(data-note);font-family:var(--label);font-stretch:125%;font-weight:500;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#a2998a;text-align:center;
  padding:0 1.2rem;line-height:1.9;}
.ph-slot--portrait{aspect-ratio:3/4;}