/* Layout concept: one reading column under a fixed "nail" rail driven into the page as you
   scroll. Cool herbarium paper, warm oxide ink for the spice, deep teal for every chart and
   instrument. Words in a 16th-century garalde, numbers and dates in a contemporary geometric. */
:root{
  --paper:#EFEEE8;        /* cool herbarium paper, green-grey bias */
  --paper-2:#E5E5DB;      /* sunken panel: charts, maps */
  --paper-3:#F7F6F2;      /* raised card: offers */
  --ink:#1C1813;          /* warm near-black */
  --ink-2:#423E35;
  --ink-dim:#75705F;
  --rust:#A8441F;         /* the dried bud */
  --rust-soft:#C4663B;
  --teal:#2C5F54;         /* oxidised copper: charts, labels, notes */
  --hair:rgba(28,24,19,.16);
  --hair-soft:rgba(28,24,19,.08);

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --geo:"Unbounded","Trebuchet MS",system-ui,sans-serif;

  --s-note:.88rem;
  --s-body:1.1875rem;
  --s-lede:clamp(1.22rem,2.1vw,1.5rem);
  --s-h2:clamp(2.1rem,4.6vw,3.3rem);
  --s-h1:clamp(2.7rem,7.4vw,5.4rem);
  --s-huge:clamp(3.6rem,13vw,9rem);

  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--s-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;mix-blend-mode:multiply;
}
::selection{background:var(--rust);color:#fff}
a{color:var(--ink)}
a:focus-visible,.offer:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* ---------- page transition ---------- */
.js body{animation:pageIn .52s var(--ease) both}
@keyframes pageIn{from{transform:translateY(9px)}}
.js.leaving body{opacity:0;transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){
  .js body{animation:none}
  .js.leaving body{opacity:1;transition:none}
}

/* ---------- reveal on scroll (only when JS confirms motion is welcome) ---------- */
/* Only elements below the first screen are ever hidden, so the opening view is always complete. */
.motion .rv.pre{opacity:0;transform:translateY(16px)}
.motion .rv.pre.in{opacity:1;transform:none;
  transition:opacity .72s var(--ease) var(--d,0s),transform .72s var(--ease) var(--d,0s)}

/* ---------- the nail ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:40;pointer-events:none}
.rail-track{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hair-soft)}
.rail-fill{position:absolute;left:0;top:0;width:3px;height:calc(var(--p,0) * 100%);
  background:linear-gradient(180deg,var(--rust-soft),var(--rust))}
.rail-head{display:none}
@media (min-width:1100px){
  .rail{left:clamp(20px,3.4vw,54px);width:30px}
  .rail-track{left:14px;top:14vh;bottom:14vh;width:1px;background:var(--hair)}
  .rail-fill{left:14px;top:14vh;width:1px;height:calc(var(--p,0) * 72vh);
    background:linear-gradient(180deg,rgba(168,68,31,.3),var(--rust))}
  .rail-head{display:block;position:absolute;left:0;width:30px;height:30px;
    top:calc(14vh + var(--p,0) * 72vh);transform:translateY(-50%)}
}

/* ---------- shell ---------- */
.shell{max-width:76rem;margin-inline:auto;padding-inline:clamp(1.15rem,5vw,3rem);padding-block:0}
@media (min-width:1100px){.shell{padding-left:7.5rem}}
.col{max-width:40rem;min-width:0}
.wide{max-width:56rem;min-width:0}

section{padding-block:clamp(3.6rem,9vw,7rem)}
section + section{border-top:1px solid var(--hair-soft)}

h1,h2,h3{font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.018em}
h1{font-size:var(--s-h1);line-height:1.02;margin-bottom:1.4rem}
h2{font-size:var(--s-h2);line-height:1.06;max-width:18ch;margin-bottom:1.6rem}
p{margin:0 0 1.15em}
em{font-style:italic}

.sci{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--teal);margin:0 0 1.5rem;line-height:1.5}
.lede{font-size:var(--s-lede);line-height:1.52;max-width:35ch}
.dek{color:var(--ink-dim);max-width:40ch}

.note{margin:2.2rem 0 0;padding:0 0 0 1.25rem;border-left:2px solid rgba(44,95,84,.35);
  font-size:var(--s-note);line-height:1.58;color:var(--ink-dim);font-style:italic;max-width:33rem}
.note p{margin:0 0 .6em}
.note p:last-child{margin:0}

.lead-cap::first-letter{float:left;font-size:4.3em;line-height:.715;margin:.06em .09em 0 0;
  color:var(--rust);font-weight:400}
@media (max-width:520px){.lead-cap::first-letter{font-size:3.4em;line-height:.72}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(1.4rem,4vw,3rem) clamp(3.6rem,9vw,7rem);display:grid;
  gap:clamp(2.2rem,5vw,3.5rem);align-items:center}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.hero-fig{margin:0;min-width:0;position:relative}
.hero-fig::before{content:"";position:absolute;inset:-14% -2%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 44%,rgba(168,68,31,.15),rgba(168,68,31,.05) 44%,rgba(168,68,31,0) 72%)}
.hero-fig svg,.hero-fig figcaption{position:relative}
.hero-fig svg{display:block;width:100%;max-width:190px;height:auto;margin-inline:auto}
@media (min-width:900px){.hero-fig svg{max-width:272px}}
.motion .hero-fig .draw{stroke-dasharray:420;stroke-dashoffset:420;
  animation:draw 1.5s .35s var(--ease) forwards}
.motion .hero-fig .draw:nth-of-type(2){animation-delay:.47s}
.motion .hero-fig .draw:nth-of-type(3){animation-delay:.59s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- figures ---------- */
figure{margin:clamp(2.4rem,5vw,3.4rem) 0 0;min-width:0}
figure svg{display:block;width:100%;height:auto;max-width:100%}
figcaption{font-family:var(--geo);font-weight:200;font-size:.76rem;letter-spacing:.03em;
  color:var(--ink-dim);line-height:1.7;margin-top:1.4rem;max-width:52ch}
.stages + figcaption{margin-top:2.4rem}

.stage-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem 1rem;margin-top:1.2rem}
.stage-labels span{display:block;text-align:center;font-family:var(--serif);font-size:1.02rem;
  line-height:1.3;color:var(--ink);min-width:0}
.stage-labels em{display:block;font-family:var(--geo);font-weight:200;font-style:normal;font-size:.7rem;
  letter-spacing:.03em;color:var(--ink-dim);margin-top:.35rem}
.stage-labels .picked{color:var(--rust)}
.stage-labels .picked em{color:var(--rust);opacity:.8}
@media (max-width:560px){.stage-labels span{font-size:.92rem}.stage-labels em{font-size:.64rem}}

.chart{background:var(--paper-2);border:1px solid var(--hair-soft);
  padding:clamp(.9rem,2.5vw,1.6rem);overflow-x:auto}
.motion .route{stroke-dasharray:3 7;stroke-dashoffset:360}
.motion .in .route,.motion .rv.in .route{animation:route 1.6s .3s linear forwards}
@keyframes route{to{stroke-dashoffset:0}}

/* ---------- photography ---------- */
.photo{position:relative;display:block;overflow:hidden;border:1px solid var(--hair-soft);background:var(--paper-2)}
.photo img{display:block;width:100%;height:auto;filter:saturate(.95) contrast(1.03)}
.band{margin:0;padding-block:0 clamp(1rem,3vw,2rem)}
/* ninguna fotografía se muestra nunca más ancha que sus propios píxeles */
.band .photo{max-width:1012px}
.pair{display:grid;gap:clamp(1.6rem,4vw,2.6rem);align-items:start;margin-top:clamp(2.4rem,5vw,3.4rem)}
@media (min-width:860px){.pair{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.pair figure{margin:0}
.pair figcaption{margin-top:1.1rem}
.side{margin:0;min-width:0}
.side figcaption{margin-top:1.1rem}

/* ---------- chronicle ---------- */
.chron{margin:clamp(2rem,5vw,3rem) 0 0;display:grid;gap:0}
.ev{display:grid;gap:.3rem 2rem;padding-block:1.5rem;border-top:1px solid var(--hair-soft)}
@media (min-width:760px){.ev{grid-template-columns:11rem minmax(0,1fr);gap:0 2.6rem}}
.ev:last-child{border-bottom:1px solid var(--hair-soft)}
.yr{font-family:var(--geo);font-weight:300;font-size:1rem;letter-spacing:.02em;color:var(--rust);
  font-variant-numeric:tabular-nums;line-height:1.5;padding-top:.22rem}
.ev p{margin:0;max-width:44ch}
.ev p + p{margin-top:.55em;color:var(--ink-dim);font-size:1.02rem}

/* ---------- the number ---------- */
.statement:first-child{border-top:0;padding-top:0}
.statement{text-align:center;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  padding-block:clamp(2.6rem,7vw,5rem);margin:0 0 clamp(2.6rem,6vw,4rem);position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;left:50%;top:50%;width:min(120%,56rem);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(168,68,31,.1),rgba(168,68,31,0) 62%)}
.statement > *{position:relative}
.huge{font-family:var(--geo);font-weight:200;font-size:var(--s-huge);line-height:.88;letter-spacing:-.035em;
  color:var(--rust);font-variant-numeric:tabular-nums;margin:0 0 1.1rem;display:block}
.huge-unit{font-family:var(--geo);font-weight:200;font-size:.84rem;letter-spacing:.05em;color:var(--ink-dim);
  display:block;line-height:1.6;max-width:30ch;margin-inline:auto}

/* ---------- kitchen ---------- */
dl{margin:clamp(1.8rem,4vw,2.6rem) 0 0;display:grid;gap:1.9rem}
dt{font-family:var(--geo);font-weight:300;font-size:.86rem;letter-spacing:.01em;color:var(--teal);margin-bottom:.55rem}
dd{margin:0;max-width:40rem}

/* ---------- site chrome ---------- */
.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  margin-bottom:clamp(2rem,5vw,3.4rem);transition:box-shadow .35s ease,background .35s ease}
.site-inner{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;align-items:baseline;justify-content:space-between;
  max-width:76rem;margin-inline:auto;padding-inline:clamp(1.15rem,5vw,3rem);
  padding-block:1.6rem 1.5rem;border-bottom:1px solid var(--hair-soft);
  transition:padding .35s var(--ease)}
@media (min-width:1100px){.site-inner{padding-left:7.5rem}}
.scrolled .site{background:var(--paper);box-shadow:0 12px 26px -24px rgba(28,24,19,.95)}
.scrolled .site-inner{padding-block:.9rem .85rem}
.mark{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--ink);text-decoration:none;
  white-space:nowrap;transition:color .2s ease}
.mark:hover{color:var(--rust)}
.site nav{display:flex;flex-wrap:wrap;gap:.4rem 1.7rem}
.site nav a{position:relative;font-family:var(--geo);font-weight:200;font-size:.8rem;letter-spacing:.02em;
  color:var(--ink-dim);text-decoration:none;padding-block:.2rem;transition:color .2s ease}
.site nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;background:var(--rust);
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.site nav a:hover{color:var(--ink)}
.site nav a:hover::after{transform:scaleX(1)}
.site nav a[aria-current="page"]{color:var(--rust)}
.site nav a[aria-current="page"]::after{transform:scaleX(1)}

.pager{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;
  padding-block:clamp(2.4rem,6vw,4rem);border-top:1px solid var(--hair-soft)}
.pager a{font-family:var(--serif);font-size:1.06rem;color:var(--ink-dim);text-decoration:none;
  max-width:22rem;line-height:1.45;transition:color .2s ease,transform .32s var(--ease)}
.pager a:hover{color:var(--rust)}
.pager .prev:hover{transform:translateX(-4px)}
.pager .next:hover{transform:translateX(4px)}
.pager b{display:block;font-family:var(--geo);font-weight:200;font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-dim);opacity:.75;margin-bottom:.3rem}
.pager .next{text-align:right;margin-left:auto}

/* ---------- contents ---------- */
.toc{margin:clamp(2.4rem,6vw,3.6rem) 0 0;display:grid;gap:0;max-width:52rem}
.toc a{display:grid;gap:.35rem 2.6rem;padding-block:1.5rem;border-top:1px solid var(--hair-soft);
  text-decoration:none;color:var(--ink);transition:padding-left .34s var(--ease)}
.toc a:last-child{border-bottom:1px solid var(--hair-soft)}
@media (min-width:760px){.toc a{grid-template-columns:14rem minmax(0,1fr);gap:0 2.6rem;align-items:baseline}
  .toc a:hover{padding-left:.6rem}}
.toc a:hover h3{color:var(--rust)}
.toc h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.15;margin:0;
  letter-spacing:-.015em;transition:color .22s ease}
.toc p{margin:0;color:var(--ink-dim);font-size:1.04rem;max-width:42ch}

/* ---------- the shop under the article ---------- */
.shop{border-top:1px solid var(--hair)}
.feature{display:grid;gap:0;max-width:52rem;margin-top:clamp(2rem,5vw,3rem);background:var(--paper-3);
  border:1px solid var(--hair-soft);text-decoration:none;color:var(--ink);overflow:hidden;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease)}
.feature:hover{transform:translateY(-5px);border-color:rgba(168,68,31,.45);
  box-shadow:0 18px 40px -20px rgba(28,24,19,.4)}
@media (min-width:720px){.feature{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:stretch}}
.feature-img{display:block;overflow:hidden;background:var(--paper-2);aspect-ratio:16/10}
@media (min-width:720px){.feature-img{aspect-ratio:auto;height:100%;min-height:18rem}}
.feature-img img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) contrast(1.03);transition:transform .8s var(--ease)}
.feature:hover .feature-img img{transform:scale(1.05)}
.feature-body{display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(1.5rem,4vw,2.4rem)}
.feature-name{font-family:var(--serif);font-size:clamp(1.55rem,3.2vw,2.05rem);line-height:1.1;
  letter-spacing:-.016em}
.feature-sub{font-family:var(--geo);font-weight:200;font-size:.74rem;letter-spacing:.05em;
  color:var(--ink-dim);margin-top:.6rem}
.feature-note{color:var(--ink-dim);font-size:1.04rem;line-height:1.52;margin-top:1rem;max-width:34ch}
.feature-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .9rem;margin-top:1.4rem}
.feature-price b{font-family:var(--geo);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.2rem);
  color:var(--rust);font-variant-numeric:tabular-nums;line-height:1}
.feature-price i{font-family:var(--geo);font-weight:200;font-style:normal;font-size:.76rem;
  letter-spacing:.03em;color:var(--ink-dim)}
.cta{display:block;margin:1.5rem 0 .8rem;padding:.86rem 2.3rem;text-align:center;
  font-family:var(--geo);font-weight:300;font-size:.82rem;letter-spacing:.03em;
  color:var(--paper);background:var(--ink);transition:background .28s ease}
.feature:hover .cta{background:var(--rust)}
.host{font-family:var(--geo);font-weight:200;font-size:.7rem;letter-spacing:.04em;color:var(--ink-dim);opacity:.8}
.shop-note{margin:clamp(1.4rem,3vw,2rem) 0 0;font-size:var(--s-note);color:var(--ink-dim);max-width:52rem;line-height:1.6}

/* ================= orchestrated motion ================= */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* the page is covered by paper on the way out, never on the way in */
.wipe{position:fixed;inset:0;z-index:90;background:var(--paper);transform:scaleY(0);
  transform-origin:bottom;pointer-events:none}
.leaving .wipe{transform:scaleY(1);transition:transform .42s var(--ease)}


/* headline arrives word by word */
.split .w{display:inline-block;white-space:pre}
.motion .split .w{opacity:0;transform:translateY(.46em) rotate(1.1deg);
  animation:wordIn .8s var(--ease) forwards;animation-delay:calc(var(--i) * .055s + .1s)}
@keyframes wordIn{to{opacity:1;transform:none}}

/* photographs wipe up out of a slight zoom */
.motion .photo.pre-img img{clip-path:inset(100% 0 0 0);transform:scale(1.07)}
.motion .photo.pre-img.in-img img{clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path 1.05s var(--ease),transform 1.4s var(--ease)}

/* parallax drift on the two large photographs */
.par{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

/* the nail turns a little as it is driven in */
@media (min-width:1100px){.rail-head{transform:translateY(-50%) rotate(calc(var(--p,0) * 18deg))}}

/* the map is drawn in the order a cartographer would draw it */
.motion .chart .m-grid,.motion .chart .m-land,.motion .chart .m-rings,
.motion .chart .m-compass,.motion .chart .m-isles,.motion .chart .m-volc,
.motion .chart .m-labels{opacity:0;transform-box:fill-box;transform-origin:center}
.motion .rv.in .m-grid{animation:mIn .6s var(--ease) .05s forwards}
.motion .rv.in .m-land{animation:mIn .75s var(--ease) .22s forwards}
.motion .rv.in .m-rings{animation:mRings .85s var(--ease) .4s forwards}
.motion .rv.in .m-isles{animation:mIn .5s var(--ease) .6s forwards}
.motion .rv.in .m-volc{animation:mPop .6s cubic-bezier(.34,1.5,.64,1) .74s forwards}
.motion .rv.in .m-labels{animation:mIn .6s var(--ease) .92s forwards}
.motion .rv.in .m-compass{animation:mSpin 1s var(--ease) 1.06s forwards}
@keyframes mIn{to{opacity:1}}
@keyframes mRings{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes mPop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes mSpin{from{opacity:0;transform:rotate(-26deg)}to{opacity:1;transform:none}}

/* the molecule draws itself bond by bond, then labels appear */
.motion .bonds path{stroke-dasharray:1;stroke-dashoffset:1}
.motion .rv.in .bonds path{animation:bond .85s var(--ease) forwards}
.motion .rv.in .bonds path:nth-child(1){animation-delay:0.10s}
.motion .rv.in .bonds path:nth-child(2){animation-delay:0.16s}
.motion .rv.in .bonds path:nth-child(3){animation-delay:0.22s}
.motion .rv.in .bonds path:nth-child(4){animation-delay:0.28s}
.motion .rv.in .bonds path:nth-child(5){animation-delay:0.34s}
.motion .rv.in .bonds path:nth-child(6){animation-delay:0.40s}
.motion .rv.in .bonds path:nth-child(7){animation-delay:0.46s}
.motion .rv.in .bonds path:nth-child(8){animation-delay:0.52s}
.motion .rv.in .bonds path:nth-child(9){animation-delay:0.58s}
.motion .rv.in .bonds path:nth-child(10){animation-delay:0.64s}
.motion .chart svg > g:not(.bonds) text,.motion .chart svg > text{opacity:0}
.motion .rv.in .chart svg > g:not(.bonds) text,.motion .rv.in .chart svg > text{
  animation:mIn .7s var(--ease) .95s forwards}
.motion .chart .m-labels text,.motion .rv.in .m-labels text{animation:none;opacity:inherit}

/* the chronicle draws a line down its own margin as you read it */
.chron{position:relative}
.chron-line{display:none}
@media (min-width:760px){
  .chron-line{display:block;position:absolute;left:-1.5rem;top:0;width:2px;
    height:var(--chron,0%);background:linear-gradient(180deg,rgba(168,68,31,.25),var(--rust));
    border-radius:2px}
}
/* the three specimen labels land one after another */
.motion .rv.in .stage-labels span{opacity:0;animation:mIn .6s var(--ease) forwards}
.motion .rv.in .stage-labels span:nth-child(1){animation-delay:.95s}
.motion .rv.in .stage-labels span:nth-child(2){animation-delay:1.1s}
.motion .rv.in .stage-labels span:nth-child(3){animation-delay:1.25s}

/* the big number glows once when it finishes counting */
.huge.landed{animation:pulse 1s var(--ease)}
@keyframes pulse{0%{text-shadow:0 0 0 rgba(168,68,31,0)}
  32%{text-shadow:0 0 42px rgba(168,68,31,.5)}100%{text-shadow:0 0 0 rgba(168,68,31,0)}}

/* a quiet way back to the top, once you are deep in a page */
.totop{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:35;
  width:2.9rem;height:2.9rem;display:grid;place-items:center;background:var(--paper-3);
  border:1px solid var(--hair);color:var(--ink);cursor:pointer;opacity:0;
  transform:translateY(10px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s ease,border-color .25s ease}
.deep .totop{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.totop svg{width:1rem;height:1rem}

footer{padding-block:clamp(3rem,7vw,5rem);border-top:1px solid var(--hair-soft);font-size:.92rem;
  color:var(--ink-dim);line-height:1.7}
footer a{color:var(--ink-dim);text-decoration-color:rgba(117,112,95,.45);text-underline-offset:3px;
  transition:color .2s ease}
footer a:hover{color:var(--rust);text-decoration-color:var(--rust)}
.foot-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.6rem 2rem;padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--hair-soft)}
.foot-mark{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--ink);margin:0;
  letter-spacing:-.012em}
.foot-contact{margin:0;font-size:1.02rem}
.foot-contact a{color:var(--rust);text-decoration-color:rgba(168,68,31,.4);text-underline-offset:3px}
.foot-contact a:hover{text-decoration-color:var(--rust)}
.srcs{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.colophon{font-family:var(--geo);font-weight:200;font-size:.74rem;letter-spacing:.06em;
  color:var(--ink-dim);opacity:.6;margin-top:2.4rem}