/* Almanac — tokens and components, ported 1:1 from the approved prototype. */

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  --paper:#F1ECDE;--raised:#F8F4EA;--panel:#E7E0CE;--stripe:#E2DAC6;
  --ink:#241F1A;--soft:#5A5044;--muted:#877C6C;--faint:#AEA491;
  --line:#DDD5C4;--accent:#6E2A2A;--accent-dk:#551F1F;
  --dur-micro:150ms;--dur-base:320ms;--dur-hero:550ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-inout:cubic-bezier(.4,0,.2,1);
}
body[data-theme="dark"]{
  --paper:#1E1913;--raised:#262019;--panel:#2B241C;--stripe:#312921;
  --ink:#F1ECDE;--soft:#C7BCAB;--muted:#978B79;--faint:#6F6454;
  --line:#373026;--accent:#A34E4E;--accent-dk:#BC6A64;
}
a{color:var(--accent)}a:hover{color:var(--accent-dk)}
input::placeholder{color:var(--faint)}

.page{min-height:100vh;display:flex;flex-direction:column}
.frame{max-width:1120px;width:100%;margin:0 auto;padding:0 clamp(16px,5vw,48px);box-sizing:border-box;flex:1}

/* ---- masthead + nav ---- */
header{padding-top:36px}
.masthead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:2px 16px;padding-bottom:14px}
.wm{position:relative;text-decoration:none;font-family:Fraunces,serif;font-size:clamp(26px,6vw,34px);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.wm::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-micro) var(--ease-out)}
.wm:hover::after{transform:scaleX(1)}
.issue{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.rule{height:2px;background:var(--ink)}
nav{display:flex;gap:clamp(13px,2.6vw,26px);align-items:baseline;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}
nav .active{color:var(--ink);text-decoration:none;font-weight:500;padding-bottom:12px;margin-bottom:-14px;border-bottom:2px solid var(--accent)}
nav .placeholder{color:var(--faint)}
nav .about-link{color:var(--soft);text-decoration:none;margin-left:auto}
nav .theme-toggle{color:var(--muted);text-decoration:none;font-size:14px;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}

/* ---- shared bits ---- */
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.img{background-color:var(--panel);background-image:repeating-linear-gradient(45deg,var(--panel) 0 14px,var(--stripe) 14px 28px);position:relative;overflow:hidden}
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.note{margin:0;padding-left:16px;border-left:2px solid var(--accent);font-family:Fraunces,serif;font-style:italic;color:var(--soft)}
.back{font-size:13px;color:var(--muted);text-decoration:none}

/* ---- home: featured ---- */
.featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(24px,4.5vw,48px);align-items:center;padding:clamp(32px,5vw,48px) 0;border-bottom:1px solid var(--line)}
.featured .img{aspect-ratio:4/5;border-radius:12px}
.featured-link{display:block;text-decoration:none;transition:transform var(--dur-micro) var(--ease-out)}
.featured-link:hover{transform:translateY(-3px)}
.featured-body{display:flex;flex-direction:column;gap:16px;max-width:440px}
.featured-title{font-family:Fraunces,serif;font-size:27px;font-weight:500;color:var(--ink);text-decoration:none;line-height:1.15}
.featured-body .note{font-size:17px;line-height:1.5}
.featured-price{display:flex;align-items:baseline;gap:10px;font-size:15px}
.featured-price .amount{font-weight:500}
.featured-price a{font-size:13px}

/* ---- home: capsule block ---- */
.capsule-block{margin:40px 0;background:var(--raised);border:1px solid var(--line);border-radius:13px;padding:clamp(20px,3.5vw,32px) clamp(20px,4vw,36px)}
.capsule-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:10px}
.capsule-title{font-family:Fraunces,serif;font-size:22px;font-weight:500;color:var(--ink);text-decoration:none}
.capsule-view{font-size:13px;white-space:nowrap}
.capsule-intro{margin:10px 0 24px;font-family:Fraunces,serif;font-style:italic;font-size:16px;line-height:1.5;color:var(--soft);max-width:520px}
.capsule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:24px}
.piece{display:flex;flex-direction:column;gap:8px;color:var(--ink);text-decoration:none}
.piece .img{aspect-ratio:4/5;border-radius:10px}
.piece-title{font-size:13px;color:var(--ink)}
.piece-meta{font-size:12.5px;color:var(--muted)}
.piece-meta .amount{color:var(--soft);font-weight:500}

/* ---- find grids ---- */
.grid-section{padding:8px 0 48px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:28px;margin-top:18px}
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);transition:transform var(--dur-micro) var(--ease-out)}
.card:hover{transform:translateY(-3px)}
.card .img{aspect-ratio:4/5;border-radius:10px}
.card-brand{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.card-title{font-size:13px;line-height:1.35}
.card-note{font-family:Fraunces,serif;font-style:italic;font-size:13.5px;color:var(--accent);line-height:1.4}
.card-meta{font-size:12.5px;color:var(--muted)}
.card-meta .amount{color:var(--soft);font-weight:500}

/* ---- detail ---- */
.detail{padding:36px 0 64px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(28px,5vw,56px);align-items:start;margin-top:28px}
.detail .img{aspect-ratio:4/5;border-radius:12px}
.detail-body{display:flex;flex-direction:column;gap:18px;max-width:440px;padding-top:12px}
.detail-title{margin:0;font-family:Fraunces,serif;font-size:30px;font-weight:500;line-height:1.12}
.detail-body .note{font-size:17px;line-height:1.5}
.detail-price{font-size:17px;font-weight:500}
.detail-source{font-size:14px}
.filed{font-size:12px;color:var(--muted);margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.filed a{font-size:12px}

/* ---- capsule page ---- */
.capsule-page{padding:36px 0 64px}
.capsule-page-head{max-width:560px;margin-top:28px;display:flex;flex-direction:column;gap:14px}
.capsule-page-title{margin:0;font-family:Fraunces,serif;font-size:30px;font-weight:500;line-height:1.12}
.capsule-page-intro{margin:0;font-family:Fraunces,serif;font-style:italic;font-size:18px;line-height:1.55;color:var(--soft)}
.capsule-page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:28px;margin-top:40px}

/* ---- section index / empty ---- */
.section-page{padding:36px 0 64px}
.section-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.section-title{margin:0;font-family:Fraunces,serif;font-size:24px;font-weight:500}
.section-count{font-size:12px;color:var(--muted)}
.empty-block{border:1px solid var(--line);border-radius:13px;background:var(--raised);padding:72px 32px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.empty-line{margin:0;font-family:Fraunces,serif;font-style:italic;font-size:19px;color:var(--ink)}
.empty-sub{font-size:13px;color:var(--muted)}

/* ---- about ---- */
.about{padding:52px 0 64px;max-width:620px}
.about h1{margin:0 0 24px;font-family:Fraunces,serif;font-size:28px;font-weight:500}
.about-body{display:flex;flex-direction:column;gap:18px;font-size:15.5px;line-height:1.7;color:var(--soft)}
.about-body p{margin:0}
.about-pull{margin:16px 0!important;padding-left:16px;border-left:2px solid var(--accent);font-family:Fraunces,serif;font-style:italic;font-size:18px;line-height:1.5;color:var(--ink)}

/* ---- 404 ---- */
.notfound{padding:80px 0 100px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.notfound-line{margin:0;font-family:Fraunces,serif;font-size:24px;font-weight:500;max-width:420px;line-height:1.3}
.notfound a{font-size:14px}

/* ---- subscribe ---- */
.subscribe{border-top:1px solid var(--line);padding:52px 0 64px;min-height:250px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.subscribe-line{margin:0;font-family:Fraunces,serif;font-style:italic;font-size:20px;color:var(--ink);text-align:center}
.subscribe-line.done{font-size:19px}
.subscribe-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.subscribe-form input{width:min(280px,64vw);padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--raised);font-family:Inter,sans-serif;font-size:14px;color:var(--ink);outline:none}
.subscribe-form button{padding:11px 22px;border:none;border-radius:8px;background:var(--ink);color:var(--paper);font-family:Inter,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:transform var(--dur-micro) var(--ease-out)}
.subscribe-form button:active{transform:scale(.97)}
.gag-mascot{animation:fadeInQ 250ms var(--ease-out) both,wobble 650ms var(--ease-out) 100ms}
.done-mascot{animation:routeIn 550ms var(--ease-out) backwards}
.word{display:inline-block;white-space:pre;animation:wordIn 380ms var(--ease-out) both}

/* ---- entrance animation (load + IntersectionObserver retrigger) ---- */
.rise{opacity:0}
.rise.in{animation:riseIn var(--dur-base) var(--ease-out) both;animation-delay:var(--rise-delay,0ms)}

/* ---- keyframes (prototype-exact) ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes routeIn{from{opacity:0}to{opacity:1}}
@keyframes routeOutUp{to{opacity:0;transform:translateY(-8px)}}
@keyframes curtainLong{0%{transform:translateY(-101%)}22%{transform:translateY(0)}78%{transform:translateY(0)}100%{transform:translateY(101%)}}
@keyframes wobble{0%{transform:rotate(0)}25%{transform:rotate(-3deg)}55%{transform:rotate(2.5deg)}80%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@keyframes wordIn{from{opacity:0;transform:translateY(4px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes fadeInQ{from{opacity:0}to{opacity:1}}
@keyframes fadeOutQ{to{opacity:0}}
@keyframes maskPullDown{from{transform:translateY(-45px)}to{transform:translateY(0)}}
@keyframes maskPullUp{from{transform:translateY(0)}to{transform:translateY(-45px)}}
@keyframes sparkleOnce{0%{transform:scale(0) rotate(0deg)}55%{transform:scale(1.15) rotate(60deg)}100%{transform:scale(0) rotate(90deg)}}
@keyframes maskSparkle{0%,84%{transform:scale(0) rotate(0deg)}91%{transform:scale(1.1) rotate(55deg)}100%{transform:scale(0) rotate(90deg)}}
@keyframes blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}

/* ---- theme curtain ---- */
.curtain{position:fixed;inset:0;z-index:100;animation:curtainLong 1600ms var(--ease-inout) forwards;pointer-events:none;display:flex;align-items:center;justify-content:center}
.curtain svg{overflow:visible;animation:fadeInQ 250ms var(--ease-out) 350ms both}

/* ---- cross-document view transitions (route fade + shared-element flight) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:routeOutUp var(--dur-micro) var(--ease-inout) forwards}
::view-transition-new(root){animation:routeIn var(--dur-base) var(--ease-out)}
::view-transition-group(hero){animation-duration:var(--dur-hero);animation-timing-function:var(--ease-out)}
::view-transition-old(hero),::view-transition-new(hero){animation:none;height:100%;overflow:hidden}

/* ---- reduced motion: cross-fades only, HARD requirement ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .rise{opacity:1}
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}