/* Magicians Keep: the basement under the shop (about.html), where Gimbly's old journal lies on his old desk and the
   hedgehog in the gray hat comes to read in peace: who Gimbly is, who comes down here, and a guide to every floor.
   The hedgehog and the journal in the picture come to life in assets/js/hedgehog.js; the journal in assets/js/journal.js. */
.nav .here{opacity:1;text-decoration:underline;text-decoration-color:var(--glow);text-underline-offset:6px}
.chip{display:inline-block;padding:6px 12px;background:rgba(8,8,15,.55);border:1px solid rgba(236,227,207,.22);border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);text-shadow:0 1px 3px rgba(5,5,10,.85)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
[data-reveal].in .label svg path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-out) .2s}

/* ===== The first picture: the basement ===== */
.entry{position:relative;z-index:1;min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);display:grid;align-items:end;padding:calc(var(--nav-h) + 24px) var(--gutter) clamp(44px,9vh,96px);overflow:hidden;isolation:isolate}
.entry picture,.entry picture img{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.entry picture img{object-fit:cover;object-position:72% 50%;max-width:none;animation:stepIn 2.8s var(--ease-out) both}
@keyframes stepIn{from{transform:scale(1.07)}to{transform:none}}
/* shading so the words read: strong on the left where they sit, and only a short fade at the bottom, so the
   candlelit corner with Bramble and his cushion keeps its light */
.entry::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(to top,rgba(14,16,22,.95) 0%,rgba(14,16,22,.45) 13%,rgba(14,16,22,0) 28%),
  linear-gradient(to right,rgba(14,16,22,.86) 0%,rgba(14,16,22,.5) 36%,rgba(14,16,22,0) 60%)}
.entry-copy{position:relative;z-index:2;max-width:640px;text-shadow:var(--tshadow);animation:rise 1.1s var(--ease-out) .25s both}
.entry .chip{margin-bottom:20px}
.entry h1{font-size:clamp(3rem,6.6vw,6.2rem);max-width:11ch}
.entry .sub{margin-top:20px;max-width:40ch;font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.5}
.entry .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* on a phone the picture gets the screen to itself and the words follow below it */
@media (max-width:720px){
  .entry{display:block;min-height:0;padding:0 0 clamp(36px,8vw,56px)}
  .entry picture{position:relative;display:block;height:min(74svh,620px)}
  /* a slice of the computer painting: the desk with the journal, and Bramble on his cushion */
  .entry picture img{position:absolute;inset:0}
  html body .entry picture img{object-position:88% 50%}
  .entry::before{bottom:auto;height:min(74svh,620px);background:linear-gradient(to top,rgba(23,27,36,1) 0%,rgba(23,27,36,.55) 16%,rgba(14,16,22,0) 34%)}
  .entry-copy{margin-top:-44px;padding:0 var(--gutter)}
}

/* ===== The hedgehog on his cushion =====
   One picture of him, shown twice: the body, and the floppy tip of his hat, so the tip can wobble on its own.
   Press him and he hops, the tip wobbles, and he says something (assets/js/hedgehog.js). */
.hog-layer{position:absolute;z-index:-3;pointer-events:none;animation:stepIn 2.8s var(--ease-out) both}
.entry::before{pointer-events:none}
/* Gimbly's old journal, painted on the desk: a soft glint now and then gives it away */
.jr-spot{position:absolute;padding:0;border:0;border-radius:10px;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.jr-spot::before{content:"";position:absolute;inset:-25% -12%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,226,170,.5),rgba(227,168,90,.18) 50%,rgba(227,168,90,0));opacity:0;animation:hogGlint 12s ease-in-out 10s infinite}
.jr-spot:hover::before,.jr-spot:focus-visible::before{animation:none;opacity:.75;transition:opacity .3s}
.jr-spot:focus-visible{outline:2px solid rgba(227,168,90,.9);outline-offset:3px}
.hog{position:absolute;padding:0;pointer-events:auto;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hog:focus-visible{outline:none}
/* he is small, so the spot you can press reaches a little around him */
.hog::after{content:"";position:absolute;left:-60%;right:-60%;top:-25%;bottom:-12%}
/* a soft glow behind him now and then, so visitors know he can be pressed */
.hog::before{content:"";position:absolute;left:-30%;right:-30%;top:-8%;bottom:-12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,214,150,.42),rgba(227,168,90,.14) 55%,rgba(227,168,90,0));opacity:0;animation:hogGlint 12s ease-in-out 4s infinite}
.hog:hover::before,.hog:focus-visible::before{animation:none;opacity:.8;transition:opacity .35s}
@keyframes hogGlint{0%,84%,100%{opacity:0}91%{opacity:.7}}
.hog-shadow{position:absolute;left:14%;right:12%;bottom:-2.5%;height:8%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(12,6,18,.6),rgba(12,6,18,0))}
.hog-lift,.hog-fig{position:absolute;inset:0;transform-origin:50% 100%}
/* the candle on the desk lights him a little, so he does not sink into the dark corner */
.hog-fig{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,190,110,.22))}
.hog:hover .hog-lift{transform:translateY(-1.5%)}
.hog-lift{transition:transform .35s var(--ease-out)}
/* he breathes, very slowly */
.hog-fig{animation:hogBreathe 4.6s ease-in-out infinite}
@keyframes hogBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.018)}}
.hog img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hog .body{clip-path:polygon(0 0,65.2% 0,80.4% 20.1%,80.4% 32.7%,100% 32.7%,100% 100%,0 100%)}
.hog .tip{clip-path:polygon(64.6% 0,100% 0,100% 33.3%,79.8% 33.3%,79.8% 20.1%);transform-origin:76.4% 15.3%;animation:tipSway 9s ease-in-out 2s infinite}
/* the top of his hat sways on its own now and then */
@keyframes tipSway{0%,78%,100%{transform:rotate(0)}84%{transform:rotate(-3deg)}90%{transform:rotate(2deg)}95%{transform:rotate(-.8deg)}}
/* what he says: a scrap of parchment above his head */
.hog-say{position:absolute;z-index:3;max-width:min(280px,calc(100vw - 32px));padding:12px 16px 13px;border-radius:14px;pointer-events:none;
  color:#2a211a;font-size:1.05rem;line-height:1.45;text-shadow:none;
  background:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.45),transparent 60%),#ecdfc2;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(90,60,30,.25);
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:var(--tail,50%) 100%;transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.hog-say.show{opacity:1;transform:none}
.hog-say::after{content:"";position:absolute;left:var(--tail,50%);bottom:-9px;width:18px;height:10px;margin-left:-9px;background:#ecdfc2;clip-path:polygon(0 0,100% 0,50% 100%)}
.hog-say b{display:block;margin-bottom:2px;font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7a5a30}
@media (prefers-reduced-motion: reduce){.hog-fig,.hog .tip,.hog::before,.hog-layer,.jr-spot::before{animation:none}}

/* ===== I. The legend ===== */
.sec-legend{background:linear-gradient(to bottom,transparent,rgba(28,33,48,.5) 18%,rgba(28,33,48,.5) 82%,transparent)}
.legend{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,88px);align-items:start;margin-top:clamp(40px,6vw,64px)}
/* the portrait of Gimbly, in its gilded frame */
.frame{position:relative;margin:0;padding:14px;border-radius:6px;background:linear-gradient(135deg,#7a5524,#e3b46a 22%,#8a5e27 46%,#d9a95f 70%,#6e4a1d);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,230,170,.35)}
.frame img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.frame::after{content:"";position:absolute;inset:14px;border-radius:2px;pointer-events:none;background:radial-gradient(55% 45% at 50% 35%,rgba(255,210,140,.18),transparent 70%)}
.frame figcaption{margin-top:14px;text-align:center;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#3a2410}
.tale p{font-size:clamp(1.12rem,1.4vw,1.26rem);line-height:1.7;max-width:58ch}
.tale p + p{margin-top:1.1em}
.tale p:first-child::first-letter{float:left;margin:.08em .12em 0 0;font-family:var(--f-display);font-size:3.6em;line-height:.8;color:var(--glow)}
.saying{margin:clamp(30px,4vw,44px) 0 0;padding:22px 26px;border-left:2px solid var(--glow);background:rgba(227,168,90,.06);border-radius:0 12px 12px 0;max-width:56ch}
.saying p{font-family:var(--f-display);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.3}
.saying cite{display:block;margin-top:10px;font-style:normal;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;color:var(--text-secondary)}
/* the spots where the real Gimbly fills in his own details */
.hog-plush a{color:var(--glow);text-decoration:underline;text-decoration-color:rgba(227,168,90,.45);text-underline-offset:4px;font-style:italic}
.hog-plush a:hover{color:#f3d9a8}
.hog-plush a::after{content:" ›"}
.fill{padding:.05em .45em;border-radius:6px;border:1px dashed rgba(227,168,90,.7);background:rgba(227,168,90,.1);color:#f3d9a8;font-style:italic}
.fill::before{content:"fill in: ";font-family:var(--f-mono);font-style:normal;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--glow)}
@media (max-width:900px){.legend{grid-template-columns:1fr}.frame{max-width:360px}}

/* ===== II. Who comes down here ===== */
.hog-story{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,72px);align-items:start;margin-top:clamp(30px,4vw,44px)}
/* a note in the occupant's own small hand, with him peeking over the top */
.note-wrap{position:relative;margin:0;padding-top:86px}
/* he stands behind the paper, so only his hat, eyes and nose show over the top edge */
.peek{position:absolute;left:50%;top:0;z-index:0;width:96px;height:auto;margin-left:-48px;transform:rotate(-4deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.note{position:relative;z-index:1;padding:30px 26px 22px;border-radius:4px;color:#2a211a;transform:rotate(1.2deg);
  background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.45),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(120,90,50,.25),transparent 70%),#ecdfc2;
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 40px rgba(120,90,50,.2)}
.note p{font-size:1.1rem;line-height:1.5}
.note .note-h{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#7a5a30;margin-bottom:8px}
.note .note-by{margin-top:10px;text-align:right;font-family:var(--f-display);font-size:1.4rem;color:#7a1f18}
@media (max-width:900px){.hog-story{grid-template-columns:1fr}.note-wrap{max-width:420px}}

/* ===== III. A guide to the tower ===== */
.tower{position:relative;list-style:none;margin:clamp(40px,6vw,64px) 0 0;padding:0 0 0 clamp(56px,7vw,84px)}
.tower::before{content:"";position:absolute;left:clamp(22px,2.6vw,30px);top:20px;bottom:20px;width:2px;background:linear-gradient(to bottom,rgba(227,168,90,.6),rgba(227,168,90,.25) 50%,rgba(95,211,196,.35))}
.floor{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center;padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid var(--line)}
.floor:last-child{border-bottom:1px solid var(--line)}
.floor::before{content:"";position:absolute;left:calc(-1 * clamp(56px,7vw,84px) + clamp(22px,2.6vw,30px) - 7px);top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#171b24;border:2px solid var(--glow);box-shadow:0 0 0 4px rgba(23,27,36,.9)}
.floor .lvl{grid-column:1 / -1;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--glow)}
.floor h3{font-size:clamp(1.9rem,3vw,2.5rem)}
.floor p{grid-column:1;color:var(--text-secondary);max-width:54ch}
.floor .btn{grid-column:2;grid-row:2 / span 2;white-space:nowrap}
.floor.here{border-top-color:rgba(95,211,196,.4);background:linear-gradient(to right,rgba(95,211,196,.08),transparent 70%)}
.floor.here::before{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 4px rgba(23,27,36,.9),0 0 18px rgba(95,211,196,.8);animation:here 2.4s ease-in-out infinite}
.floor.here .lvl{color:var(--teal)}
.you{display:inline-block;margin-left:10px;padding:.15em .6em;border-radius:999px;border:1px solid rgba(95,211,196,.55);font-size:.72rem;letter-spacing:.08em;color:var(--teal)}
@keyframes here{0%,100%{box-shadow:0 0 0 4px rgba(23,27,36,.9),0 0 10px rgba(95,211,196,.5)}50%{box-shadow:0 0 0 4px rgba(23,27,36,.9),0 0 22px rgba(95,211,196,.95)}}
.secret{margin-top:26px;font-style:italic;color:var(--text-secondary)}
@media (max-width:720px){
  .floor{grid-template-columns:1fr}
  .floor .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
}

/* ===== IV. Rules of the Keep: a notice by the door ===== */
.notice{position:relative;max-width:680px;margin:clamp(40px,6vw,64px) auto 0;padding:clamp(40px,5vw,56px) clamp(26px,5vw,56px) clamp(32px,4vw,44px);color:#2a211a;border-radius:4px;
  background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.45),transparent 60%),radial-gradient(90% 60% at 90% 100%,rgba(120,90,50,.25),transparent 70%),#ecdfc2;
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 60px rgba(120,90,50,.22);transform:rotate(-.6deg)}
.notice .pin{position:absolute;left:50%;top:-20px;width:46px;height:46px;margin-left:-23px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))}
.notice h3{text-align:center;font-family:var(--f-display);font-size:clamp(2.1rem,3.4vw,2.8rem);color:#3a2410}
.notice ol{margin:22px 0 0;padding:0;list-style:none;counter-reset:rule}
.notice li{counter-increment:rule;display:grid;grid-template-columns:42px 1fr;gap:6px;padding:12px 0;border-bottom:1px dashed rgba(90,60,30,.35);font-size:1.12rem;line-height:1.5}
.notice li:last-child{border-bottom:0}
.notice li::before{content:counter(rule,upper-roman) ".";font-family:var(--f-display);font-size:1.3rem;color:#8a2a1f}
.notice a,.notice .linkish{color:#7a1f18;text-decoration:underline;text-decoration-color:rgba(122,31,24,.45);text-underline-offset:3px}
.notice .linkish{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.notice .sign{margin-top:18px;text-align:right;font-family:var(--f-display);font-size:1.5rem;color:#7a1f18}

/* ===== V. Look around ===== */
.sec-onward{padding-top:clamp(40px,6vw,72px);text-align:center}
.sec-onward h2{margin-left:auto;margin-right:auto}
.sec-onward .lede{margin-left:auto;margin-right:auto}
.sec-onward .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* Reduced motion: final states, nothing moves */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal] .rv{opacity:1;transform:none}
  .hog-say{transition:opacity .2s!important}
}