/* ===== Fonts (local, no runtime CDN) ===== */
@font-face { font-family:'Fraunces'; font-weight:400; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Fraunces-400.ttf') format('truetype'); }
@font-face { font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Fraunces-600.ttf') format('truetype'); }
@font-face { font-family:'Fraunces'; font-weight:700; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Fraunces-700.ttf') format('truetype'); }
@font-face { font-family:'Caveat'; font-weight:600; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Caveat-600.ttf') format('truetype'); }
@font-face { font-family:'Caveat'; font-weight:700; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Caveat-700.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Inter-400.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('/artifacts/forma-frontend--v1--s4-whacky--glm-5.2--ui-ux-pro-max--2026-09-19T02-13-35-553Z/assets/Inter-500.ttf') format('truetype'); }

/* ===== Tokens ===== */
:root{
  --paper:#f3ebdc;
  --paper-2:#ece1cd;
  --card:#fbf6ec;
  --ink:#241f19;
  --ink-soft:#6b5f4f;
  --rope:#b9905f;
  --rope-dark:#8a6a40;
  --line:#cdbfa6;
  --accent:#b5462f;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 30px -22px rgba(36,31,25,.45);
  --cat-Baking:#b07a2e;
  --cat-Ceramics:#a65a3c;
  --cat-Floristry:#5f7a45;
  --cat-Painting:#3d5a8c;
  --radius:14px;
  --maxw:1180px;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-hand:'Caveat','Segoe Print',cursive;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #fbf3e2 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #efe2c9 0%, transparent 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px),
    var(--paper);
  background-attachment:fixed;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;margin:0}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid #2b5faa; outline-offset:2px; border-radius:6px}

.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}

/* ===== Topbar ===== */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(243,235,220,.96), rgba(243,235,220,.82));
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(36,31,25,.10);
}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{color:var(--accent);display:grid;place-items:center}
.brand__name{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:.01em}
.brand__tag{margin:0;font-family:var(--font-hand);font-weight:600;color:var(--ink-soft);font-size:18px;line-height:1;margin-top:-2px}

.topbar__actions{display:flex;gap:10px;align-items:center}
.basket{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--ink);background:var(--card);
  padding:9px 14px;border-radius:999px;font-weight:500;
  transition:background .18s ease, transform .12s ease, color .18s ease;
}
.basket:hover{background:var(--ink);color:var(--card)}
.basket[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.basket__count{
  font-variant-numeric:tabular-nums;font-weight:600;
  background:rgba(36,31,25,.10);border-radius:999px;padding:1px 9px;min-width:26px;text-align:center
}
.basket[aria-pressed="true"] .basket__count{background:rgba(255,255,255,.22)}

/* ===== Controls ===== */
.controls{
  max-width:var(--maxw);margin:0 auto;padding:22px clamp(16px,4vw,40px) 6px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;align-items:end;
}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.field__hint{font-size:12.5px;color:var(--ink-soft)}
.field__control{position:relative;display:flex;align-items:center}
.field__icon{position:absolute;left:13px;color:var(--ink-soft);pointer-events:none}
#searchInput{
  width:100%;border:1.5px solid rgba(36,31,25,.25);background:var(--card);
  padding:12px 14px 12px 40px;border-radius:12px;font-size:16px;color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
#searchInput::placeholder{color:#9a8d77}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(181,70,47,.15);outline:none}
#categorySelect{
  appearance:none;-webkit-appearance:none;
  width:100%;border:1.5px solid rgba(36,31,25,.25);background:var(--card);
  padding:12px 40px 12px 14px;border-radius:12px;font-size:16px;color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b5f4f' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .18s ease, box-shadow .18s ease;
}
#categorySelect:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(181,70,47,.15);outline:none}

/* ===== The Studio Line ===== */
.line{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:26px clamp(16px,4vw,40px) 40px;
}
/* the rope */
.line::before{
  content:"";position:absolute;left:50%;top:14px;bottom:14px;width:3px;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(180deg, var(--rope) 0 6px, var(--rope-dark) 6px 9px);
  border-radius:3px;opacity:.85;
}
.line::after{ /* frayed ends */
  content:"";position:absolute;left:50%;top:6px;width:10px;height:10px;transform:translateX(-50%);
  background:radial-gradient(circle, var(--rope-dark) 0 60%, transparent 62%);
  border-radius:50%;
}

.hang{position:relative;display:flex;justify-content:center;padding:14px 0}
.hang.left{justify-content:flex-start}
.hang.right{justify-content:flex-end}

.card{
  position:relative;width:48%;background:var(--card);
  border:1px solid rgba(36,31,25,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;gap:14px;align-items:stretch;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.hang.left .card{transform:rotate(-1.4deg);transform-origin:top right;margin-left:2%}
.hang.right .card{transform:rotate(1.4deg);transform-origin:top left;margin-right:2%}
.card:hover{box-shadow:0 1px 0 rgba(0,0,0,.04),0 26px 40px -22px rgba(36,31,25,.55)}
.card[data-saved="true"]{box-shadow:var(--shadow),0 0 0 2px var(--accent) inset}

/* clothespin — pinned to the rope at the centre of the line */
.pin{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:22px;height:34px;z-index:3;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.18));
}
.pin svg{width:22px;height:34px;display:block}

.card__thumb{
  flex:0 0 92px;width:92px;height:92px;border-radius:12px;overflow:hidden;
  background:var(--paper-2);position:relative;
}
.card__thumb img{width:100%;height:100%;object-fit:cover}
.card__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cat{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;color:#fff;white-space:nowrap}
.cat[data-cat="Baking"]{background:var(--cat-Baking)}
.cat[data-cat="Ceramics"]{background:var(--cat-Ceramics)}
.cat[data-cat="Floristry"]{background:var(--cat-Floristry)}
.cat[data-cat="Painting"]{background:var(--cat-Painting)}
.card__price{font-family:var(--font-display);font-weight:700;font-size:20px;white-space:nowrap}
.card__title{font-size:21px;font-weight:600;letter-spacing:.005em}
.card__when{font-size:13.5px;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card__when .dot{opacity:.5}
.card__seats{font-size:12.5px;color:var(--ink-soft)}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
.card__saved{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-hand);font-weight:700;font-size:18px;color:var(--accent);line-height:1}
.card__saved[hidden]{display:none}
.card__open{
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  padding:9px 14px;border-radius:999px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .16s ease, color .16s ease, transform .1s ease;
}
.card__open:hover{background:var(--ink);color:var(--card)}
.card__open:active{transform:translateY(1px)}
.card__open svg{transition:transform .2s ease}
.card__open:hover svg{transform:translateX(2px)}

/* staggered entrance */
@keyframes hangIn{from{opacity:0;transform:translateY(-10px) rotate(0)}to{opacity:1}}
.hang{animation:hangIn .5s ease both}
.hang:nth-child(2){animation-delay:.05s}
.hang:nth-child(3){animation-delay:.10s}
.hang:nth-child(4){animation-delay:.15s}
.hang:nth-child(5){animation-delay:.20s}
.hang:nth-child(6){animation-delay:.25s}

/* gentle sway */
@keyframes sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(-0.6deg)}}
@keyframes swayR{0%,100%{transform:rotate(1.4deg)}50%{transform:rotate(0.6deg)}}
.hang.left .card{animation:sway 6s ease-in-out infinite}
.hang.right .card{animation:swayR 6.2s ease-in-out infinite}

/* ===== Empty state ===== */
.empty{max-width:560px;margin:30px auto;padding:0 20px}
.empty__card{
  background:var(--card);border:1px dashed rgba(36,31,25,.25);border-radius:16px;
  padding:34px 26px;text-align:center;color:var(--ink-soft);box-shadow:var(--shadow)
}
.empty__card svg{color:var(--rope-dark);margin-bottom:8px}
.empty__title{font-family:var(--font-display);font-size:24px;color:var(--ink);margin-bottom:6px}
.empty__text{margin:0 0 18px}

.btn{border-radius:999px;padding:11px 18px;font-weight:600;border:1.5px solid var(--ink);transition:background .16s,color .16s,transform .1s}
.btn--ink{background:var(--ink);color:var(--card);border-color:var(--ink)}
.btn--ink:hover{background:var(--accent);border-color:var(--accent)}
.btn--ink:active{transform:translateY(1px)}

/* ===== Detail dialog ===== */
dialog{border:none;padding:0;background:transparent;margin:0;max-width:none;max-height:none}
dialog::backdrop{background:rgba(28,22,15,.55);backdrop-filter:blur(4px)}
.detail{
  position:fixed;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:18px;opacity:0;transform:translateY(8px);transition:opacity .22s ease, transform .22s ease, overlay .22s ease allow-discrete
}
.detail[open]{opacity:1;transform:none}
@starting-style{ .detail[open]{opacity:0;transform:translateY(8px)} }
.detail__sheet{
  position:relative;width:min(720px,100%);max-height:92vh;overflow:auto;
  background:var(--card);border-radius:18px;border:1px solid rgba(36,31,25,.12);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  display:grid;grid-template-columns:1fr;animation:flip .4s ease both
}
@keyframes flip{from{transform:rotateX(-8deg) translateY(6px);opacity:.4}to{transform:none;opacity:1}}
.detail__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px 18px 0 0;background:var(--paper-2)}
.detail__media img{width:100%;height:100%;object-fit:cover}
.detail__cat{position:absolute;top:14px;left:14px}
.detail__close{
  position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(251,246,236,.92);border:1px solid rgba(36,31,25,.2);
  padding:8px 12px;border-radius:999px;font-weight:600;font-size:13px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.4)
}
.detail__close:hover{background:var(--ink);color:var(--card)}
.detail__body{padding:24px clamp(18px,4vw,30px) 28px}
.detail__when{font-family:var(--font-hand);font-weight:700;font-size:22px;color:var(--accent);margin:0 0 4px;line-height:1}
.detail__title{font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:10px}
.detail__lead{font-size:17px;color:var(--ink);margin:0 0 22px;max-width:60ch}
.detail__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;margin:0 0 26px;border-top:1px solid rgba(36,31,25,.12);padding-top:18px}
.detail__facts dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;margin-bottom:2px}
.detail__facts dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:18px}
.btn--pin{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--ink);background:var(--card);color:var(--ink);
  padding:14px;border-radius:12px;font-weight:600;font-size:16px;
  transition:background .16s,color .16s,transform .1s
}
.btn--pin:hover{background:var(--ink);color:var(--card)}
.btn--pin:active{transform:translateY(1px)}
.btn--pin[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.btn__pin-on{display:none}
.btn__pin-off{display:block}
.btn--pin[aria-pressed="true"] .btn__pin-on{display:block}
.btn--pin[aria-pressed="true"] .btn__pin-off{display:none}

/* ===== Footer ===== */
.foot{max-width:var(--maxw);margin:0 auto;padding:28px clamp(16px,4vw,40px) 44px;text-align:center}
.foot p{margin:0;color:var(--ink-soft);font-size:13.5px}
.foot__mark{color:var(--accent)}

/* ===== Responsive ===== */
@media (max-width:880px){
  .controls{grid-template-columns:1fr;gap:14px}
  /* line moves to the left; all cards hang to the right */
  .line::before{left:30px;transform:none}
  .line::after{left:30px;transform:none}
  .hang{justify-content:flex-start;padding:12px 0}
  .hang.left .card,.hang.right .card{transform:none;width:calc(100% - 60px);margin-left:60px;margin-right:0}
  .hang.left .card,.hang.right .card{animation:none}
  .pin{left:30px;transform:none;top:-6px}
  .card{padding:12px;gap:12px}
  .card__thumb{flex-basis:74px;width:74px;height:74px}
  .card__title{font-size:19px}
}
@media (max-width:480px){
  .topbar{padding:12px 16px}
  .brand__tag{display:none}
  .basket__label{display:none}
  .basket{padding:9px}
  .detail__sheet{max-height:94vh}
  .detail__facts{grid-template-columns:1fr}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .card{transform:none !important}
  .detail{transition:opacity .1s linear}
}