/* Forma — warm workshop editorial + ledger. System type only, all local. */
:root{
  --paper:#F5EEE0;
  --paper-2:#EDE2C9;
  --card:#FFFDF4;
  --ink:#211912;
  --muted:#6E604C;
  --line:#211912;
  --accent:#BC4A1A;
  --accent-deep:#8E3410;
  --moss:#2E4A2D;
  --gold:#E9A820;
  --sky:#BFDCE5;
  --blush:#F3C9B4;
  --radius:18px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  background-image:radial-gradient(rgba(33,25,18,.07) 1px,transparent 1px);
  background-size:22px 22px;
}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);line-height:1.02;margin:0;letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2.6rem,6.2vw,5.2rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
p{margin:0}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:200;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);font-weight:700}
.eyebrow span{color:var(--accent)}
.fine{font-size:.82rem;color:var(--muted)}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(245,238,224,.92);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:1.2rem;padding:.7rem 0}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none}
.brand-mark{font-size:1.5rem;color:var(--accent);transform:translateY(2px)}
.brand-word{font-family:var(--serif);font-size:1.7rem;font-weight:700}
.brand-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1.5px solid var(--line);border-radius:999px;padding:.15rem .6rem;background:var(--card)}
.topnav{display:flex;gap:1.1rem;margin-left:auto;font-weight:600;font-size:.95rem}
.topnav a{text-decoration:none;border-bottom:2px solid transparent}
.topnav a:hover{border-color:var(--accent)}
.top-shortlist{font-family:var(--mono);font-size:.78rem;font-weight:700;border:1.5px solid var(--line);background:var(--ink);color:#F7F0DF;border-radius:999px;padding:.4rem .8rem;display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.shortlist-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);padding:clamp(1.6rem,4vw,4rem) 0 2.2rem;align-items:start}
.hero-copy .lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:#3E3427;max-width:34rem;margin:1.1rem 0 1.4rem}
.hero h1 em{font-style:italic;color:var(--accent-deep);position:relative;z-index:0;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;background:var(--gold);opacity:.55;z-index:-1;border-radius:4px;transform:rotate(-1.2deg)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid var(--line);border-radius:999px;padding:.75rem 1.35rem;font-weight:700;text-decoration:none;cursor:pointer;font-size:1rem;background:var(--card);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn-solid{background:var(--ink);color:#F8F1DE;box-shadow:4px 4px 0 var(--accent)}
.btn-solid:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--accent)}
.btn-ghost:hover{background:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:1.4rem;justify-content:start;margin-top:1.8rem;border-top:1.5px solid var(--line);padding-top:1.1rem}
.hero-stats div{display:grid;gap:.1rem}
.hero-stats dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-stats dd{margin:0;font-family:var(--serif);font-size:1.35rem;font-weight:700}

.hero-media{position:relative;display:grid;justify-items:center}
.arch-wrap{background:var(--card);border:1.5px solid var(--line);border-radius:220px 220px 22px 22px;padding:.8rem .8rem 1rem;box-shadow:8px 8px 0 rgba(33,25,18,.9);max-width:420px;width:min(100%,420px);transform:rotate(1.5deg)}
.arch-wrap img{border-radius:200px 200px 12px 12px;aspect-ratio:4/4.7;object-fit:cover;width:100%}
.arch-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding-top:.6rem}
.arch-tag strong{color:var(--accent-deep)}
.hero-sticker{position:absolute;top:-8px;right:6%;width:128px;height:128px;display:grid;place-items:center}
.sticker-spin{position:absolute;inset:0;animation:spin 16s linear infinite}
.sticker-spin text{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.22em;fill:var(--ink)}
.sticker-core{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#FFF3DF;display:grid;place-items:center;font-family:var(--serif);font-weight:700;line-height:1;border:1.5px solid var(--line);text-align:center;font-size:1.05rem}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-mini{position:absolute;left:-4%;bottom:-24px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:.5rem;box-shadow:5px 5px 0 var(--ink);transform:rotate(-4deg);width:200px}
.hero-mini img{border-radius:9px;aspect-ratio:4/3;object-fit:cover;width:100%}
.hero-mini figcaption{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:.4rem .2rem 0}

/* ticker */
.ticker{border-block:1.5px solid var(--line);background:var(--ink);color:#F5EDD9;overflow:hidden}
.ticker-in{display:flex;gap:1.2rem;align-items:center;white-space:nowrap;padding:.6rem 0;width:max-content;animation:tick 30s linear infinite;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.ticker-in i{color:var(--gold);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* browse */
.browse{padding:3rem 0 4rem}
.browse-head{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:end;margin-bottom:1.6rem}
.browse-note{border-left:3px solid var(--accent);padding-left:1rem;color:#453927;max-width:26rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:5px 5px 0 rgba(33,25,18,.9);position:sticky;top:64px;z-index:20}
.field{display:grid;gap:.3rem;position:relative}
.field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.field-search{flex:1 1 260px}
.field input,.field select{border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-size:1rem;background:#fff;color:var(--ink);width:100%}
.field-search input{padding-right:2.4rem}
.field-icon{position:absolute;right:.8rem;bottom:.65rem;font-size:1.2rem;color:var(--muted)}
.saved-toggle{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:.7rem 1.05rem;font-weight:700;cursor:pointer;font-size:.95rem}
.saved-toggle .heart{font-size:1.15rem;color:var(--accent-deep)}
.saved-toggle[aria-pressed="true"]{background:var(--accent);color:#FFF3DF}
.saved-toggle[aria-pressed="true"] .heart{color:#fff}
.result-count{margin-left:auto;font-family:var(--mono);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.result-count span{color:var(--accent-deep);font-size:1rem}

/* ledger list */
.ledger{display:grid;margin-top:1.2rem;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:6px 6px 0 rgba(33,25,18,.9)}
.item{display:grid;grid-template-columns:64px 190px 1fr auto;gap:1.2rem;align-items:center;padding:1rem 1.2rem;border-top:1.5px dashed rgba(33,25,18,.35);background:var(--card);position:relative;transition:background .15s ease}
.item:first-child{border-top:0}
.item:hover{background:#FFFEF8}
.item-idx{font-family:var(--mono);font-weight:700;font-size:.85rem;color:var(--muted)}
.item-idx b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink)}
.item-img{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.item-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.item:hover .item-img img{transform:scale(1.05) rotate(.4deg)}
.item-cat{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--moss);display:inline-block;padding:.2rem .6rem;border-radius:999px;margin-bottom:.45rem}
.item-cat.Baking{background:#7A4A12}.item-cat.Ceramics{background:#37556E}.item-cat.Floristry{background:#4A6B2F}.item-cat.Painting{background:#8E3410}
.item h3{font-size:1.55rem;margin-bottom:.25rem}
.item-desc{color:#4A4032;font-size:.98rem;max-width:38rem}
.item-meta{display:grid;gap:.15rem;font-family:var(--mono);font-size:.78rem;font-weight:600;text-align:right;white-space:nowrap}
.item-meta .price{font-family:var(--serif);font-size:1.5rem}
.item-open{grid-column:1/-1;display:flex;gap:.7rem;align-items:center;justify-content:space-between;border-top:1px solid rgba(33,25,18,.15);padding-top:.8rem;margin-top:.2rem}
.item-open .when{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.open-btn{border:1.5px solid var(--line);background:var(--ink);color:#F8F1DE;border-radius:999px;padding:.55rem 1.1rem;font-weight:700;cursor:pointer;display:inline-flex;gap:.5rem;align-items:center}
.open-btn:hover{background:var(--accent-deep)}
.saved-flag{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.saved-flag[hidden]{display:none}

/* empty */
.empty{margin-top:1.2rem;border:1.5px dashed var(--line);border-radius:20px;background:#FFF9E9;padding:3rem 2rem;text-align:center;display:grid;gap:.7rem;justify-items:center}
.empty[hidden]{display:none}
.empty-mark{font-size:2.4rem;color:var(--accent);border:1.5px solid var(--line);width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--card)}

/* visit */
.visit{border-top:1.5px solid var(--line);background:var(--paper-2);padding:3.5rem 0}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.visit-photo{position:relative;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);padding:.7rem;box-shadow:7px 7px 0 var(--ink);transform:rotate(-.8deg)}
.visit-photo img:first-child{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.visit-inset{position:absolute;right:-14px;bottom:-18px;width:150px;height:150px;object-fit:cover;border-radius:50%!important;border:2px solid var(--line);box-shadow:4px 4px 0 var(--accent)}
.visit-copy h2{margin:.5rem 0 1rem}
.visit-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.7rem}
.visit-list li{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.visit-list strong{color:var(--accent-deep)}

/* footer */
.footer{border-top:1.5px solid var(--line);background:var(--ink);color:#EDE3CB;padding:1.6rem 0}
.footer-in{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline}
.footer-brand{font-family:var(--serif);font-size:1.2rem;margin-right:auto}

/* detail dialog */
.scrim{position:fixed;inset:0;background:rgba(28,20,10,.55);z-index:90}
.scrim[hidden]{display:none}
.detail{position:fixed;z-index:100;top:3vh;right:max(2vw,16px);width:min(480px,calc(100vw - 32px));max-height:94vh;overflow:auto;background:var(--card);border:1.5px solid var(--line);border-radius:22px;box-shadow:10px 10px 0 rgba(20,12,4,.85);padding:1.1rem 1.1rem 1.4rem}
.detail[hidden]{display:none}
.detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.icon-btn{border:1.5px solid var(--line);background:#fff;border-radius:50%;width:42px;height:42px;font-size:1.05rem;cursor:pointer;font-weight:700}
.icon-btn:hover{background:var(--ink);color:#fff}
.detail-media{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:.9rem;position:relative}
.detail-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.detail h3{font-size:2rem}
.detail-meta{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);margin:.3rem 0 .8rem}
.ticket{margin:0 0 .9rem;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;display:grid}
.ticket div{display:grid;grid-template-columns:110px 1fr;gap:.6rem;padding:.5rem .8rem;border-top:1.5px dashed rgba(33,25,18,.3);background:#FFFEF7}
.ticket div:first-child{border-top:0}
.ticket dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);align-self:center}
.ticket dd{margin:0;font-weight:700}
.detail-body{color:#3B3226;font-size:1.02rem}
.detail-actions{margin-top:1rem;display:grid;gap:.5rem}
.btn-save{justify-content:center;width:100%}
.btn-save[aria-pressed="true"]{background:var(--accent);box-shadow:4px 4px 0 var(--ink)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#F7EFDA;border-radius:999px;padding:.65rem 1.2rem;font-weight:600;z-index:120;border:1.5px solid #000}
.toast[hidden]{display:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-media{order:-1}
  .arch-wrap{max-width:340px}
  .hero-mini{left:2%}
  .browse-head{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}
  .item{grid-template-columns:44px 1fr;gap:.8rem}
  .item-img{grid-column:1/-1;aspect-ratio:16/8}
  .item-meta{text-align:left;grid-template-columns:auto auto;justify-content:start;gap:.2rem 1rem}
  .toolbar{position:static}
  .topnav{display:none}
  .detail{top:auto;bottom:0;right:0;left:0;width:100%;border-radius:20px 20px 0 0;max-height:92vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ticker-in{animation:none;width:auto;flex-wrap:wrap;white-space:normal}
}