/* Barkley’s Morning: one continuous walk up Harper Monkey Trail. */

@font-face{font-family:Bricolage;src:url('assets/fonts/bricolage-grotesque-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Bricolage;src:url('assets/fonts/bricolage-grotesque-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  color-scheme:light;
  --sky:#a9dde2;
  --sky-deep:#79c6d3;
  --ink:#153a2f;
  --ink-soft:#3c5a4e;
  --paper:#fffaf0;
  --paper-edge:#efe4cb;
  --tennis:#e2ef7e;
  --poppy:#e9731f;
  --rust:#a8441a;
  --earth:#d59a6e;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(16px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--sky);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sky);color:var(--ink);font:400 1rem/1.5 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,p,ul,ol{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{width:1em;height:1em;fill:currentColor;flex:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px rgba(255,250,240,.9);border-radius:6px}

.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:12px 16px;background:var(--paper);border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* ---------- the stage: a sticky, layered painting ---------- */

.walk{position:relative;isolation:isolate}
.stage{
  position:sticky;top:0;z-index:-1;height:100vh;height:100lvh;overflow:hidden;container-type:size;
  /* Stand-in sky and hillside, so the page reads before any art arrives. */
  background:linear-gradient(180deg,#9fd9e0 0%,#bfe6e2 38%,#f3e3bb 50%,#a9bf8c 58%,#d7a27a 100%);
}
.scene,.cam{position:absolute;inset:0}
.cam{transform-origin:0 0;will-change:transform}
.plate{
  --pw:max(100cqw,calc(100cqh * var(--ar)));
  --ph:max(100cqh,calc(100cqw / var(--ar)));
  position:absolute;width:var(--pw);height:var(--ph);
  left:calc((100cqw - var(--pw)) * var(--fx));
  top:calc((100cqh - var(--ph)) * var(--fy));
}
.plate>img:not(.cloud),.plate picture,.plate picture img{position:absolute;inset:0;width:100%;height:100%}

.vista .plate{--ar:1.5;--fx:.5;--fy:1}
.climb .plate{--ar:1.5;--fx:.5;--fy:.6}
.summit .plate{--ar:1.5;--fx:.5;--fy:.5}
@media (max-aspect-ratio:1/1){
  .vista .plate{--ar:.6667;--fx:.8}
  .climb .plate{--ar:.6667;--fx:.65;--fy:.5}
  .summit .plate{--ar:.6667;--fx:.5;--fy:.5}
}
.climb,.summit{visibility:hidden}
.js .climb,.js .summit{visibility:visible;opacity:0}

/* Depth: each later scene is sky, land and figures on separate planes. Walking forward scales the land
   around its horizon (near ground moves most, the far city barely), and on desktop the planes shift a
   little with the mouse. */
.plate .layer{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.plate .layer img{position:absolute;inset:0;width:100%;height:100%}
.plate .l-fig img{inset:auto;height:auto;left:var(--fl);top:var(--ft);width:var(--fw)}
.l-sky{transform:translate3d(calc(var(--mx,0) * -4px),calc(var(--my,0) * -3px),0) scale(calc(1.02 + var(--walk,0) * .015))}
.l-land,.l-fig{transform-origin:50% var(--hz,40%);transform:translate3d(calc(var(--mx,0) * -12px),calc(var(--my,0) * -6px),0) scale(calc(1.02 + var(--walk,0) * .07))}
.l-fig{transform:translate3d(calc(var(--mx,0) * -15px),calc(var(--my,0) * -7px),0) scale(calc(1.02 + var(--walk,0) * .07))}
.climb{--hz:39%;--fl:64.45%;--ft:17.48%;--fw:18.88%}
.summit{--hz:17%;--fl:14.71%;--ft:18.95%;--fw:70.06%}
@media (max-aspect-ratio:1/1){
  .climb{--hz:24%;--fl:31.54%;--ft:30.21%;--fw:54.2%}
  .summit{--hz:24%;--fl:.2%;--ft:28.78%;--fw:90.23%}
}

/* The living painting: a looping video of the trailhead without Barkley, with Barkley laid back on top,
   perfectly still. The painting underneath shows until the video is actually playing. */
.living{position:absolute;left:0;top:15.625%;width:100%;height:84.375%;object-fit:fill;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%);mask-image:linear-gradient(180deg,transparent,#000 9%)}
.living.is-playing{opacity:1}
.plate .still-barkley,.plate .still-barkley img{position:absolute;display:block;inset:auto}
.plate .still-barkley{left:57.42%;top:54.88%;width:39.32%;height:auto;visibility:hidden}
.plate .still-barkley img{position:static;width:100%;height:auto}
.living.is-playing + .still-barkley{visibility:visible}
@media (max-aspect-ratio:1/1){
  .living{left:15.625%;top:0;width:84.375%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%);mask-image:linear-gradient(90deg,transparent,#000 9%)}
  .plate .still-barkley{left:46.58%;top:58.46%;width:53.42%}
}

/* clouds cut from the approved painting, drifting behind the name */
.cloud{position:absolute;height:auto;pointer-events:none;will-change:transform}
.cloud-a{left:50%;top:13%;width:31%;opacity:.9}
.cloud-b{left:-4%;top:25%;width:22%;opacity:.7;scale:-1 1}
@media (max-aspect-ratio:1/1){
  .cloud-a{left:30%;top:9%;width:62%;opacity:.8}
  .cloud-b{left:-20%;top:21%;width:48%}
}

/* Barkley has a word with whoever found him */
.bubble{
  position:absolute;left:66.2%;bottom:calc(100% - 57.5%);
  padding:.55em .9em .6em;background:var(--paper);border-radius:1.1em;white-space:nowrap;
  font:600 clamp(14px,1.45cqw,24px)/1.1 Bricolage,sans-serif;letter-spacing:-.01em;color:var(--ink);
  box-shadow:0 10px 24px -14px rgba(40,30,10,.7);transform-origin:8% 130%;
}
.bubble::after{content:"";position:absolute;left:12%;bottom:-.5em;width:1em;height:1em;background:inherit;clip-path:polygon(0 0,100% 0,15% 100%)}
/* little labels in the later scenes, so everyone knows who Jeff is */
.tag{
  position:absolute;left:var(--tx);bottom:calc(100% - var(--ty));translate:-12% 0;
  padding:.45em .8em .5em;background:var(--paper);border-radius:1em;white-space:nowrap;
  font:600 clamp(13px,1.2cqw,20px)/1.1 Bricolage,sans-serif;color:var(--ink);
  box-shadow:0 10px 24px -14px rgba(40,30,10,.7);opacity:0;transition:opacity .5s ease;
}
.tag::after{content:"";position:absolute;left:10%;bottom:-.45em;width:.9em;height:.9em;background:inherit;clip-path:polygon(0 0,100% 0,15% 100%)}
.tag.is-on{opacity:1}
.tag-climb{--tx:74%;--ty:17%}
.tag-summit{--tx:34%;--ty:17%}
@media (max-aspect-ratio:1/1){
  .tag{font-size:clamp(13px,3.6cqw,19px)}
  .tag-climb{--tx:42%;--ty:29%}
  .tag-summit{--tx:24%;--ty:28%}
}
@media (max-aspect-ratio:1/1){
  .bubble{right:auto;left:49.5%;bottom:calc(100% - 58.8%);font-size:clamp(14px,3.9cqw,22px);transform-origin:8% 130%}
  .bubble::after{right:auto;left:14%;clip-path:polygon(0 0,100% 0,15% 100%);border-radius:0 0 0 .2em}
}

/* one red-tailed hawk, far away */
.bird{position:absolute;left:66%;top:21%;width:1.9%;height:auto;fill:#2d3f3a;opacity:.55;overflow:visible}
@media (max-aspect-ratio:1/1){.bird{left:60%;top:30%;width:4.4%}}

.grade{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(180deg,var(--g-top,transparent),var(--g-bottom,transparent) 75%);
  transition:opacity 2.4s cubic-bezier(.4,0,.2,1);
}
.grade:not(.grade-dawn)::after{content:"";position:absolute;inset:0;background:inherit;mix-blend-mode:color;opacity:.32}
.grade-dawn{mix-blend-mode:multiply;opacity:0;background:linear-gradient(180deg,#8f9fd6 0%,#d8a7b8 45%,#e7c2a6 100%)}
.stage.is-waking .grade-dawn{opacity:.85;transition:none}
.stage.is-waking .grade{opacity:0;transition:none}
.sunlight{
  position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 60% 55% at 86% 4%,rgba(255,238,178,.95),rgba(255,226,150,.25) 45%,transparent 70%);
}

.motes{position:absolute;inset:0;pointer-events:none}
.motes i{
  position:absolute;left:var(--x);top:var(--y);width:var(--s,4px);height:var(--s,4px);border-radius:50%;
  background:radial-gradient(circle,#fff8dc 0 35%,rgba(255,232,168,.6) 60%,transparent 72%);opacity:0;
}
.motes i:nth-child(1){--x:62%;--y:44%;--s:5px;--d:17s;--dl:-2s}
.motes i:nth-child(2){--x:71%;--y:30%;--s:3px;--d:21s;--dl:-9s}
.motes i:nth-child(3){--x:80%;--y:52%;--s:4px;--d:15s;--dl:-5s}
.motes i:nth-child(4){--x:55%;--y:60%;--s:3px;--d:23s;--dl:-14s}
.motes i:nth-child(5){--x:88%;--y:38%;--s:6px;--d:19s;--dl:-11s}
.motes i:nth-child(6){--x:66%;--y:66%;--s:4px;--d:16s;--dl:-1s}
.motes i:nth-child(7){--x:93%;--y:62%;--s:3px;--d:22s;--dl:-17s}
.motes i:nth-child(8){--x:47%;--y:50%;--s:4px;--d:20s;--dl:-6s}
.motes i:nth-child(9){--x:76%;--y:72%;--s:5px;--d:18s;--dl:-12s}
.motes i:nth-child(10){--x:84%;--y:22%;--s:3px;--d:24s;--dl:-3s}
.motes i:nth-child(11){--x:40%;--y:70%;--s:3px;--d:21s;--dl:-15s}
.motes i:nth-child(12){--x:58%;--y:36%;--s:4px;--d:19s;--dl:-8s}
.motes i:nth-child(13){--x:97%;--y:48%;--s:4px;--d:17s;--dl:-13s}
.motes i:nth-child(14){--x:70%;--y:80%;--s:3px;--d:22s;--dl:-19s}

/* close poppies we pass on the way up; they sway on their own */
.foreground{position:absolute;inset:0;pointer-events:none;transform-origin:50% 100%}
.fg-plate{position:absolute;left:-1cqw;bottom:-3%;width:max(58cqw,62cqh);aspect-ratio:1.5}
@media (max-aspect-ratio:1/1){.fg-plate{width:max(150cqw,70cqh);left:-8cqw;bottom:-3%}}
@media (max-aspect-ratio:1/1) and (min-width:600px){.fg-plate{width:112cqw;left:-6cqw}}
.poppies{position:absolute;height:auto;transform-origin:50% 100%}
.poppies-left{left:0;top:16.8%;width:52.08%}
.poppies-right{left:42%;top:66.4%;width:58%}

/* ---------- content ---------- */

.hero{
  position:relative;margin-top:-100vh;margin-top:-100lvh;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(10px,2.2vw,30px) var(--gutter) clamp(18px,3vw,36px);
  scroll-margin-top:0;
}
.hero:focus{outline:none}
h1 span{display:inline-block}
h1{
  white-space:nowrap;
  font:800 min(21.2vw,36svh)/.78 Bricolage,Impact,sans-serif;letter-spacing:-.045em;
  margin:0 0 0 -.035em;color:var(--ink);
  text-shadow:0 .012em 0 rgba(255,246,214,.55);
}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,46rem);margin-top:clamp(16px,2.6vw,34px)}
.btn{
  position:relative;display:flex;align-items:center;gap:.8em;min-height:72px;padding:0 1.15em;
  border-radius:24px;text-decoration:none;white-space:nowrap;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.08) inset,0 14px 28px -16px rgba(21,58,47,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .2s;
}
.btn svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;box-sizing:border-box}
.btn-label{display:flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1;min-width:0}
.btn-label b{font:700 1.14rem/1 Bricolage,system-ui,sans-serif;letter-spacing:-.02em}
.btn-label small{font:600 .8rem/1 Manrope,system-ui,sans-serif;opacity:.72;font-variant-numeric:tabular-nums}
.btn-call{background:var(--ink);color:var(--paper)}
.btn-call svg{background:var(--tennis);color:var(--ink)}
.btn-call:hover{background:#0f2d24}
.btn-text{background:var(--tennis);color:var(--ink)}
.btn-text svg{background:var(--ink);color:var(--tennis)}
.btn-where{background:rgba(255,250,240,.94);color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-where svg{background:var(--poppy);color:var(--paper)}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.08) inset,0 20px 32px -16px rgba(21,58,47,.75)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-where[aria-busy="true"]{cursor:progress}
.btn-where[aria-busy="true"] svg{animation:ping 1s ease-in-out infinite}
@keyframes ping{50%{scale:1.15}}

.backup{margin-top:6px;font-size:.95rem}
.backup summary{
  display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:0 8px 0 14px;margin-left:-4px;cursor:pointer;list-style:none;
  font-weight:600;color:var(--ink);background:rgba(255,250,240,.72);border-radius:999px;
}
.backup summary::-webkit-details-marker{display:none}
.backup summary::after{content:"+";display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;border:1.5px solid currentColor;font-size:.85em;line-height:1;text-decoration:none}
.backup[open] summary::after{content:"–"}
.backup ul{list-style:none;padding:14px 18px;margin-top:2px;background:var(--paper);border-radius:18px;box-shadow:0 12px 30px -18px rgba(21,58,47,.6);min-width:min(19rem,100%)}
.backup li{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;padding:7px 0;text-align:left}
.backup li span{color:var(--ink-soft)}
.backup li a{text-align:right}
@media (max-width:480px){.backup li{flex-direction:column;align-items:flex-start}.backup li a{text-align:left}}
.backup li+li{border-top:1px solid var(--paper-edge)}
.backup li a{font-weight:600;text-underline-offset:3px}

/* shared paper card */
.card{
  position:relative;background:var(--paper);border-radius:30px;
  box-shadow:0 0 0 1px rgba(125,95,40,.08),0 30px 60px -30px rgba(60,40,10,.55),0 8px 18px -12px rgba(60,40,10,.35);
}

/* the feed */
.feed{padding:38vh var(--gutter) 0;scroll-margin-top:-30vh}
.feed-card{width:min(100%,33rem);padding:clamp(20px,3vw,32px);margin-left:clamp(0px,4vw,70px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Ask Barkley: the first card after the trailhead. Needs JavaScript; without it, the buttons above are the way. */
.ask-card{width:min(100%,33rem);padding:clamp(20px,3vw,32px);margin:0 0 18px clamp(0px,4vw,70px)}
html:not(.js) .ask-card{display:none}
.ask-title{font:800 clamp(1.7rem,2.6vw,2rem)/1 Bricolage,sans-serif;letter-spacing:-.035em}
.chat{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.chat:empty{display:none}
.msg{max-width:88%;padding:11px 15px 12px;border-radius:20px;font-size:1rem;line-height:1.4;text-wrap:pretty;animation:pop .35s var(--ease) both}
.msg-you{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:6px}
.msg-barkley{align-self:flex-start;background:var(--paper-edge);color:var(--ink);border-bottom-left-radius:6px;font:600 1.08rem/1.35 Bricolage,sans-serif;letter-spacing:-.01em}
.msg-barkley a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}
.msg-barkley a[href^="tel:"]{white-space:nowrap}
.msg-typing{display:flex;gap:5px;align-items:center;padding:15px 16px}
.msg-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);opacity:.35;animation:dot 1.1s ease-in-out infinite}
.msg-typing i:nth-child(2){animation-delay:.15s}.msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{opacity:1;translate:0 -3px}}
@keyframes pop{from{opacity:0;translate:0 6px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips button{font:600 .9rem/1 Manrope,system-ui,sans-serif;color:var(--ink);background:none;border:1.5px solid var(--paper-edge);border-radius:999px;padding:9px 13px;cursor:pointer;transition:background-color .2s,border-color .2s}
.chips button:hover{background:var(--paper-edge);border-color:#e3d6b8}
.ask-form{display:flex;align-items:center;gap:8px;margin-top:14px;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--paper-edge) inset}
.ask-form:focus-within{box-shadow:0 0 0 2px var(--ink) inset}
.ask-form input{flex:1;min-width:0;border:0;background:none;font:400 1rem Manrope,system-ui,sans-serif;color:var(--ink);padding:10px 0;outline:none;box-shadow:none;border-radius:0}
.ask-form input::placeholder{color:var(--ink-soft);opacity:.75}
.ask-form button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer;transition:opacity .2s}
.ask-form button svg{width:18px;height:18px}
.ask-form button:disabled{opacity:.35;cursor:default}
.ask-note{margin-top:12px;font-size:.85rem;color:var(--ink-soft)}
.ask-note a{color:var(--ink);font-weight:600;text-underline-offset:3px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.msg{animation:none}.msg-typing i{animation:none;opacity:.6}}
.profile{display:flex;align-items:center;gap:16px}
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--poppy)}
.profile h2{display:flex;align-items:center;gap:.25em;font:800 2rem/1 Bricolage,sans-serif;letter-spacing:-.035em}
.seal{font-size:.62em;color:var(--poppy)}
.handle{color:var(--ink-soft);font-size:.95rem;margin-top:4px}
.bio{margin-top:16px;font-size:1.02rem}
.stats{margin-top:6px;font-size:.9rem;color:var(--ink-soft)}
.stats strong{color:var(--ink)}
.sep{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;vertical-align:middle;margin:0 .45em;opacity:.6}
.posts{list-style:none;padding:0;margin-top:20px}
.post{padding:20px 0 16px;border-top:1px solid var(--paper-edge)}
.meta{display:flex;align-items:center;gap:10px;font-size:.93rem}
.meta span{color:var(--ink-soft)}
.avatar-sm{width:36px;height:36px;border-radius:50%;object-fit:cover}
.words{margin:12px 0 0;font:600 clamp(1.3rem,2.1vw,1.55rem)/1.24 Bricolage,sans-serif;letter-spacing:-.02em;text-wrap:pretty}
.post:first-child .words{font-size:clamp(1.5rem,2.6vw,1.9rem)}
.reactions{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:.84rem;color:var(--ink-soft)}
.reactions span{display:inline-flex;align-items:center;gap:6px}
.reactions svg{font-size:1.05em}

/* the top of the hill */
.top{padding:52vh var(--gutter) max(24px,env(safe-area-inset-bottom))}
.top-card{padding:clamp(20px,3vw,34px);display:grid;grid-template-columns:minmax(0,18rem) 1fr;gap:18px 40px;align-items:start;max-width:80rem;margin:0 auto}
.top-intro{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.top-card h2{font:800 clamp(2.4rem,4.4vw,3.9rem)/.92 Bricolage,sans-serif;letter-spacing:-.045em;text-wrap:balance}
.top-sub{font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.top-card .prints{grid-column:2;grid-row:1/span 2}
.top-card .all{grid-column:1;grid-row:2;align-self:end}
.prints{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.prints li:nth-child(6n+1){--r:-2.4deg}.prints li:nth-child(6n+2){--r:1.6deg}.prints li:nth-child(6n+3){--r:-1deg}
.prints li:nth-child(6n+4){--r:2.2deg}.prints li:nth-child(6n+5){--r:-1.6deg}.prints li:nth-child(6n+6){--r:1.2deg}
.prints a{
  display:block;height:100%;padding:7px 7px 12px;background:#fff;border-radius:4px;text-decoration:none;
  rotate:var(--r);box-shadow:0 1px 2px rgba(60,40,10,.25),0 14px 24px -16px rgba(60,40,10,.6);
  transition:rotate .45s var(--ease),translate .45s var(--ease),box-shadow .45s var(--ease);
}
.prints a:hover,.prints a:focus-visible{rotate:0deg;translate:0 -6px;box-shadow:0 2px 3px rgba(60,40,10,.2),0 22px 30px -18px rgba(60,40,10,.65)}
.prints img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;background:var(--paper-edge)}
.prints span{display:block;margin-top:9px;font-size:.8rem;line-height:1.35;font-weight:600;color:var(--ink)}
.all{
  white-space:nowrap;display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:0 20px;margin-top:4px;
  background:var(--ink);color:var(--paper);border-radius:999px;font-weight:600;text-decoration:none;
  transition:transform .35s var(--ease);
}
.all:hover{transform:translateY(-2px)}

/* the end of the walk */
.end{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:10px;padding-top:22px;border-top:1px solid var(--paper-edge)}
.end .thanks{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.05 Bricolage,sans-serif;letter-spacing:-.035em}
.actions-small{margin-top:0;width:100%}
.end .backup{flex-basis:100%;margin-top:0}
.end .backup summary{background:var(--paper-edge);margin-left:0}
.end .backup ul{box-shadow:none;border:1px solid var(--paper-edge)}
.place{flex-basis:100%;font-size:.85rem;color:var(--ink-soft)}

/* ---------- phone & narrow layouts ---------- */

@media (max-width:760px){
  .hero{padding-top:12px}
  h1{font-size:min(21.4vw,26svh);margin-left:-.04em}
  .actions{gap:8px;width:100%;margin-top:14px}
  .btn{flex-direction:column;justify-content:center;gap:9px;min-height:112px;padding:14px 6px 13px;border-radius:22px;text-align:center}
  .btn svg{width:40px;height:40px;padding:10px}
  .btn-label{align-items:center}
  .btn-label b{font-size:1.02rem}
  .btn-label small{font-size:.74rem}
    .feed{padding-top:46vh}
  .feed-card{margin:0 auto;border-radius:26px}
  .ask-card{margin:0 auto 14px;border-radius:26px}
  .avatar{width:56px;height:56px}
  .profile h2{font-size:1.75rem}
  .top{padding-top:54vh}
  .top-card{display:block;border-radius:26px}
  .top-sub{margin-top:0}
  .prints{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:16px calc(-1 * clamp(20px,3vw,34px)) 0;padding:6px clamp(20px,3vw,34px) 14px;scrollbar-width:none}
  .prints::-webkit-scrollbar{display:none}
  .prints li{flex:0 0 44%;scroll-snap-align:start}
  .all{width:100%;justify-content:center;margin-top:6px}
  .end{flex-direction:column;align-items:stretch;text-align:center;margin-top:20px}
  .end .actions{width:100%}
}
@media (max-width:360px){
  .btn{min-height:100px;gap:7px}
  .btn svg{width:34px;height:34px;padding:8px}
  .btn-label b{font-size:.94rem}
  .btn-label small{font-size:.68rem}
}
@media (min-width:761px) and (max-width:1100px){
  .prints{grid-template-columns:repeat(3,minmax(0,1fr))}
  .top-card{grid-template-columns:minmax(0,13rem) 1fr}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  h1{font-size:min(16vw,30svh)}
  .btn{min-height:58px}
}

/* ---------- ambient motion: the world breathes, Barkley stays put ---------- */

@media (prefers-reduced-motion:no-preference){
  .cloud-a{animation:drift 70s ease-in-out infinite alternate}
  .cloud-b{animation:drift 95s ease-in-out -30s infinite alternate-reverse}
  .bird{offset-path:path('M0 0c60-18 130-10 170 20s40 70-10 80-120-20-150-50S-60 18 0 0Z');offset-rotate:0deg;animation:glide 38s linear infinite}
  .bird path{transform-origin:50% 60%;animation:flap 5.5s ease-in-out infinite}
  .sunlight{animation:breathe 9s ease-in-out infinite alternate}
  .motes i{animation:mote var(--d) linear var(--dl) infinite}
  .poppies-left{animation:sway 7.5s ease-in-out infinite alternate}
  .poppies-right{animation:sway 6s ease-in-out -2.5s infinite alternate}
  .bubble{animation:say .7s cubic-bezier(.34,1.56,.64,1) 2.2s both}
  .js h1 span{animation:settle 1.1s var(--ease) calc(.25s + var(--i) * 70ms) both}
  .stage.is-past-vista .cloud,.stage.is-past-vista .bird,.stage.is-past-vista .bird path{animation-play-state:paused}
  .stage.is-hidden *{animation-play-state:paused}
}
@keyframes drift{from{translate:-5% 0}to{translate:6% 1%}}
@keyframes glide{to{offset-distance:100%}}
@keyframes flap{0%,70%,100%{scale:1 1}76%{scale:1 -.35}82%{scale:1 1}88%{scale:1 -.35}94%{scale:1 1}}
@keyframes breathe{from{opacity:.75}to{opacity:1}}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}55%{opacity:.5}80%{opacity:.85}100%{opacity:0;transform:translate(-70px,-150px)}}
@keyframes sway{from{transform:skewX(-1.3deg)}to{transform:skewX(1.5deg)}}
@keyframes say{from{filter:opacity(0);scale:.4}to{filter:opacity(1);scale:1}}
@keyframes settle{from{opacity:.12;translate:0 .16em;filter:blur(5px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene,.foreground{transition:opacity .9s ease}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){.bubble{display:none}}

/* A photo print grows into its place in the album (where the browser supports it). */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-group(photo){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}


/* ---------- the arrival (arrival.js, specs/arrival.md) ----------
   html.arrival: the trailhead is bare paper until the canvas paints it. Everything painted is hidden;
   the name and buttons are untouched. The foreground poppies and the sky's extras come back as the
   bloom reaches them (arrival-fg, arrival-sky). If the arrival never starts, removing html.arrival
   fades the plain painting in. */
.plate .depth{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .3s ease}
.plate .depth.is-live{opacity:1}
.plate .depth.is-instant{transition:none}
.arrival .vista .plate{background:var(--paper)}
.vista .plate>picture,.vista .still-barkley{transition:opacity .3s ease}
.arrival .vista .plate>picture,.arrival .vista .living,.arrival .vista .still-barkley{opacity:0 !important}
.cloud,.bird,.foreground,.sunlight,.motes{transition:filter .6s ease}
.arrival:not(.arrival-fg) .foreground,
.arrival:not(.arrival-sky) :is(.cloud,.bird,.sunlight,.motes){filter:opacity(0)}
.arrival .bubble{animation:none !important;opacity:0 !important}
/* The name is solid ink on the paper from the first frame; the painting is the show. */
.first-view h1 span{animation:none !important}
.arrived .bubble{animation-delay:.2s}
.gl .bubble{translate:var(--lean-x,0) var(--lean-y,0)}

/* ---------- the real sky (sky.js): time of day, night, weather ----------
   --night crossfades the day trailhead into Codex's night painting; the walk scenes get a moonlit wash.
   data-weather adds clouds, an overcast sky, a marine layer or rain. --wind sets how hard things sway. */
.plate .night-art{position:absolute;inset:0;display:none;opacity:var(--night,0)}
.plate .night-art img{position:absolute;inset:0;width:100%;height:100%}
.is-dusk .plate .night-art{display:block}
.plate .depth.is-live ~ .night-art{display:none}      /* the canvas paints night itself */
.night-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#27336f,#3b4a86 45%,#46507d);mix-blend-mode:multiply;opacity:calc(var(--night,0) * .92)}
h1{transition:color .8s ease,text-shadow .8s ease}
.is-night:not(.arrival) h1{color:var(--paper);text-shadow:0 .02em .12em rgba(10,18,50,.55)}
.sunlight{filter:opacity(calc(1 - var(--night,0)))}
.motes{opacity:calc(1 - var(--night,0))}
.bird{visibility:visible}
.is-night .bird{visibility:hidden}
.cloud{filter:brightness(calc(1 - var(--night,0) * .55)) saturate(calc(1 - var(--night,0) * .5))}
.fg-plate{filter:brightness(calc(1 - var(--night,0) * .58)) saturate(calc(1 - var(--night,0) * .35)) hue-rotate(calc(var(--night,0) * -8deg))}

.cloud-c,.cloud-d{display:none}
.cloud-c{left:12%;top:6%;width:26%;opacity:.85}
.cloud-d{left:70%;top:30%;width:20%;opacity:.75;scale:-1 1}
@media (max-aspect-ratio:1/1){.cloud-c{left:-6%;top:4%;width:55%}.cloud-d{left:50%;top:26%;width:44%}}
:is([data-weather=cloudy],[data-weather=overcast],[data-weather=rain]) .cloud-c,
:is([data-weather=cloudy],[data-weather=overcast],[data-weather=rain]) .cloud-d{display:block}

.weather{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2s ease}
.w-overcast{background:linear-gradient(180deg,rgba(190,198,206,.82),rgba(196,202,208,.6) 38%,rgba(196,202,208,0) 60%)}
.w-overcast::after{content:"";position:absolute;inset:0;background:#8d9399;mix-blend-mode:saturation;opacity:.4}
:is([data-weather=overcast],[data-weather=rain]) .w-overcast{opacity:calc(1 - var(--night,0) * .6)}
:is([data-weather=overcast],[data-weather=rain],[data-weather=fog]) :is(.sunlight,.motes){visibility:hidden}
.w-fog{--fog:color-mix(in srgb,#eef1f2,#56628a calc(var(--night,0) * 100%));--y:47%;
  background:linear-gradient(180deg,transparent calc(var(--y) - 16%),color-mix(in srgb,var(--fog) 55%,transparent) calc(var(--y) - 5%),color-mix(in srgb,var(--fog) 80%,transparent) var(--y),color-mix(in srgb,var(--fog) 45%,transparent) calc(var(--y) + 6%),transparent calc(var(--y) + 13%))}
.w-fog::before{content:"";position:absolute;left:-20%;right:-20%;top:calc(var(--y) - 10%);height:20%;background:radial-gradient(ellipse 30% 40% at 20% 50%,var(--fog),transparent 70%),radial-gradient(ellipse 25% 35% at 60% 40%,var(--fog),transparent 70%),radial-gradient(ellipse 30% 45% at 95% 55%,var(--fog),transparent 70%);opacity:.5}
.climb .w-fog{--y:38%}
.summit .w-fog{--y:32%}
@media (max-aspect-ratio:1/1){.vista .w-fog{--y:42%}.climb .w-fog{--y:25%}.summit .w-fog{--y:30%}}
[data-weather=fog] .w-fog{opacity:1}
.w-rain{background:repeating-linear-gradient(104deg,transparent 0 9px,rgba(230,236,244,.5) 9px 10.5px,transparent 10.5px 19px),repeating-linear-gradient(98deg,transparent 0 23px,rgba(230,236,244,.32) 23px 24px,transparent 24px 41px);background-size:19px 70px,41px 120px;mix-blend-mode:screen}
.w-rain::before{content:"";position:absolute;inset:0;background:rgba(70,82,104,.28);mix-blend-mode:multiply}
[data-weather=rain] .w-rain{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .poppies-left{animation-duration:calc(7.5s / (.55 + var(--wind,.3)))}
  .poppies-right{animation-duration:calc(6s / (.55 + var(--wind,.3)))}
  .cloud-a{animation-duration:calc(70s / (.4 + var(--wind,.3) * 1.6))}
  .cloud-b{animation-duration:calc(95s / (.4 + var(--wind,.3) * 1.6))}
  .cloud-c{animation:drift calc(80s / (.4 + var(--wind,.3) * 1.6)) ease-in-out -20s infinite alternate}
  .cloud-d{animation:drift calc(110s / (.4 + var(--wind,.3) * 1.6)) ease-in-out -50s infinite alternate-reverse}
  .w-fog::before{animation:fogdrift 60s ease-in-out infinite alternate}
  .w-rain{animation:rain .45s linear infinite}
}
@media (prefers-reduced-motion:reduce){.w-rain{background:none}}
@keyframes fogdrift{to{translate:12% 0}}
@keyframes rain{to{background-position:-18px 70px,-24px 120px}}
.arrival:not(.arrival-sky) .weather{visibility:hidden}