/* The garden — blog page. Warm paper, moss, terracotta; analog photo hero. */
:root{
  --paper:#f1ead8;
  --paper-2:#e8dfc6;
  --ink:#27261d;
  --ink-2:#5a5747;
  --moss:#3f5a32;
  --leaf:#6f8f4e;
  --clay:#c4613a;
  --sun:#e9b44c;
  --serif:"Newsreader", ui-serif, Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --red:#c4613a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(233,180,76,.16), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(111,143,78,.14), transparent 45%),
    var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main, .g-top, .g-foot{position:relative;z-index:1}
a{color:var(--moss)}
a:hover{color:var(--clay)}

.g-top{
  max-width:1100px;margin:0 auto;padding:22px 24px 0;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
}
.g-back{text-decoration:none}
.g-mark{color:var(--ink-2)}

main{max-width:1100px;margin:0 auto;padding:0 24px}

.g-hero{padding:56px 0 24px}
.g-hero h1{
  font-weight:300;font-style:italic;letter-spacing:-.02em;
  font-size:clamp(56px, 10vw, 120px);line-height:.95;margin:0 0 22px;
  color:var(--moss);
}
.g-sub{max-width:44ch;font-size:clamp(19px, 2.2vw, 23px);color:var(--ink-2);margin:0 0 40px;font-weight:350}

/* "digital one" — the one pixel-y thing in an analog page */
.g-digital{
  font:inherit;font-family:var(--mono);font-size:.84em;font-weight:500;letter-spacing:-.01em;
  color:#fff8e6;background:var(--moss);
  border:0;border-radius:0;padding:.04em .4em .1em;margin:0 .05em;cursor:pointer;
  box-shadow:3px 3px 0 var(--sun);
  position:relative;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.g-digital::after{
  content:"▸";display:inline-block;margin-left:.35em;color:var(--sun);
  animation:g-nudge 1.4s steps(2) infinite;
}
.g-digital:hover{background:var(--leaf);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--clay)}
.g-digital:focus-visible{outline:2px dashed var(--clay);outline-offset:3px}
body.playing .g-digital::after{content:"▾";animation:none}
@keyframes g-nudge{50%{transform:translateX(3px)}}

/* stage: photo ⇄ game share the same slot */
.g-stage{position:relative}

.g-frame{
  position:relative;background:#fbf8ef;padding:14px 14px 18px;
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 18px 40px -18px rgba(40,30,10,.45);
  transform:rotate(-.6deg);
}
.g-frame img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
.g-frame.missing{aspect-ratio:3/2}
.g-frame.missing::before{
  content:"";position:absolute;inset:14px 14px 18px;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,228,170,.9), transparent 50%),
    linear-gradient(180deg, #e9b44c 0%, #e88c5a 45%, #b9705a 62%, #6f8f4e 63%, #3f5a32 100%);
}
.g-stamp{
  position:absolute;right:30px;bottom:30px;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;
  color:#ff8a3d;text-shadow:0 0 6px rgba(255,120,40,.6);opacity:.9;
}
.g-photo figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.06em;margin:14px 4px 0}

/* ---- stepping into the photo ---- */
.g-photo{margin:0}
.g-frame{transition:transform .5s}
.g-frame.inside{transform:none;width:fit-content;max-width:100%;margin:0 auto}
@media (pointer: coarse){ .g-frame.inside{width:auto} }
.g-dissolve{
  position:absolute;left:14px;top:14px;width:calc(100% - 28px);aspect-ratio:1565/1037;
  opacity:0;pointer-events:none;z-index:2;transition:opacity .45s;
  image-rendering:pixelated;
}
.g-dissolve.on{opacity:1;transition:none}
.g-frame.inside img, .g-frame.inside .g-stamp{display:none}
.g-game-mount{
  position:relative;width:100%;background:#2d3b24;
  opacity:0;transition:opacity .5s;
}
.g-game-mount[hidden]{display:none}
.g-game-mount.shown{opacity:1}
.g-photo figcaption .g-cap-game{display:none}
body.playing .g-photo figcaption .g-cap-photo{display:none}
body.playing .g-photo figcaption .g-cap-game{display:inline}
.g-link{font:inherit;background:none;border:0;padding:0;color:var(--moss);text-decoration:underline;cursor:pointer}
.g-link:hover{color:var(--clay)}

/* sage band behind the photo (a nod to daubecheese) */
.g-stage{position:relative;isolation:isolate}
.g-stage::before{ /* full-bleed without widening the page: shadow + clip */
  content:"";position:absolute;z-index:-1;top:18%;bottom:-48px;left:0;right:0;
  background:#b3c5a3;box-shadow:0 0 0 100vmax #b3c5a3;clip-path:inset(0 -100vmax);
}
.g-stage figcaption{color:#3d4a33}

.g-notes{padding:96px 0 40px;max-width:760px}
.g-notes h2{font-weight:400;font-size:36px;margin:0 0 18px;color:var(--moss)}
.g-bed{
  border:2px dashed rgba(63,90,50,.45);border-radius:2px;
  background:
    repeating-linear-gradient(0deg, rgba(110,80,40,.08) 0 2px, transparent 2px 14px),
    rgba(120,90,50,.08);
  padding:28px 26px;
}
.g-bed p{margin:0;font-style:italic;color:var(--ink-2)}

.g-foot{max-width:1100px;margin:0 auto;padding:30px 24px 60px;font-family:var(--mono);font-size:12px}

@media (max-width:640px){
  body{font-size:17px}
  .g-hero{padding-top:36px}
  .g-frame{padding:8px 8px 12px;transform:none}
  .g-stamp{right:18px;bottom:20px;font-size:11px}
  .g-dissolve{left:8px;top:8px;width:calc(100% - 16px)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}