/* ==========================================================================
   Everything below is the site's design. Content is edited in WordPress,
   not here. See SETUP.md before changing anything in this file.
   ========================================================================== */

:root{
  --forest:#12211a;
  --forest-lift:#1a2e23;
  --moss:#3f5c46;
  --cream:#f3ebd9;
  --cream-2:#e7dbc1;
  --charcoal:#24252a;
  --copper:#ad6c37;
  --copper-lift:#c9884b;
  --gold:#e2b76d;

  --display:"Fraunces",Georgia,serif;
  --body:"Spectral",Georgia,serif;

  --frame:clamp(.85rem,2.4vw,2rem);
  --lane:0px;
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --stack:clamp(4.5rem,9vw,9rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  position:relative;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.02rem,.55vw + .92rem,1.16rem);
  line-height:1.72;
}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:500;
  line-height:1.06;
  margin:0;
  letter-spacing:-.012em;
}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--cream);color:var(--forest);padding:.7rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- masthead ---------- */
.masthead{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:calc(var(--frame) + 1.2rem) var(--gutter) 1.15rem;
  color:var(--cream);
  transition:background-color .45s ease,color .45s ease,box-shadow .45s ease,padding .45s ease;
}
.masthead.is-lifted{
  background:var(--cream);
  color:var(--forest);
  padding-top:.7rem;padding-bottom:.7rem;
  box-shadow:0 1px 0 rgba(18,33,26,.16);
}
.masthead__name{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:500;
  font-size:1.06rem;
  letter-spacing:.05em;
  text-decoration:none;
  opacity:0;
  transform:translateY(-.35rem);
  transition:opacity .45s ease,transform .45s ease;
  pointer-events:none;
}
.masthead.is-lifted .masthead__name{opacity:1;transform:none;pointer-events:auto}

.nav{display:flex;align-items:center;gap:clamp(.8rem,2.2vw,2.1rem);margin-left:auto}
.nav__link{
  font-size:.95rem;
  text-decoration:none;
  padding:.35rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
  white-space:nowrap;
}
.nav__link:hover{border-bottom-color:currentColor}

.nav__group{position:relative}
.nav__toggle{
  font:inherit;font-size:.95rem;color:inherit;
  background:none;border:0;border-bottom:1px solid transparent;
  padding:.35rem 0;cursor:pointer;
}
.nav__toggle:hover{border-bottom-color:currentColor}
.nav__toggle::after{content:"";display:inline-block;margin-left:.45em;width:.34em;height:.34em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.16em) rotate(45deg)}
.nav__shelf{
  position:absolute;top:calc(100% + .55rem);right:0;min-width:14rem;
  background:var(--cream);color:var(--forest);
  border:1px solid rgba(173,108,55,.4);
  padding:.5rem 0;
  display:none;
  box-shadow:0 14px 34px rgba(18,33,26,.22);
}
.nav__group[data-open="true"] .nav__shelf{display:block}
.nav__shelf a{display:block;padding:.42rem 1.1rem;font-size:.93rem;text-decoration:none}
.nav__shelf a:hover{background:var(--cream-2)}

.masthead__burger{display:none}

@media (max-width:820px){
  .nav__link,.nav__toggle{font-size:.88rem}
}

/* ---------- the cover ---------- */
.cover{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(5.5rem,12vh,8rem) var(--gutter) clamp(6rem,13vh,8.5rem);
  background:
    radial-gradient(120% 85% at 50% 8%,var(--forest-lift) 0%,var(--forest) 58%,#0c1712 100%);
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
}
.cover::before{
  content:"";position:absolute;inset:0;z-index:-2;
  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='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.10;mix-blend-mode:overlay;
}
/* foil-stamped case rules */
.cover::after{
  content:"";position:absolute;
  inset:var(--frame);
  z-index:-1;
  border:1px solid rgba(173,108,55,.55);
  box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 6px rgba(226,183,109,.22);
  pointer-events:none;
}

.cover__hem{position:absolute;left:0;right:0;bottom:var(--frame);height:0;pointer-events:none}
.cover__inner{position:relative;z-index:3;text-align:center;max-width:44rem}
.cover__inner::before{
  content:"";position:absolute;z-index:-1;
  inset:-14% -22%;
  background:radial-gradient(60% 52% at 50% 50%,rgba(12,23,18,.72) 0%,rgba(12,23,18,.42) 48%,rgba(12,23,18,0) 78%);
  pointer-events:none;
}

.emblem{width:clamp(46px,6vw,62px);margin:0 auto clamp(1.6rem,4vh,2.4rem);display:block}
.emblem path,.emblem circle{vector-effect:non-scaling-stroke}

.cover__title{
  font-size:clamp(3.9rem,14vw,8.6rem);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:400;
  line-height:.94;
  letter-spacing:-.02em;
  color:var(--cream);
}
.cover__title em{
  display:block;font-style:normal;
}
.cover__rule{
  width:clamp(4rem,14vw,8rem);height:1px;margin:clamp(1.5rem,4vh,2.2rem) auto;
  background:linear-gradient(90deg,transparent,var(--copper-lift) 22%,var(--gold) 50%,var(--copper-lift) 78%,transparent);
  border:0;
}
.cover__saying{
  font-size:clamp(1.12rem,2.6vw,1.5rem);
  font-style:italic;
  font-weight:300;
  color:#efe4cd;
  margin:0 auto;
  max-width:32ch;
  text-wrap:balance;
}
.cover__genre{
  margin:clamp(1.3rem,3.4vh,2rem) 0 0;
  font-size:.94rem;
  letter-spacing:.14em;
  color:rgba(243,235,217,.62);
}

.cover__cue{
  position:absolute;left:50%;bottom:clamp(3.4rem,7.5vh,4.8rem);
  transform:translateX(-50%);
  z-index:2;
  font-size:.84rem;letter-spacing:.14em;
  color:rgba(243,235,217,.5);
  text-decoration:none;
}
.cover__cue:hover{color:var(--gold)}

/* fireflies */
.flies{position:absolute;inset:0;z-index:1;pointer-events:none}
.fly{
  position:absolute;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 7px 2px rgba(226,183,109,.5),0 0 18px 7px rgba(226,183,109,.18);
  opacity:0;
  animation:rise linear infinite;
}
/* each light lifts from beneath the stamped frame and fades as it climbs */
@keyframes rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  9%{transform:translate3d(13px,calc(var(--rise) * -.09),0);opacity:.85}
  24%{transform:translate3d(-9px,calc(var(--rise) * -.24),0);opacity:.14}
  41%{transform:translate3d(17px,calc(var(--rise) * -.41),0);opacity:.95}
  58%{transform:translate3d(-5px,calc(var(--rise) * -.58),0);opacity:.28}
  76%{transform:translate3d(13px,calc(var(--rise) * -.76),0);opacity:.8}
  91%{transform:translate3d(1px,calc(var(--rise) * -.91),0);opacity:.1}
  100%{transform:translate3d(7px,calc(var(--rise) * -1),0);opacity:0}
}

body[data-atmosphere="lights"] .cover__art{display:none}
body[data-atmosphere="roots"] .flies,
body[data-atmosphere="smoke"] .flies{display:none}
body[data-atmosphere="roots"] .cover__art{top:0;bottom:auto}

/* ---- the hero comes to life ---- */

/* roots grow out of the base, then the rail carries on down the page */
@keyframes rootgrow{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}

body[data-atmosphere="roots"] .cover__art{
  animation:rootgrow 3.4s cubic-bezier(.22,.61,.36,1) both;
}


/* smoke keeps moving: two layers drifting against each other */
/* translate only — scaling a blurred layer forces the browser to redraw it
   every frame, which is what made this expensive. The two layers are drawn
   oversized instead, and simply slide against one another. */
/* ---- smoke, drawn by the browser rather than re-rendered from a picture ----
   Each puff is a soft radial glow that rises, swells and dissolves. Nothing
   here needs rasterising, so it stays smooth at any window size. */
.smoke{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.puff{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(214,205,182,.34) 0%,
    rgba(214,205,182,.20) 42%,
    rgba(214,205,182,.07) 68%,
    rgba(214,205,182,0) 100%);
  opacity:0;
  animation:puff var(--dur,26s) ease-in-out var(--delay,0s) infinite;
}
@keyframes puff{
  0%  {transform:translate3d(0,0,0) scale(.72);            opacity:0}
  14% {opacity:var(--peak,.85)}
  62% {opacity:calc(var(--peak,.85) * .6)}
  100%{transform:translate3d(var(--dx,4vw),var(--dy,-46vh),0) scale(1.55); opacity:0}
}
.puff:nth-child(1){left:2%;   bottom:-16%; width:46vw; height:40vh; --dur:29s; --delay:-3s;  --dx:5vw;  --dy:-52vh; --peak:.9}
.puff:nth-child(2){left:24%;  bottom:-20%; width:58vw; height:50vh; --dur:37s; --delay:-14s; --dx:-7vw; --dy:-44vh; --peak:.75}
.puff:nth-child(3){left:52%;  bottom:-14%; width:42vw; height:36vh; --dur:24s; --delay:-8s;  --dx:6vw;  --dy:-58vh; --peak:.85}
.puff:nth-child(4){left:70%;  bottom:-18%; width:52vw; height:46vh; --dur:33s; --delay:-21s; --dx:-5vw; --dy:-48vh; --peak:.7}
.puff:nth-child(5){left:-8%;  bottom:-10%; width:36vw; height:30vh; --dur:21s; --delay:-11s; --dx:8vw;  --dy:-62vh; --peak:.8}
.puff:nth-child(6){left:38%;  bottom:-22%; width:64vw; height:54vh; --dur:43s; --delay:-27s; --dx:-4vw; --dy:-40vh; --peak:.6}
.puff:nth-child(7){left:84%;  bottom:-12%; width:38vw; height:32vh; --dur:27s; --delay:-5s;  --dx:-9vw; --dy:-56vh; --peak:.78}
.puff:nth-child(8){left:14%;  bottom:-8%;  width:30vw; height:26vh; --dur:19s; --delay:-16s; --dx:4vw;  --dy:-66vh; --peak:.72}

/* a low bank sitting across the base */
.smoke::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-24%;height:54%;
  background:radial-gradient(60% 100% at 50% 100%,
    rgba(214,205,182,.30) 0%, rgba(214,205,182,.12) 52%, rgba(214,205,182,0) 100%);
}

/* embers lifting off it */
.ember{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:#e2b76d;
  box-shadow:0 0 8px 3px rgba(226,183,109,.35);
  opacity:0;
  animation:emberrise var(--dur,24s) linear var(--delay,0s) infinite;
}
@keyframes emberrise{
  0%  {transform:translate3d(0,0,0);opacity:0}
  12% {opacity:.75}
  70% {opacity:.35}
  100%{transform:translate3d(var(--dx,3vw),var(--dy,-60vh),0);opacity:0}
}
.ember:nth-child(9) {left:18%; bottom:4%;  --dur:23s; --delay:-4s;  --dx:4vw;  --dy:-58vh}
.ember:nth-child(10){left:46%; bottom:2%;  --dur:31s; --delay:-17s; --dx:-3vw; --dy:-52vh}
.ember:nth-child(11){left:67%; bottom:6%;  --dur:27s; --delay:-9s;  --dx:5vw;  --dy:-64vh}
.ember:nth-child(12){left:88%; bottom:3%;  --dur:35s; --delay:-24s; --dx:-4vw; --dy:-50vh}

/* whatever rises from the base of the cover */
.cover__art{
  position:absolute;left:50%;bottom:0;
  /* deliberately wider than the window, so a drifting edge never comes into view */
  max-width:none;
  width:min(132%,1500px);
  transform:translateX(-50%);
  z-index:1;pointer-events:none;
  opacity:.85;
}

/* ---------- the bookmark rail ---------- */
.spine{
  position:absolute;top:0;left:0;
  width:var(--lane);
  z-index:5;
  pointer-events:none;
  display:none;
}
.spine svg{display:block;overflow:visible}
.spine__root{stroke:none}
.spine__hair{fill:none;stroke-linecap:round}
.spine__node{pointer-events:auto;cursor:pointer;opacity:.5;transition:opacity .3s ease}
.spine__node:hover,.spine__node.is-here{opacity:1}
.spine__glyph{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spine__spark{stroke:none}
.spine__hit{fill:transparent;stroke:none}


/* ---------- subpage header ---------- */
.pagehead{
  position:relative;
  padding:calc(var(--frame) + clamp(7rem,16vh,10rem)) var(--gutter) clamp(4rem,9vh,6rem);
  background:radial-gradient(120% 90% at 50% 10%,var(--forest-lift) 0%,var(--forest) 60%,#0c1712 100%);
  color:var(--cream);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:-2;
  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='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.10;mix-blend-mode:overlay;
}
.pagehead::after{
  content:"";position:absolute;inset:var(--frame);z-index:-1;
  border:1px solid rgba(173,108,55,.55);
  box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 6px rgba(226,183,109,.22);
  pointer-events:none;
}
.pagehead__art{
  position:absolute;left:50%;bottom:0;
  max-width:none;
  width:min(132%,1500px);
  transform:translateX(-50%);
  z-index:-1;pointer-events:none;
  opacity:.6;
}
/* the roots now hang from the top, so the header must anchor them there too */
body[data-atmosphere="roots"] .pagehead__art{top:0;bottom:auto;opacity:.7}
.pagehead .flies{z-index:-1}
.pagehead h1{
  font-size:clamp(2.6rem,7vw,5rem);
  font-weight:400;
  color:var(--cream);
}
.pagehead .cover__rule{margin-top:clamp(1.2rem,3vh,1.8rem);margin-bottom:0}

/* ---------- generic page sections ---------- */
.plate{padding:var(--stack) var(--gutter)}
.excerpt{padding:var(--stack) var(--gutter) calc(var(--stack) + 5rem)}
.work,.keep{padding:var(--stack) var(--gutter)}

.wrap{max-width:76rem;margin:0 auto}

.eyebrow{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-style:italic;font-weight:400;
  font-size:1.02rem;
  color:var(--copper);
  margin:0 0 1.1rem;
}

/* ---------- author plate ---------- */
.plate{background:var(--cream)}
.plate__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2.2rem,5vw,4.5rem);
  align-items:start;
}
.plate__title{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:1.4rem}
.plate__body p{max-width:58ch;margin:0 0 1.15rem}
.plate__body p:last-of-type{margin-bottom:1.9rem}

/* long-form variant: the portrait sits in the text and the copy flows under it */
.plate__grid--flow{
  display:block;
  max-width:62rem;
}
.plate__grid--flow .portrait{
  float:right;
  width:min(38%,22rem);
  margin:.6rem 0 1.8rem 2.6rem;
  shape-outside:margin-box;
}
.plate__grid--flow .plate__body p{max-width:none}
.plate__grid--flow::after{content:"";display:block;clear:both}

@media (max-width:760px){
  .plate__grid--flow .portrait{float:none;width:100%;max-width:26rem;margin:0 0 2rem}
}


.inline-note{
  display:block;margin-top:1.4rem;padding:.85rem 1rem;
  border-left:2px solid var(--copper);
  background:rgba(173,108,55,.07);
  font-size:.92rem;font-style:italic;
  max-width:58ch;
}

.inline-note--dark{
  border-left-color:var(--gold);
  background:rgba(226,183,109,.09);
  color:rgba(243,235,217,.82);
  max-width:38ch;
}

.pullquote{
  margin:0 0 2rem;
  padding-left:1.4rem;
  border-left:2px solid var(--copper);
  max-width:34ch;
}
.pullquote p{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.42;
  margin:0 0 .7rem;
}
.pullquote cite{
  font-style:normal;font-size:.92rem;
  color:rgba(36,37,42,.65);
}
.pullquote--empty p{
  color:rgba(36,37,42,.38);
}

.work__hook{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:400;font-style:italic;
  font-size:clamp(1.15rem,2.3vw,1.5rem);
  line-height:1.4;
  color:var(--gold);
  max-width:30ch;
  margin:0 0 1.6rem;
}

.press{
  background:var(--cream-2);
  padding:var(--stack) var(--gutter);
}
.press__title{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:2.4rem}
.press__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  gap:clamp(1.6rem,3vw,2.8rem);
  align-items:start;
}
.press .pullquote{margin:0;max-width:none}


.facts{list-style:none;margin:0;padding:0}
.facts li{
  display:flex;gap:1rem;align-items:baseline;
  padding:.55rem 0;
  border-bottom:1px solid rgba(36,37,42,.12);
  font-size:.98rem;
}
.facts li span{
  flex:0 0 7.5rem;
  font-style:italic;
  color:var(--copper);
}

.textlink{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-size:1.05rem;
  color:var(--copper);
  text-decoration:none;
  border-bottom:1px solid rgba(173,108,55,.45);
  padding-bottom:.14rem;
}
.textlink:hover{border-bottom-color:var(--copper)}

.portrait{position:relative}
.portrait img{
  width:100%;
  filter:saturate(.92);
  outline:1px solid rgba(36,37,42,.16);
  outline-offset:-1px;
}
.portrait figcaption{
  margin-top:.85rem;font-size:.87rem;font-style:italic;
  color:rgba(36,37,42,.62);
}

/* ---------- featured work ---------- */
.work{
  background:var(--moss);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.work::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay;pointer-events:none;
}
.work__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.2rem,6vw,5rem);
  align-items:center;
}
.work .eyebrow{color:var(--gold)}
.work__art{
  background:var(--cream);
  padding:clamp(1rem,2.4vw,2rem);
  box-shadow:0 26px 60px rgba(9,20,14,.35);
}
.work__art img{width:100%}
.work__art--bare{background:none;padding:0;box-shadow:none}
.work__title{font-size:clamp(2.1rem,5vw,3.5rem);margin-bottom:1.2rem}
.work__body p{max-width:52ch;margin:0 0 1.15rem;color:rgba(243,235,217,.9)}
.work__meta{
  margin:2.6rem 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(226,183,109,.3);
  font-size:.94rem;color:rgba(243,235,217,.72);
  font-style:italic;
}
.work .textlink{color:var(--gold);border-bottom-color:rgba(226,183,109,.45)}
.work .textlink:hover{border-bottom-color:var(--gold)}

/* ---------- excerpt ---------- */
.excerpt{
  background:var(--cream-2);
  padding-right:0;
  position:relative;
  overflow:hidden;
}
.excerpt__canopy,.excerpt__floor{
  position:absolute;left:0;width:100%;
  z-index:0;pointer-events:none;
}
.excerpt__canopy{top:0}
.excerpt__thicket{
  position:absolute;right:0;top:0;
  /* the tree line stops at the base of the well rather than running past it */
  height:calc(100% - (6rem + 12vw));
  width:min(56%,840px);
  object-fit:cover;object-position:right bottom;
  z-index:0;pointer-events:none;
}
.excerpt__floor{bottom:0}
.excerpt__grid{position:relative;z-index:1}
.excerpt__art{align-self:end}
.excerpt__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  max-width:none;
  margin:0;
}
.excerpt__art{position:relative}
.excerpt__art img{width:100%}
.excerpt__art figcaption{
  margin-top:.8rem;padding-right:var(--gutter);
  font-size:.87rem;font-style:italic;color:rgba(36,37,42,.6);
}
.excerpt__text{padding-right:clamp(1rem,2vw,2rem)}
.excerpt__lines{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300;
  font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.42;
  margin:0 0 1.6rem;
  max-width:34ch;
}
.excerpt__lines::first-letter{
  float:left;
  font-size:3.5em;
  line-height:.78;
  padding:.06em .12em 0 0;
  color:var(--copper);
  font-weight:500;
}
.excerpt__attrib{font-size:.95rem;font-style:italic;color:rgba(36,37,42,.68);margin:0}

.threshold{margin:2.6rem 0 0}
.threshold__link{
  display:inline-block;
  text-decoration:none;
  padding:1rem 1.5rem 1.05rem;
  border:1px solid rgba(173,108,55,.5);
  background:rgba(243,235,217,.42);
  transition:background-color .3s ease,border-color .3s ease;
}
.threshold__link:hover{
  background:rgba(243,235,217,.85);
  border-color:var(--copper);
}
.threshold__link span{
  display:block;
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  color:var(--copper);
}
.threshold__link small{
  display:block;
  margin-top:.3rem;
  font-size:.92rem;font-style:italic;
  color:rgba(36,37,42,.66);
}

/* ---------- keep in touch ---------- */
.keep{
  background:var(--forest);
  color:var(--cream);
  position:relative;
}
.keep__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(2.2rem,5vw,4rem);
}
.keep h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:1rem;color:var(--cream)}
.keep p{color:rgba(243,235,217,.78);max-width:40ch;margin:0 0 1.4rem}
.keep .eyebrow{color:var(--gold)}
.keep a{color:var(--gold)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.signup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
  max-width:30rem;
}
.signup .wide{grid-column:1 / -1}
.signup input{
  width:100%;min-width:0;
  font:inherit;font-size:1rem;
  padding:.72rem .85rem;
  color:var(--cream);
  background:rgba(243,235,217,.06);
  border:1px solid rgba(226,183,109,.4);
}
.signup input::placeholder{color:rgba(243,235,217,.45)}
.signup button{
  grid-column:1 / -1;justify-self:start;
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-size:1rem;font-weight:500;
  padding:.72rem 1.6rem;
  color:var(--forest);
  background:var(--gold);
  border:1px solid var(--gold);
  cursor:pointer;
  transition:background-color .25s ease;
}
.signup button:hover{background:var(--copper-lift)}
.signup__note{font-size:.87rem;margin-top:.9rem;color:rgba(243,235,217,.55)}
.signup__note a{color:rgba(226,183,109,.85);text-decoration:none;border-bottom:1px solid rgba(226,183,109,.35)}

.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{margin-bottom:.9rem;font-size:.98rem;color:rgba(243,235,217,.8)}
.contact-list a{text-decoration:none;border-bottom:1px solid rgba(226,183,109,.4)}
.contact-list .pending{color:rgba(243,235,217,.45);font-style:italic}

/* ---------- colophon ---------- */
.colophon{
  background:#0c1712;color:rgba(243,235,217,.6);
  padding:2rem var(--gutter);
  font-size:.88rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
}
.colophon nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.colophon a{text-decoration:none;border-bottom:1px solid transparent}
.build{margin-left:.9rem;font-size:.76rem;opacity:.5;letter-spacing:.06em}
.colophon a:hover{border-bottom-color:currentColor;color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .plate__grid,.work__grid,.excerpt__grid{grid-template-columns:1fr}
  .plate__grid{gap:2.6rem}
  .portrait{max-width:26rem}
  .work__grid{gap:2.6rem}
  .work__art{order:-1;max-width:24rem}
  .excerpt{padding-right:var(--gutter)}
  .excerpt__art{order:-1;max-width:34rem}
  .excerpt__art figcaption{padding-right:0}
}

@media (max-width:600px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,20rem);
    background:var(--cream);color:var(--forest);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.3rem;padding:2rem var(--gutter);
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.4,0,.2,1);
    box-shadow:-18px 0 44px rgba(12,23,18,.3);
  }
  body[data-nav="open"] .nav{transform:none}
  .nav__link,.nav__toggle{font-size:1.15rem}
  .nav__shelf{position:static;display:block;border:0;box-shadow:none;background:none;padding:.3rem 0 0 .9rem;min-width:0}
  .nav__shelf a{padding:.3rem 0;font-size:1rem}
  .nav__toggle::after{display:none}

  .masthead__name{opacity:1;transform:none;pointer-events:auto}
  .masthead__burger{
    display:block;position:relative;z-index:2;
    width:2.3rem;height:2.3rem;margin-left:auto;
    background:none;border:0;color:inherit;cursor:pointer;
  }
  body[data-nav="open"] .masthead__burger{color:var(--forest)}
  .masthead__burger span{
    position:absolute;left:.35rem;right:.35rem;height:1px;background:currentColor;
    transition:transform .3s ease,opacity .3s ease;
  }
  .masthead__burger span:nth-child(1){top:.72rem}
  .masthead__burger span:nth-child(2){top:1.13rem}
  .masthead__burger span:nth-child(3){top:1.54rem}
  body[data-nav="open"] .masthead__burger span:nth-child(1){transform:translateY(.41rem) rotate(45deg)}
  body[data-nav="open"] .masthead__burger span:nth-child(2){opacity:0}
  body[data-nav="open"] .masthead__burger span:nth-child(3){transform:translateY(-.41rem) rotate(-45deg)}

  .cover__genre{letter-spacing:.1em;font-size:.86rem}
}

@media (min-width:901px){
  :root{--lane:clamp(7rem,9vw,9.5rem)}
  .spine{display:block}
  .plate,.excerpt,.work,.keep,.colophon,.press{
    padding-left:calc(var(--gutter) + var(--lane));
  }
}

@media (prefers-reduced-motion:reduce){
  .fly{animation:none;opacity:.55}
  body[data-atmosphere="roots"] .cover__art{animation:none;clip-path:none}
  .puff,.ember{animation:none}
  .puff{opacity:calc(var(--peak,.8) * .55);transform:translate3d(0,-18vh,0) scale(1.15)}
  *{transition-duration:.01ms !important}
}

/* ==========================================================================
   Content written in the WordPress editor
   Ordinary paragraphs, headings, lists and quotes are styled here so that
   anything Kelli writes takes the site's typography without needing classes.
   ========================================================================== */

.entry > *:first-child{margin-top:0}
.entry p{margin:0 0 1.15rem;max-width:68ch}
.entry h2{
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  margin:2.6rem 0 1.1rem;
}
.entry h3{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:2rem 0 .8rem;
}
.entry h2:first-child,.entry h3:first-child{margin-top:0}

.entry a{
  color:var(--copper);
  text-decoration:none;
  border-bottom:1px solid rgba(173,108,55,.45);
}
.entry a:hover{border-bottom-color:var(--copper)}

.entry ul,.entry ol{margin:0 0 1.4rem;padding-left:1.3rem;max-width:64ch}
.entry li{margin-bottom:.5rem}

.entry blockquote{
  margin:2rem 0;
  padding-left:1.4rem;
  border-left:2px solid var(--copper);
  max-width:40ch;
}
.entry blockquote p{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  line-height:1.42;
  margin:0 0 .6rem;
}
.entry blockquote cite{font-style:normal;font-size:.92rem;color:rgba(36,37,42,.65)}

.entry img{margin:1.8rem 0}
.entry figure{margin:2rem 0}
.entry figcaption{margin-top:.7rem;font-size:.87rem;font-style:italic;color:rgba(36,37,42,.62)}

.entry hr{
  border:0;height:1px;margin:2.6rem 0;
  background:linear-gradient(90deg,var(--copper),transparent);
  max-width:20rem;
}

/* a table of facts, for book and script details:
   write it as a normal two-column table in the editor */
.entry table{border-collapse:collapse;width:100%;max-width:38rem;margin:0 0 1.8rem}
.entry td{
  padding:.55rem 0;
  border-bottom:1px solid rgba(36,37,42,.12);
  font-size:.98rem;
  vertical-align:baseline;
}
.entry td:first-child{
  width:9rem;
  font-style:italic;
  color:var(--copper);
  padding-right:1rem;
}

/* ==========================================================================
   WordPress-specific corrections
   ========================================================================== */

/* The admin bar sits over the top of the page for logged-in users, which
   pushes the fixed masthead onto the stamped frame. Visitors never see this,
   but there's no reason for it to look wrong while you're working. */
body.admin-bar .masthead{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .masthead{top:46px}
}

/* WordPress's own table block draws a box around every cell. The details
   lists want horizontal rules only. */
.entry .wp-block-table,
.entry .wp-block-table table{border-collapse:collapse}
.entry .wp-block-table td,
.entry .wp-block-table th,
.entry table td,
.entry table th{
  border:0;
  border-bottom:1px solid rgba(36,37,42,.14);
  padding:.6rem 1rem .6rem 0;
  background:none;
}
.entry .wp-block-table td:first-child,
.entry table td:first-child{
  width:11rem;
  font-style:italic;
  color:var(--copper);
}
.entry .wp-block-table figcaption{display:none}

/* A quote's attribution belongs on its own line, not run on from the quote. */
.entry blockquote cite,
.entry .wp-block-quote cite{
  display:block;
  margin-top:.7rem;
  font-family:var(--body);
  font-style:normal;
  font-size:.92rem;
  font-weight:400;
  color:rgba(36,37,42,.65);
}
.entry blockquote{max-width:52ch}
.entry .wp-block-quote{
  margin:2rem 0;
  padding-left:1.4rem;
  border-left:2px solid var(--copper);
  max-width:52ch;
}
.entry .wp-block-quote p{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:300;font-style:italic;
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.45;
  margin:0;
}

/* ==========================================================================
   Editor content sitting on the green feature section
   ========================================================================== */

.entry--dark h2{
  font-size:clamp(2.1rem,5vw,3.5rem);
  margin:0 0 1.2rem;
  color:var(--cream);
}
.entry--dark h3{color:var(--cream)}
.entry--dark p{color:rgba(243,235,217,.9);max-width:52ch}
/* Emphasis in the green section is just emphasis. Only the hook, directly
   after the heading, takes the display face — see below. */
.entry--dark a{
  color:var(--gold);
  border-bottom-color:rgba(226,183,109,.45);
}
.entry--dark a:hover{border-bottom-color:var(--gold)}
.entry--dark blockquote,
.entry--dark .wp-block-quote{border-left-color:var(--gold)}
.entry--dark blockquote p,
.entry--dark .wp-block-quote p{color:rgba(243,235,217,.92)}
.entry--dark table td{
  border-bottom-color:rgba(226,183,109,.25);
  color:rgba(243,235,217,.9);
}
.entry--dark table td:first-child{color:var(--gold)}

/* ==========================================================================
   Press quotes side by side
   Wrap the quotes in a Group block and give it the class  press-grid
   ========================================================================== */

.entry .press-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start;
  max-width:none;
}
.entry .press-grid > *{margin:0}
.entry .press-grid blockquote,
.entry .press-grid .wp-block-quote{
  margin:0;
  max-width:none;
}

/* two things side by side — wrap them in a Group with the class  two-up  */
.entry .two-up{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  max-width:none;
}
.entry .two-up > *{margin:0}
.entry .two-up table{margin-bottom:0}


/* The feature section tops out rather than centring, so a long introduction
   doesn't leave the cover stranded halfway down. */
.work--feature .work__grid{align-items:start}

/* Citations on the green */
.entry--dark blockquote cite,
.entry--dark .wp-block-quote cite{color:rgba(226,183,109,.85)}

/* WordPress wraps groups in its own element; it must not fight the grid */
.entry .wp-block-group.two-up,
.entry .wp-block-group.press-grid{max-width:none}


/* The eyebrow and the hook line keep their own shape inside editor content */
.entry p.eyebrow{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-style:italic;font-weight:400;
  font-size:1.02rem;
  margin:0 0 1.1rem;
  max-width:none;
}
.work .entry p.eyebrow{color:var(--gold)}
.entry p.work__hook{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-weight:400;font-style:italic;
  font-size:clamp(1.15rem,2.3vw,1.5rem);
  line-height:1.4;
  color:var(--gold);
  max-width:30ch;
  margin:0 0 1.6rem;
}
.entry--dark p.work__hook{color:var(--gold)}


/* ==========================================================================
   The feature section, styled by position rather than by class

   WordPress discards class names from pasted content, so the opening lines
   are recognised by where they sit instead: the first paragraph is the
   publisher line, and the paragraph directly after the heading is the hook.
   Nothing has to be applied in the editor for this to work.
   ========================================================================== */

.entry--dark > p:first-child{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-style:italic;
  font-weight:400;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--gold);
  margin:0 0 1.1rem;
  max-width:none;
}

/* the hook is marked as emphasis in the content, so ordinary paragraphs
   that happen to follow a heading are left alone */
.entry--dark > h2:first-of-type + p em{
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.15rem,2.3vw,1.5rem);
  line-height:1.4;
  color:var(--gold);
}



/* The parcel is drawn tight to its edges, so it needs holding back to the
   size it had when there was empty space built into the picture. */
.work__art--bare img{
  width:62%;
  margin-inline:auto;
}
@media (max-width:900px){
  .work__art--bare img{width:72%}
}

/* A footnote — the cover credit, the publication note — sits after a
   Separator block. That is a real block, so it survives being pasted, and
   the separator itself becomes the thin rule above the line. */
.entry--dark hr,
.entry--dark .wp-block-separator{
  border:0;
  height:1px;
  background:rgba(226,183,109,.3);
  margin:2.6rem 0 1.3rem;
  max-width:52ch;
  width:100%;
}
.entry--dark hr + p{
  font-size:.94rem;
  font-style:italic;
  font-weight:300;
  color:rgba(243,235,217,.72);
  max-width:52ch;
}
.entry--dark hr + p em{font-style:italic}

/* empty paragraphs left behind by the editor take up no room */
.entry--dark > p:empty{display:none;margin:0}


/* ==========================================================================
   WordPress Columns blocks
   These need no class name, so they survive pasting. Used for the two
   side-by-side detail panels and for the row of press quotes.
   ========================================================================== */

.entry .wp-block-columns{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(2rem,5vw,4rem);
  margin:0 0 2.4rem;
  align-items:start;
  max-width:none;
}
.entry .wp-block-column{flex:1 1 18rem;min-width:0}
.entry .wp-block-column > *:first-child{margin-top:0}
.entry .wp-block-column p{max-width:none}
.entry .wp-block-column table{margin-bottom:0}
.entry .wp-block-column blockquote,
.entry .wp-block-column .wp-block-quote{
  margin:0 0 1.6rem;
  max-width:none;
}
.entry .wp-block-column h2{margin-top:0}


/* Columns the theme builds itself, from repeated structures in the content */
.kt-cols{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  margin:0 0 2.4rem;
}
.kt-col{flex:1 1 18rem;min-width:0}
.kt-col > *:first-child{margin-top:0}
.kt-col p{max-width:none}
.kt-col table{margin-bottom:0}
.kt-col blockquote,
.kt-col .wp-block-quote{margin:0 0 1.6rem;max-width:none}
.kt-cols--three .kt-col{flex:1 1 16rem}


/* more air between quotes stacked in the same column */
.kt-col blockquote,
.kt-col .wp-block-quote{margin:0 0 2.8rem}
.kt-col > *:last-child{margin-bottom:0}

/* the press section sits in its own tone, separating it from the details */
.press .entry{max-width:none}
.press h2{font-size:clamp(2rem,4.4vw,3rem);margin:0 0 2rem}
.press p.eyebrow{margin-bottom:1rem}
.press .kt-cols{margin-bottom:0}


/* A heading that follows an eyebrow keeps them together — the heading's own
   top margin is meant for starting a section, not for sitting under a label. */
.entry p.eyebrow{margin-bottom:.8rem}
.entry p.eyebrow + h2,
.press p.eyebrow + h2{margin-top:0}


/* the quiet aside under the signup form */
.signup__aside{
  /* People miss the confirmation email, so this has to be seen rather than
     noticed. A rule and a tint, not a whispered aside. */
  margin:1.1rem 0 0;
  max-width:46ch;
  padding:.85rem 1rem;
  border-left:3px solid var(--gold);
  background:rgba(226,183,109,.10);
  border-radius:2px;
  font-family:var(--body);
  font-style:normal;
  font-weight:300;
  font-size:.95rem;
  line-height:1.6;
  color:rgba(243,235,217,.9);
}
.signup__aside strong{color:var(--gold);font-weight:400}


/* ---------------------------------------------------------------------------
   THE BOOK, STILL WRAPPED

   The cover lies underneath from the start. Only the paper changes: sealed,
   then a corner gone, then torn away entirely. The last of those is the only
   one the reader can act on, so a pull is never refused.
   ------------------------------------------------------------------------ */
.unwrap{
  position:relative;
  width:62%;
  margin-inline:auto;
  aspect-ratio:574/842;
}
.work__art--bare .unwrap img{width:100%;display:block}

.unwrap__lining{
  position:absolute;
  inset:8% 10% 14% 13%;
  background:#0d1812;
  border-radius:3px;
}
.unwrap__cover{
  position:absolute;
  inset:8% 10% 14% 13%;
  border-radius:3px;
  overflow:hidden;
  transform:scale(.99);
  /* no shadow while it is still wrapped — a covered book casts nothing */
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform 900ms cubic-bezier(.2,.9,.25,1) 220ms,
             box-shadow 700ms ease 420ms;
}
.unwrap.is-open .unwrap__cover{
  transform:none;
  box-shadow:0 18px 40px rgba(0,0,0,.34);
}

.unwrap__paper{
  position:absolute; inset:0;
  padding:0; margin:0; border:0; background:none;
}
button.unwrap__paper{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.unwrap__paper:focus-visible{outline:2px solid var(--gold,#e2b76d);outline-offset:8px;border-radius:3px}
.unwrap__paper--still{pointer-events:none}

/* the paper itself, whole */
.unwrap__whole{
  position:absolute; inset:0;
  background-image:var(--kt-parcel);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* STAGE 2 — a corner has gone. The paper is cut back along a ragged
   diagonal, and the piece that came away hangs from what is left of it. */
.unwrap--stage2 .unwrap__whole{
  clip-path:polygon(0 0, 58% 0, 63% 8%, 74% 13%, 77% 24%, 88% 29%,
                    92% 39%, 100% 46%, 100% 100%, 0 100%);
}
/* the piece that came away, still hanging by the corner it tore from */
.unwrap__flap{
  position:absolute;
  top:-7%; right:-16%;
  width:44%; height:42%;
  background-image:var(--kt-parcel);
  background-size:250% 260%;
  background-position:right top;
  clip-path:polygon(0 0, 100% 0, 100% 34%, 18% 100%);
  transform:rotate(27deg);
  transform-origin:4% 96%;
  filter:drop-shadow(-5px 7px 12px rgba(0,0,0,.32));
}

/* STAGE 3 — two halves with a torn edge between them, which pull apart */
.unwrap__half{
  position:absolute; top:0; bottom:0; left:0; right:0;
  background-image:var(--kt-parcel);
  background-size:100% 100%;
  background-repeat:no-repeat;
  transform-origin:50% 50%;
  transition:transform 1100ms cubic-bezier(.32,.86,.28,1), opacity 900ms ease 180ms, filter 200ms ease;
}
.unwrap__half--l{
  clip-path:polygon(0 0, 54% 0, 47% 7%, 53% 14%, 46% 22%, 52% 30%, 45% 37%,
                    51% 45%, 45% 53%, 52% 61%, 46% 69%, 53% 77%, 47% 85%,
                    52% 93%, 48% 100%, 0 100%);
}
/* the right half still missing the corner that came away at stage 2 */
.unwrap__half--r{
  clip-path:polygon(54% 0, 58% 0, 63% 8%, 74% 13%, 77% 24%, 88% 29%,
                    92% 39%, 100% 46%, 100% 100%, 48% 100%, 52% 93%, 47% 85%,
                    53% 77%, 46% 69%, 52% 61%, 45% 53%, 51% 45%, 45% 37%,
                    52% 30%, 46% 22%, 53% 14%, 47% 7%);
}
.unwrap.is-open .unwrap__half{filter:drop-shadow(0 12px 24px rgba(0,0,0,.3))}
.unwrap.is-open .unwrap__half--l{transform:translate3d(-62%,4%,0) rotate(-13deg);opacity:0}
.unwrap.is-open .unwrap__half--r{transform:translate3d(62%,5%,0) rotate(14deg);opacity:0}

/* a few scraps that fly off as it goes */
.unwrap__shreds{position:absolute;inset:0;pointer-events:none}
.unwrap__shreds i{
  position:absolute;
  width:.55rem;height:.85rem;
  background:#e8dcc2;
  border-radius:1px;
  opacity:0;
}
.unwrap.is-open .unwrap__shreds i{animation:kt-shred 1150ms cubic-bezier(.3,.8,.3,1) forwards}
@keyframes kt-shred{
  0%   {opacity:.9; transform:translate3d(0,0,0) rotate(0)}
  100% {opacity:0;  transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot))}
}

.unwrap__hint{
  position:absolute;
  left:50%; bottom:-2.4rem;
  transform:translateX(-50%);
  font-family:var(--display,"Fraunces",Georgia,serif);
  font-style:italic;
  font-size:clamp(.92rem,1.5vw,1.04rem);
  color:var(--gold,#e2b76d);
  white-space:nowrap;
  pointer-events:none;
  transition:opacity 420ms ease;
}
/* before it can be opened the note is quieter — it is a remark, not an offer */
.unwrap--stage1 .unwrap__hint,
.unwrap--stage2 .unwrap__hint{color:rgba(243,235,217,.55)}
.unwrap.is-open .unwrap__hint{opacity:0}

.work__body{transition:opacity 380ms ease}
.work__body.is-turning{opacity:0}

@media (max-width:900px){
  .unwrap{width:72%}
  .unwrap__hint{bottom:-2.1rem}
}
@media (prefers-reduced-motion:reduce){
  .unwrap__cover,.unwrap__half,.unwrap__hint,.work__title{transition-duration:1ms}
  .unwrap.is-open .unwrap__shreds i{animation:none}
}


/* ---------------------------------------------------------------------------
   ECHO'S EDGE — THE VILLAGE

   The drawing sits inside the page at whatever width there is; the places
   that can be walked into are boxes laid over it in percentages, so they
   hold their positions as it scales.
   ------------------------------------------------------------------------ */
.village{
  background:var(--forest);
  color:var(--cream);
  padding:clamp(2.4rem,6vw,4.5rem) var(--gutter) clamp(3rem,7vw,5rem);
}
.village__title{color:var(--cream)}

.village__intro{text-align:center;max-width:64ch;margin-inline:auto}
.village__title{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:400;
  font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1.05;
  margin:0 0 .6rem;
}
.village__blurb{
  margin:0;
  text-wrap:balance;
  font-size:clamp(1rem,2.2vw,1.18rem);
  line-height:1.6;
  color:rgba(243,235,217,.82);
}
.village__note{
  margin:1.1rem 0 0;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1rem,2.3vw,1.22rem);
  color:var(--gold);
}

.village__scene{
  position:relative;
  margin:clamp(1.6rem,4vw,2.6rem) auto 0;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.village__art{display:block;width:100%;height:auto}

.village__place{
  position:absolute;
  display:block;
  border-radius:8px;
  text-decoration:none;
  transition:transform 260ms ease;
  -webkit-tap-highlight-color:transparent;
}
.village__place::after{
  content:"";
  position:absolute;inset:-6% -4%;
  background:radial-gradient(60% 55% at 50% 55%, rgba(226,183,109,.34), rgba(226,183,109,0) 70%);
  opacity:0;transition:opacity 260ms ease;pointer-events:none;
}
a.village__place:hover,a.village__place:focus-visible{transform:translateY(-4px) scale(1.012)}
a.village__place:hover::after,a.village__place:focus-visible::after{opacity:1}
a.village__place:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
/* a place whose week has come but which has nowhere to go yet */
.village__place--waiting{cursor:default}

.village__tag{
  position:absolute;
  left:50%;bottom:-2.4rem;
  transform:translateX(-50%) translateY(6px);
  white-space:nowrap;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(.95rem,1.6vw,1.1rem);
  color:var(--cream);
  background:rgba(18,33,26,.88);
  border:1px solid rgba(226,183,109,.45);
  padding:.35rem .8rem;
  border-radius:3px;
  opacity:0;
  transition:opacity 220ms ease, transform 220ms ease;
  pointer-events:none;
}
a.village__place:hover .village__tag,
a.village__place:focus-visible .village__tag{opacity:1;transform:translateX(-50%) translateY(0)}

.village__foot{
  margin-top:clamp(1.6rem,4vw,2.6rem);
  text-align:center;
}
.village__foot p{
  margin:0 auto;
  max-width:52ch;
  font-size:.98rem;
  line-height:1.7;
  color:rgba(243,235,217,.6);
}

@media (max-width:640px){
  .village__tag{bottom:-2rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .village__place,.village__tag{transition-duration:1ms}
}

/* On a small screen the drawing is too small to aim at, so the places that
   can be entered are listed underneath instead. */
.village__ways{display:none;margin-top:1.6rem;text-align:center}
.village__ways-label{
  margin:0 0 .6rem;
  font-family:var(--display);font-style:italic;
  color:rgba(243,235,217,.55);
  font-size:.95rem;
}
.village__ways ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.village__ways a{
  display:block;
  padding:.5rem 1rem;
  border:1px solid rgba(226,183,109,.45);
  border-radius:3px;
  color:var(--cream);
  text-decoration:none;
  font-family:var(--display);font-style:italic;
  font-size:1rem;
}
.village__ways a:hover,.village__ways a:focus-visible{border-color:var(--gold);color:var(--gold)}
@media (max-width:760px){
  .village__ways{display:block}
  .village__tag{display:none}
}

/* The well does not take you anywhere. It hums, and you choose whether to
   hear it. The label carries a speaker, so it is plain before you press. */
.village__place--sound{border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.village__place--sound:hover,.village__place--sound:focus-visible{transform:translateY(-4px) scale(1.012)}
.village__place--sound:hover::after,.village__place--sound:focus-visible::after{opacity:1}
.village__place--sound:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.village__place--sound:hover .village__tag,
.village__place--sound:focus-visible .village__tag,
.village__place--sound[aria-pressed="true"] .village__tag{opacity:1;transform:translateX(-50%) translateY(0)}

.village__tag{display:flex;align-items:center;gap:.45rem}
.village__speaker svg{width:1rem;height:1rem;display:block}
.village__place--sound .off{display:inline}
.village__place--sound .on{display:none}
.village__place--sound[aria-pressed="true"] .off{display:none}
.village__place--sound[aria-pressed="true"] .on{display:inline}
.village__place--sound[aria-pressed="true"] .village__speaker .off{display:none}
.village__place--sound[aria-pressed="false"] .village__speaker .on{display:none}
.village__place--sound[aria-pressed="true"] .village__tag{border-color:var(--gold);color:var(--gold)}


/* ---------------------------------------------------------------------------
   THE INSIDES OF THE VILLAGE

   Five places you can walk into. They share a head, a stage and a note; the
   market, the shop and the wall each add what only they need. Taken straight
   from the approved drawings, so the live pages match them.
   ------------------------------------------------------------------------ */
.room{padding:clamp(1rem,2.4vw,1.8rem) 0 clamp(2rem,5vw,3.5rem)}
.room__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.room__title{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);margin:0}
.room__back{color:var(--gold);text-decoration:none;font-family:var(--display);font-style:italic}
.room__back:hover{text-decoration:underline}
.room__lead{margin:0 auto .8rem;color:rgba(243,235,217,.72);line-height:1.55;font-size:1.02rem}

.room__stage{position:relative;border-radius:2px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.room__art{display:block;width:100%;height:auto}

.kt-look{cursor:pointer}
.kt-look:focus{outline:none}
.kt-look.kt-hidden{display:none}
/* the things you can look at lift a little when the cursor is over them */
/* Things with artwork of their own glow when hovered. Things that are only
   an invisible patch of wall do not: a tinted box around them looked worse
   than nothing, so the cursor and the note carry it instead. */
.kt-look:hover{filter:drop-shadow(0 0 16px rgba(226,183,109,.75))}
.kt-look.is-on{filter:drop-shadow(0 0 22px rgba(226,183,109,.95))}

/* the hanging draws aside, it does not vanish */
#kt-hanging,#kt-hang-hit{transform-box:fill-box;transform-origin:100% 50%;
  transition:transform 1100ms cubic-bezier(.32,.84,.3,1)}
.is-pulled #kt-hanging{transform:scaleX(.2) skewY(-1.4deg)}
/* its target gathers with it, so the doorway behind can be reached */
.is-pulled #kt-hang-hit{transform:scaleX(.2)}

.room__said{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(12px);
  width:min(46ch,84%);background:rgba(18,33,26,.94);border:1px solid rgba(226,183,109,.45);
  border-radius:3px;padding:1rem 1.2rem;opacity:0;pointer-events:none;
  transition:opacity 300ms ease,transform 300ms ease}
.room__said.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.room__said h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.15rem;margin:0 0 .35rem;color:var(--gold)}
.room__said p{margin:0;font-size:1rem;line-height:1.6;color:rgba(243,235,217,.9)}
.room__foot{margin-top:1rem;text-align:center;color:rgba(243,235,217,.55);font-size:.98rem;line-height:1.7}
@media (prefers-reduced-motion:reduce){#kt-hanging,.room__said{transition-duration:1ms}}

/* ---- the market: a row you walk along ---- */
.market{padding:clamp(1.6rem,4vw,3rem) 0 clamp(2rem,5vw,3.5rem)}
.market__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.market__title{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);margin:0}
.market__back{color:var(--gold);text-decoration:none;font-family:var(--display);font-style:italic}
.market__back:hover{text-decoration:underline}
.market__stage{position:relative;border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.4);overflow:hidden}
.market__rail{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.market__rail::-webkit-scrollbar{display:none}
.market__art{display:block;height:min(66vh,620px);width:auto;max-width:none}
.market__step{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:999px;
  background:rgba(18,33,26,.82);border:1px solid rgba(226,183,109,.45);color:var(--cream);cursor:pointer;
  display:grid;place-items:center;transition:opacity 220ms ease,border-color 220ms ease}
.market__step:hover{border-color:var(--gold);color:var(--gold)}
.market__step--back{left:.9rem}.market__step--on{right:.9rem}
.market__step[hidden]{display:none}.market__step svg{width:1.3rem;height:1.3rem}
.market__sound{position:absolute;right:.9rem;top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(18,33,26,.86);border:1px solid rgba(226,183,109,.45);color:var(--cream);border-radius:999px;
  padding:.5rem .95rem;cursor:pointer;font-family:var(--display);font-style:italic;font-size:.95rem}
.market__sound:hover{border-color:var(--gold);color:var(--gold)}
.market__sound svg{width:1.05rem;height:1.05rem;flex:none}
.market__sound .off{display:none}
.market__sound[aria-pressed="false"] .on{display:none}
.market__sound[aria-pressed="false"] .off{display:inline}
.kt-pick{cursor:pointer;transform-box:fill-box;transform-origin:50% 90%;
  transition:transform 380ms cubic-bezier(.2,.9,.25,1),filter 380ms ease}
.kt-pick:hover{transform:translateY(-16px) scale(1.07);filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.kt-pick:focus{outline:none}
.kt-pick.is-held{transform:translateY(-58px) scale(1.5);filter:drop-shadow(0 30px 28px rgba(0,0,0,.45))}
.market__said{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(12px);
  width:min(44ch,84%);background:rgba(18,33,26,.94);border:1px solid rgba(226,183,109,.45);border-radius:3px;
  padding:1rem 1.2rem;opacity:0;pointer-events:none;transition:opacity 300ms ease,transform 300ms ease}
.market__said.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.market__said h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.15rem;margin:0 0 .35rem;color:var(--gold)}
.market__said p{margin:0;font-size:1rem;line-height:1.6;color:rgba(243,235,217,.9)}
.market__said small{display:block;margin-top:.6rem;font-size:.85rem;color:rgba(243,235,217,.5)}
.market__foot{margin-top:1.2rem;text-align:center;color:rgba(243,235,217,.6);font-size:.98rem;line-height:1.7}
@media (prefers-reduced-motion:reduce){.kt-pick,.market__said,.market__rail{transition-duration:1ms;scroll-behavior:auto}}

/* ---- the shop: shelves that move, and a note that follows you down ---- */
.shop{padding:clamp(1rem,2.4vw,1.8rem) 0 clamp(2rem,5vw,3.5rem)}
.shop .room__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.shop .room__title{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);margin:0}
.shop .room__back{color:var(--gold);text-decoration:none;font-family:var(--display);font-style:italic}
.shop .room__back:hover{text-decoration:underline}
.shop .room__lead{margin:0 auto .8rem;color:rgba(243,235,217,.72);line-height:1.55;font-size:1.02rem}
.shop .room__stage{position:relative;border-radius:2px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.shop .room__art{display:block;width:100%;height:auto}

/* a section of shelving slides aside when you ask it to */
.kt-bay{cursor:pointer;transform-box:view-box;
  transition:transform 900ms cubic-bezier(.3,.84,.3,1)}
.kt-bay.is-lifted .kt-bay__slide{filter:drop-shadow(0 0 22px rgba(226,183,109,.9))}
.kt-bay:focus{outline:none}
.kt-bay__slide{transform-box:fill-box;transform-origin:50% 50%;
  transition:transform 1000ms cubic-bezier(.3,.85,.3,1)}
.kt-bay.is-open .kt-bay__slide{transform:translateX(-26%) translateY(-2%) rotate(-1.2deg)}
.kt-bay:hover .kt-bay__slide{transform:translateY(-6px)}
.kt-bay.is-open:hover .kt-bay__slide{transform:translateX(-26%) translateY(-2%) rotate(-1.2deg)}

/* what the shelf holds out to you */
.kt-offer{opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(26px) scale(.9);
  transition:opacity 420ms ease 420ms, transform 620ms cubic-bezier(.2,.9,.25,1) 420ms}
.kt-bay.is-open .kt-offer{opacity:1;transform:none}

.shop .kt-mark{cursor:grab}
.shop .kt-mark:focus{outline:none}
.shop .kt-mark.is-held{cursor:grabbing;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.shop .kt-look{cursor:pointer}
.shop .kt-look:focus{outline:none}
.shop .kt-look:hover,.kt-mark:hover{filter:drop-shadow(0 0 14px rgba(226,183,109,.8))}

.shop .room__saidbar{position:sticky;
  /* below the masthead, whatever height it turns out to be, and never
     less than a comfortable clearance */
  top:max(5.6rem, calc(var(--kt-mast, 3.5rem) + 1rem));
  z-index:5;padding:.9rem 0 .7rem;
  background:linear-gradient(rgba(18,33,26,.97),rgba(18,33,26,.88));
  backdrop-filter:blur(6px)}
.shop .room__said{
  /* the other rooms pin their note over the picture; this one sits above it,
     so the shared rules have to be undone here */
  position:static;left:auto;bottom:auto;transform:none;width:auto;pointer-events:auto;
  min-height:4.6rem;
  background:rgba(243,235,217,.05);border:1px solid rgba(226,183,109,.3);
  border-left:3px solid rgba(226,183,109,.6);
  border-radius:3px;padding:.7rem 1.1rem;
  opacity:.45;transition:opacity 280ms ease,background 280ms ease}
.shop .room__said.is-on{opacity:1;background:rgba(18,33,26,.96);border-color:rgba(226,183,109,.55)}
.shop .room__said h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.12rem;margin:0 0 .2rem;color:var(--gold)}
.shop .room__said p{margin:0;font-size:1.02rem;line-height:1.55;color:rgba(243,235,217,.9)}
.shop .room__how{color:rgba(243,235,217,.5);font-size:.95rem}
.shop .room__more{margin:.1rem auto .2rem;font-family:var(--display);font-style:italic;
  color:var(--gold);font-size:1rem;transition:opacity 600ms ease}
.shop .room__more.is-done{opacity:0}
@media (prefers-reduced-motion:reduce){.kt-bay__slide,.kt-offer,.room__said{transition-duration:1ms}}

/* ---- the wall: somewhere to put a mural of your own ---- */
.wall{padding:clamp(1rem,2.4vw,1.8rem) 0 clamp(2rem,5vw,3.5rem)}
.wall__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.wall__title{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);margin:0}
.wall__back{color:var(--gold);text-decoration:none;font-family:var(--display);font-style:italic}
.wall__back:hover{text-decoration:underline}
.wall__lead{margin:0 auto .8rem;color:rgba(243,235,217,.72);max-width:none;line-height:1.55;font-size:1.02rem}

.wall__stage{position:relative;border-radius:2px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);cursor:crosshair}
.wall__art{display:block;width:100%;height:auto;touch-action:manipulation}
.wall__stage.is-dragging{cursor:grabbing}

.tray{margin-top:.85rem;display:grid;gap:.7rem}
.tray__row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tray__label{font-family:var(--display);font-style:italic;color:rgba(243,235,217,.55);
  font-size:.92rem;min-width:5.4rem}
.chip{background:rgba(243,235,217,.06);border:1px solid rgba(226,183,109,.3);border-radius:4px;
  padding:.4rem;cursor:pointer;line-height:0;transition:border-color 160ms ease,background 160ms ease}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{border-color:var(--gold);background:rgba(226,183,109,.16)}
.chip svg{width:2.1rem;height:2.1rem;display:block}
.swatch{width:1.9rem;height:1.9rem;border-radius:999px;border:2px solid rgba(243,235,217,.25);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{border-color:var(--cream);transform:scale(1.14)}
.turn{flex:1;min-width:10rem;max-width:22rem;accent-color:var(--gold)}
output[data-turn-out]{font-family:var(--display);font-style:italic;color:rgba(243,235,217,.55);min-width:3rem}
.size{background:none;border:1px solid rgba(226,183,109,.3);color:var(--cream);border-radius:999px;
  padding:.32rem .8rem;cursor:pointer;font-family:var(--display);font-style:italic;font-size:.9rem}
.size[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.doing{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.doing button{background:none;border:1px solid rgba(226,183,109,.35);color:var(--cream);border-radius:999px;
  padding:.45rem 1rem;cursor:pointer;font-family:var(--display);font-style:italic;font-size:.95rem}
.doing button:hover{border-color:var(--gold);color:var(--gold)}
.doing .keep{border-color:var(--gold);color:var(--gold)}
.wall__note{margin-top:1rem;color:rgba(243,235,217,.5);font-size:.95rem;line-height:1.7}
.wall__ask{margin:.7rem 0 0;font-family:var(--display);font-style:italic;color:var(--gold);
  font-size:1.02rem;line-height:1.6;max-width:62ch}
.wall__ask a{color:var(--gold)}
@media (max-width:720px){.tray__label{min-width:100%}.doing{margin-left:0;width:100%}}

/* the inside pages carry the forest ground, like the village does, and they
   start below the masthead, which is fixed to the top of every page */
.room,.wall{
  background:var(--forest);color:var(--cream);
  padding-top:calc(var(--frame) + 4.8rem);
}
.room .wrap,.wall .wrap{max-width:76rem}


/* What replaces the form once somebody has signed up. It has to carry the
   one instruction that matters, so it is given the weight the form had. */
.signup__done{
  margin:1.4rem 0 0;
  max-width:46ch;
  padding:1.1rem 1.2rem;
  border-left:3px solid var(--gold);
  background:rgba(226,183,109,.13);
  border-radius:2px;
  outline:none;
}
.signup__done p{
  margin:0;
  font-size:1rem;
  line-height:1.62;
  color:var(--cream);
}
.signup__note.is-after{margin-top:1rem}