/* Diario — ported from design-options/11-scrapbook.html. Keyframes are global, so they're prefixed diario-. */
[data-tab="diario"]{--tab-accent:#ffd23f;
  --paper:#f8f2e3;--kraft:#b48a5c;--ink:#2e2b28;--pencil:#6b655d;--tomato:#e4572e;--red:#b83a14;--teal:#137a6f;--mustard:#e9b44c;--sticky:#ffe98a;
  --hand:"Caveat",cursive;--serif:"Fraunces",Georgia,serif;
  display:block;min-height:100dvh;overflow-x:clip;padding:14px 10px 24px;color:var(--ink);font:400 16px/1.5 var(--serif);
  background:repeating-linear-gradient(87deg,#ffffff0d 0 2px,transparent 2px 7px),repeating-linear-gradient(-3deg,#5032140f 0 1px,transparent 1px 5px),var(--kraft);
  button,input,textarea{font:inherit;color:inherit}
  :focus-visible{outline:3px dashed var(--red);outline-offset:3px}
  [hidden]{display:none!important}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .journal{position:relative;max-width:1200px;margin:0 auto;padding:28px 16px 40px;border-radius:4px 10px 10px 4px;
    background:linear-gradient(#3f6e961c 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#3f6e961c 1px,transparent 1px) 0 0/22px 22px,var(--paper);
    box-shadow:0 2px 0 #e9e0cb,0 4px 0 #ddd2b8,0 30px 60px -20px #321e0a99}
  @media (min-width:900px){
    &{padding:36px 30px 40px}
    .journal{padding:48px 64px 60px 92px}
    .journal::before{content:"";position:absolute;left:58px;top:0;bottom:0;width:2px;background:#e4572e66}
    .journal::after{content:"";position:absolute;left:14px;top:30px;bottom:30px;width:22px;background:radial-gradient(circle at 11px 11px,#8a6a45 6px,transparent 7px) 0 0/22px 44px}
  }

  /* hero */
  .hero{display:grid;gap:22px;align-items:center;margin-bottom:34px}
  @media (min-width:900px){.hero{grid-template-columns:1.4fr 1fr;gap:40px}}
  .stamp{display:inline-block;font:600 .72rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:2px solid var(--red);padding:6px 9px;border-radius:3px;transform:rotate(-3deg)}
  h1{font:700 clamp(3.6rem,15vw,7rem)/.85 var(--hand);margin:18px 0 6px;letter-spacing:-.01em}
  h1:focus{outline:0}
  h1 .u{position:relative;display:inline-block}
  h1 svg{position:absolute;left:-4%;bottom:-8%;width:108%;height:.32em;overflow:visible}
  h1 svg path{stroke-dasharray:420;animation:diario-pen-u 1.1s .4s cubic-bezier(.6,0,.3,1) backwards}
  .lede{font-size:1.08rem;max-width:38ch;margin:16px 0 0}
  .lede em{font:normal 1.45em/1 var(--hand);color:var(--teal)}
  .unsaved{display:inline-block;margin:14px 0 0;padding:6px 10px;font:700 1.25rem/1.1 var(--hand);color:#fff;background:var(--red);transform:rotate(-1deg)}
  .note{margin:0;background:var(--sticky);padding:14px 16px 16px;font-size:.95rem;transform:rotate(var(--nr,2deg));
    box-shadow:0 12px 16px -12px #00000073,inset 0 -10px 18px -14px #785a0059}
  .note b{font:700 1.8rem/1 var(--hand);display:block;margin-bottom:4px}
  .sum{justify-self:center;width:min(100%,300px)}

  /* route map + entries */
  .spread{display:grid;gap:40px}
  .mapwrap{position:relative;margin:0;background:#ffffff8c;border:1px solid #0000000f;padding:10px;transform:rotate(-.6deg);box-shadow:0 14px 26px -16px #3c281480}
  @media (min-width:900px){.spread{grid-template-columns:minmax(260px,360px) minmax(0,1fr);align-items:start}.mapwrap{position:sticky;top:24px}}
  .mapwrap .tape{--tc:#5cc2b5;--tr:3deg}
  .mapwrap svg{display:block;width:100%;height:auto;max-height:78vh}
  .mapwrap text{font-family:var(--hand);font-weight:700}
  .ink{stroke-dasharray:1 1;animation:diario-ink 1.9s .3s cubic-bezier(.5,0,.3,1) backwards}
  .stop{transform-box:fill-box;transform-origin:center;animation:diario-pop .5s var(--d) cubic-bezier(.3,1.8,.5,1) backwards}

  .entries{list-style:none;margin:0;padding:14px 4px 0;display:grid;gap:56px;container-type:inline-size}
  .entry{display:grid;gap:22px}
  @container (min-width:560px){.entry{grid-template-columns:minmax(0,250px) minmax(0,1fr);align-items:start;gap:34px}}
  .pol{position:relative;width:88%;background:#fffdf8;padding:10px 10px 6px;transform:rotate(var(--r,0deg));
    box-shadow:0 1px 1px #0000001f,0 14px 24px -12px #3c28148c}
  .pol.drop{animation:diario-drop .75s var(--d,0ms) cubic-bezier(.2,.8,.3,1) backwards}
  .entry:nth-child(even) .pol{margin-left:auto}
  @container (min-width:560px){.pol,.entry:nth-child(even) .pol{width:auto;margin:0}}
  .photo{display:block;aspect-ratio:4/3;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000000f}
  .photo svg,.photo img{position:absolute;inset:0;width:100%;height:100%}
  .photo img{object-fit:cover;display:block}
  .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff40,transparent 40%,#00000014)}
  .cap{display:block;font:700 1.7rem/1.05 var(--hand);padding:8px 2px 0}
  .pol .credit{display:block;color:var(--ink);line-height:1.2;padding:0 2px}
  .tape{position:absolute;top:-13px;left:50%;width:96px;height:28px;margin-left:-48px;z-index:2;opacity:.85;
    background:repeating-linear-gradient(45deg,#ffffff59 0 5px,transparent 5px 11px),var(--tc,var(--mustard));
    clip-path:polygon(2% 0,98% 0,100% 25%,97% 50%,100% 75%,98% 100%,2% 100%,0 75%,3% 50%,0 25%);
    transform:rotate(var(--tr,-4deg));transform-origin:12% 50%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .entry:hover .tape,.entry:focus-within .tape{transform:rotate(calc(var(--tr) - 16deg)) translate(4px,-10px)}
  /* visited: a rubber stamp on the polaroid (transform/opacity only) */
  .pol::after{content:"✓ been there";position:absolute;right:-8px;top:22px;z-index:3;padding:4px 10px 2px;font:700 1.35rem/1 var(--hand);color:#fff;background:var(--red);
    transform:rotate(-8deg) scale(1.6);opacity:0;transition:transform .3s cubic-bezier(.3,1.8,.5,1),opacity .2s;pointer-events:none}
  .entry.done .pol::after{opacity:1;transform:rotate(-8deg)}

  .page h2{font:800 clamp(1.5rem,5.5vw,2.1rem)/1.05 var(--serif);margin:0;letter-spacing:-.02em}
  .day{font:700 1.15em/1 var(--hand);color:var(--red);letter-spacing:0}
  .reg{margin:6px 0 0;font:700 1.3rem/1.1 var(--hand);color:var(--pencil)}
  .hook{margin:8px 0 12px;font-size:.98rem;line-height:1.4}
  .been{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px 0 8px;border:2px solid var(--ink);border-radius:6px 10px 7px 12px;
    background:#fff;box-shadow:3px 3px 0 var(--ink);font:700 1.35rem/1 var(--hand);cursor:pointer;transition:transform .15s}
  .been:active{transform:translate(2px,2px)}
  .been input{width:24px;height:24px;margin:0;accent-color:var(--red);cursor:pointer}
  .been:has(:focus-visible){outline:3px dashed var(--red);outline-offset:3px}
  .been input:focus-visible{outline:0}
  .nl{display:block;margin:16px 0 2px;font:700 1.3rem/1 var(--hand);color:var(--pencil)}
  textarea{display:block;width:100%;min-height:96px;resize:vertical;padding:2px 8px;border:0;border-left:2px solid #e4572e66;border-radius:0;
    font:500 1.45rem/32px var(--hand);background:linear-gradient(transparent 31px,#3f6e9640 31px) 0 0/100% 32px local,#fffdf8b3}
  textarea::placeholder{color:var(--pencil)}

  .empty{display:block;margin:20px auto 40px;max-width:22ch;min-height:44px;padding:14px 10px;border:0;background:none;cursor:pointer;text-align:center;
    font:700 clamp(2rem,8vw,3rem)/1.15 var(--hand);color:var(--ink);text-decoration:underline wavy var(--tomato) 2px;text-underline-offset:8px;transform:rotate(-2deg)}
  footer{margin-top:50px;font:500 1.2rem var(--hand);color:var(--pencil);text-align:center}
}
@keyframes diario-pen-u{from{stroke-dashoffset:420}}
@keyframes diario-ink{from{stroke-dashoffset:1}}
@keyframes diario-pop{from{opacity:0;transform:scale(0)}}
@keyframes diario-drop{0%{opacity:0;transform:translateY(-70px) rotate(calc(var(--r,0deg) + 12deg)) scale(1.1)}55%{opacity:1;transform:translateY(5px) rotate(calc(var(--r,0deg) - 2deg)) scale(.985)}}
@media (prefers-reduced-motion:reduce){[data-tab="diario"] *,[data-tab="diario"] *::after{animation:none!important;transition:none!important}}