/* ==========================================================================
   Lucky Ducks Resale — "Sticker Shop" design system
   Stark Create · v0.1.0 · September 2026

   One stylesheet for every page. Served straight from the plugin's site/assets
   folder, so it caches once and every page after the first is markup only.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Buttons, chips, tape, stickers
     5.  Header & footer
     6.  Page header
     7.  Sidebar widgets
     8.  Journal (list + article)
     9.  Finds
     10. About
     11. Links board
     12. Contact, search, 404
     13. Responsive
   ========================================================================== */

/* -------------------------------------------------------------- 1. Tokens */
:root{
  --cream:#FFF6E4;
  --white:#FFFFFF;
  --yellow:#F7D85A;
  --pink:#F4A7B9;
  --sky:#8BC9E8;
  --mint:#BFE0C8;
  --ink:#2F2F2F;
  --ink-2:#6A6152;
  --live:#D94C63;

  /* tints — backgrounds only, never text */
  --tint-sky:#EAF5FB;   --tint-sky-ink:#6FB6DB;
  --tint-pink:#FDEEF2;  --tint-pink-ink:#EE9CB0;
  --tint-yellow:#FEF6DA;--tint-yellow-ink:#E5C23C;
  --tint-mint:#EAF3EC;  --tint-mint-ink:#8FBCA0;

  --outline:2.5px solid #2F2F2F;
  --outline-thin:2px solid #2F2F2F;
  --hard:4px 4px 0 #2F2F2F;
  --hard-sm:3px 3px 0 #2F2F2F;
  --hard-lg:6px 6px 0 #2F2F2F;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --gutter:24px;
  --maxw:1180px;

  --f-display:"Baloo 2","Nunito","Segoe UI",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --f-hand:"Caveat","Segoe Script",cursive;
}

/* --------------------------------------------------------- 2. Reset & base */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  background-image:radial-gradient(circle, rgba(47,47,47,.07) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.01em;
  text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

:focus-visible{outline:3px solid var(--live); outline-offset:3px; border-radius:6px}

.ld-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--yellow); border:var(--outline); border-radius:0 0 var(--r-sm) 0;
  padding:10px 18px; font-family:var(--f-display); font-weight:700;
}
.ld-skip:focus{left:0}

.ld-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

/* ------------------------------------------------- 3. Layout primitives */
.ld-wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.ld-section{padding-block:46px}
.ld-section-tight{padding-block:30px}

.ld-with-side{
  display:grid;
  grid-template-columns:minmax(0,1fr) 322px;
  gap:26px;
  align-items:start;
}
.ld-main{min-width:0}
.ld-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:106px}

.ld-grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.ld-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ld-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

.ld-head-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.ld-head-row h2{font-size:clamp(24px,3vw,33px)}
.ld-more{font-weight:800; font-size:14.5px; color:var(--ink-2)}
.ld-more:hover{color:var(--ink)}

/* ------------------------------------- 4. Buttons, chips, tape, stickers */
.ld-btn{
  display:inline-block;
  background:var(--yellow); color:var(--ink);
  border:var(--outline); border-radius:999px;
  padding:13px 24px;
  font-family:var(--f-display); font-weight:700; font-size:15.5px;
  box-shadow:var(--hard);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.ld-btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 #2F2F2F}
.ld-btn:active{transform:translate(4px,4px); box-shadow:0 0 0 #2F2F2F}
.ld-btn--white{background:var(--white)}
.ld-btn--pink{background:var(--pink)}
.ld-btn--sky{background:var(--sky)}
.ld-btn--sm{padding:10px 18px; font-size:14.5px; box-shadow:var(--hard-sm)}
.ld-btn--block{display:block; width:100%; text-align:center}

.ld-btns{display:flex; gap:11px; flex-wrap:wrap; margin-top:20px}
.ld-btns--center{justify-content:center}

.ld-tape{
  display:inline-block;
  background:var(--sky); border:var(--outline);
  padding:5px 14px;
  font-weight:800; font-size:13px;
  transform:rotate(-1.6deg);
  box-shadow:var(--hard-sm);
}

.ld-chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--white); border:var(--outline); border-radius:999px;
  padding:7px 15px;
  font-weight:800; font-size:14px;
  box-shadow:2px 2px 0 #2F2F2F;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor:pointer;
}
.ld-chip:hover{transform:translate(1px,1px); box-shadow:1px 1px 0 #2F2F2F}
.ld-chip[aria-pressed="true"],.ld-chip.is-on{background:var(--yellow)}
.ld-chip b{font-size:11.5px; font-weight:800; background:rgba(47,47,47,.12); border-radius:999px; padding:1px 7px}
.ld-chip--sm{padding:5px 13px; font-size:13px}
.ld-chips{display:flex; gap:9px; flex-wrap:wrap}
.ld-chips--center{justify-content:center}

.ld-cat{
  display:inline-block;
  background:var(--sky); border:var(--outline-thin); border-radius:999px;
  padding:2px 11px; font-size:11.5px; font-weight:800;
}
.ld-cat--yellow{background:var(--yellow)}
.ld-cat--pink{background:var(--pink)}
.ld-cat--mint{background:var(--mint)}

.ld-hand{display:block; font-family:var(--f-hand); font-size:21px; color:var(--ink-2); transform:rotate(-1.6deg)}

.ld-washi{
  position:absolute; top:-9px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:58px; height:16px;
  background:var(--pink); border:var(--outline-thin);
  z-index:3;
}

.ld-spark{
  position:absolute; pointer-events:none;
  clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
}

.ld-byline{display:flex; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--ink-2)}

/* placeholder / photo frames */
.ld-frame{display:block; position:relative; overflow:hidden; border:var(--outline-thin); border-radius:var(--r-md); background:var(--tint-sky)}
.ld-frame img{width:100%; height:100%; object-fit:cover}
.ld-frame--1x1{aspect-ratio:1/1}
.ld-frame--4x3{aspect-ratio:4/3}
.ld-frame--16x10{aspect-ratio:16/10}
.ld-frame--16x9{aspect-ratio:16/9}
.ld-ph{
  position:absolute; top:8px; left:8px; z-index:2;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(47,47,47,.55); color:#fff;
  border-radius:4px; padding:2px 6px;
}

/* ------------------------------------------------- 5. Header & footer */
.ld-header{
  position:sticky; top:0; z-index:40;
  background:var(--white);
  border-bottom:var(--outline);
}
.ld-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin-inline:auto;
  padding:10px var(--gutter);
}
.ld-brand{display:flex; align-items:center; gap:11px; flex:none}
.ld-brand img{height:56px; width:auto; flex:none}
.ld-brand-name{font-family:var(--f-display); font-weight:800; font-size:23px; line-height:1; display:block}
.ld-brand-sub{display:block; font-family:var(--f-display); font-size:14px; font-weight:700; letter-spacing:.2em; color:var(--ink-2); margin-top:2px}
.ld-navlinks{display:flex; gap:34px; font-size:17px; font-weight:700; color:var(--ink-2)}
.ld-navlinks a{padding-block:4px}
.ld-navlinks a:hover{color:var(--ink)}
.ld-navlinks a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -3px 0 var(--yellow)}
.ld-nav .ld-btn{padding:10px 22px; font-size:16px; box-shadow:var(--hard-sm)}

.ld-burger{
  display:none;
  width:46px; height:42px;
  background:var(--yellow); border:var(--outline); border-radius:var(--r-sm);
  box-shadow:var(--hard-sm);
  cursor:pointer;
  padding:0;
  align-items:center; justify-content:center;
}
.ld-burger span{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px; position:relative}
.ld-burger span::before,.ld-burger span::after{content:""; position:absolute; left:0; width:20px; height:2.5px; background:var(--ink); border-radius:2px}
.ld-burger span::before{top:-6px}
.ld-burger span::after{top:6px}

.ld-drawer{
  display:none;
  border-top:var(--outline);
  background:var(--white);
  padding:14px var(--gutter) 20px;
}
.ld-drawer.is-open{display:block}
.ld-drawer a{
  display:block; padding:12px 14px; margin-bottom:8px;
  background:var(--cream); border:var(--outline-thin); border-radius:var(--r-sm);
  font-weight:800; font-size:16px;
}
.ld-drawer a[aria-current="page"]{background:var(--yellow)}
.ld-drawer .ld-btn{width:100%; text-align:center; margin-top:4px}

.ld-footer{background:var(--yellow); border-top:var(--outline); padding-block:36px 20px; margin-top:64px}

/* Row 1 — the lockup and the blurb each get their own container so neither
   crops the other. Row 2 — the link columns. Row 3 — the legal line. */
.ld-footer-top{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(200px,280px) minmax(0,1fr);
  gap:26px 34px; align-items:center;
}
.ld-footer-logo{min-width:0}
.ld-footer-logo img{width:100%; max-width:280px; height:auto; display:block}

.ld-footer-about{display:flex; flex-direction:column; gap:16px; min-width:0}
.ld-footer-desc{font-size:14.5px; line-height:1.65; max-width:62ch; color:var(--ink)}

.ld-socials{display:flex; gap:10px; flex-wrap:wrap}
.ld-social{
  display:grid; place-items:center;
  width:44px; height:44px;
  background:var(--white); border:var(--outline); border-radius:var(--r-sm);
  box-shadow:var(--hard-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ld-social svg{width:20px; height:20px}
.ld-social:hover{background:var(--pink); transform:translate(2px,2px); box-shadow:1px 1px 0 #2F2F2F}

.ld-footer-nav{
  max-width:var(--maxw); margin:28px auto 0; padding-inline:var(--gutter);
  padding-top:24px; border-top:var(--outline-thin);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;
}
.ld-footer-col{display:flex; flex-direction:column; gap:9px; min-width:0}
.ld-footer-h{
  font-family:var(--f-display); font-size:15px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:2px;
}
.ld-footer-col a{font-weight:700; font-size:15px; width:fit-content}
.ld-footer-col a:hover{box-shadow:inset 0 -2px 0 var(--ink)}

.ld-footer-legal{
  max-width:var(--maxw); margin:18px auto 0; padding:14px var(--gutter) 0;
  border-top:var(--outline-thin);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px; font-weight:700; color:var(--ink-2);
}
.ld-footer-legal-links{display:flex; gap:14px; flex-wrap:wrap}
.ld-footer-legal-links a{color:var(--ink-2)}
.ld-footer-legal-links a:hover{color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink)}

/* ---------------------------------------------------- 6. Page header */
.ld-pagehead{position:relative; text-align:center; padding-block:40px 28px}
.ld-pagehead h1{font-size:clamp(30px,5vw,46px); margin-top:14px}
.ld-pagehead > p{margin:12px auto 0; font-size:16.5px; max-width:56ch; line-height:1.55}
.ld-pagehead .ld-chips{margin-top:20px}

.ld-crumbs{display:flex; gap:8px; flex-wrap:wrap; padding-block:16px 0; font-size:13px; font-weight:700; color:var(--ink-2)}
.ld-crumbs a:hover{color:var(--ink)}
.ld-crumbs [aria-current]{color:var(--ink)}

/* ------------------------------------------------- 7. Sidebar widgets */
.ld-w{background:var(--white); border:var(--outline); border-radius:var(--r-lg); padding:17px; box-shadow:var(--hard)}
.ld-w-h{font-size:16px; margin-bottom:11px}
.ld-w-alt{display:inline-block; margin-top:10px; font-weight:800; font-size:13.5px; color:var(--ink-2)}
.ld-w-alt:hover{color:var(--ink)}

/* search */
.ld-w--search{padding:11px}
.ld-search{display:flex; align-items:center; gap:9px; background:var(--cream); border:var(--outline-thin); border-radius:11px; padding:8px 12px}
.ld-search svg{width:17px; height:17px; flex:none; color:var(--ink-2)}
.ld-search input{flex:1; min-width:0; border:0; background:transparent; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink)}
.ld-search input:focus{outline:none}

/* whatnot callout — the primary sales channel gets the loudest card */
.ld-w--whatnot{background:var(--pink); margin-top:42px; padding:16px 17px 17px; text-align:center; position:relative}
.ld-wn-duck{position:absolute; top:-50px; right:8px; width:82px; transform:rotate(5deg)}
.ld-wn-kick{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.ld-wn-dot{width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(217,76,99,.24); flex:none}
.ld-wn-plat{display:block; font-family:var(--f-display); font-weight:800; font-size:26px; line-height:1.05; margin-top:1px}
.ld-wn-handle{
  display:inline-block; margin-top:7px;
  font-family:var(--f-display); font-weight:700; font-size:16px;
  padding:2px 10px; background:var(--white);
  border:var(--outline-thin); border-radius:999px;
  transition:transform .12s ease, background .12s ease;
}
.ld-wn-handle:hover{background:var(--yellow); transform:translateY(-1px)}
.ld-wn-sub{font-size:13px; font-weight:700; line-height:1.45; color:var(--ink-2); margin:10px 0 12px}

/* next live */
.ld-w--live{background:var(--yellow); position:relative; padding-top:22px}
.ld-w-tape{position:absolute; top:-10px; left:14px; background:var(--pink); border:var(--outline-thin); padding:3px 11px; font-size:11.5px; font-weight:800; transform:rotate(-2deg)}
.ld-w--live h3{font-size:18px; margin-bottom:3px}
.ld-live-when{font-size:13.5px; font-weight:700; color:var(--ink-2); margin-bottom:12px}
.ld-count{display:flex; gap:8px; margin-bottom:13px}
.ld-count > span{
  flex:1; background:var(--white); border:var(--outline-thin); border-radius:var(--r-sm);
  padding:7px 4px; text-align:center;
  font-size:10.5px; font-weight:800; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.05em;
}
.ld-count b{display:block; font-family:var(--f-display); font-size:21px; color:var(--ink); letter-spacing:0; font-variant-numeric:tabular-nums}
.ld-live-none{font-size:14px; font-weight:700; line-height:1.5; margin-bottom:12px}

/* facebook */
.ld-fb{display:flex; gap:11px; align-items:flex-start; transition:transform .12s ease}
.ld-fb:hover{transform:translateX(2px)}
.ld-fb .ld-frame{width:56px; height:56px; flex:none; border-radius:var(--r-sm)}
.ld-fb-b{min-width:0}
.ld-fb-when{display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:3px}
.ld-fb-txt{font-size:13.5px; font-weight:700; line-height:1.35}
.ld-fb-note{display:block; margin-top:11px; padding-top:10px; border-top:2px dashed rgba(47,47,47,.16); font-size:11.5px; font-weight:700; color:var(--ink-2)}

/* category list */
.ld-catlist li + li{margin-top:7px}
.ld-catlist a{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--cream); border:var(--outline-thin); border-radius:var(--r-sm); padding:8px 12px; font-weight:800; font-size:14px; transition:background .12s ease}
.ld-catlist a:hover{background:var(--sky)}
.ld-catlist b{font-size:12px; color:var(--ink-2)}

/* mini finds */
.ld-minifinds li + li{margin-top:9px}
.ld-minifinds a{display:flex; align-items:center; gap:10px; transition:transform .12s ease}
.ld-minifinds a:hover{transform:translateX(2px)}
.ld-minifinds .ld-frame{width:52px; height:52px; flex:none; border-radius:var(--r-sm)}
.ld-mini-t{font-size:13.5px; font-weight:800; line-height:1.25}
.ld-mini-t em{display:block; font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink-2); margin-top:2px}

/* mini board */
.ld-miniboard li + li{margin-top:8px}
.ld-mrow{display:flex; align-items:center; justify-content:space-between; gap:10px; border:var(--outline-thin); border-radius:var(--r-sm); padding:9px 13px; font-weight:800; font-size:14px; box-shadow:2px 2px 0 #2F2F2F; transition:transform .12s ease, box-shadow .12s ease}
.ld-mrow:hover{transform:translate(1px,1px); box-shadow:1px 1px 0 #2F2F2F}
.ld-mrow--1{background:var(--yellow)}
.ld-mrow--2{background:var(--pink)}
.ld-mrow--3{background:var(--sky)}
.ld-mrow--4{background:var(--mint)}

/* table of contents */
.ld-toc li + li{margin-top:3px}
.ld-toc a{display:block; padding:7px 11px; border-radius:9px; font-weight:700; font-size:13.5px; color:var(--ink-2); border-left:3px solid transparent; transition:background .12s ease, color .12s ease}
.ld-toc a:hover{background:var(--cream); color:var(--ink)}
.ld-toc a.is-on{background:var(--cream); color:var(--ink); border-left-color:var(--yellow)}

/* In-prose contents block, used on the legal and guide pages (the sidebar version
   above lives inside .ld-w, which supplies the card; this one has to draw its own). */
.ld-prose > .ld-toc{
  background:var(--white); border:var(--outline-thin); border-radius:var(--r-md);
  padding:16px 14px; margin:0 0 30px;
}
.ld-prose > .ld-toc ul{list-style:none; margin:0; padding:0}
.ld-prose > .ld-toc .ld-w-h{font-size:13px}
/* .ld-prose a:not(.ld-btn) underlines every link; the contents list is navigation,
   not prose, so it needs one more class to win the cascade. */
.ld-prose > .ld-toc a:not(.ld-btn){box-shadow:none; font-weight:700}
.ld-prose > .ld-toc a:not(.ld-btn):hover{box-shadow:none; background:var(--cream); color:var(--ink)}
.ld-prose > ul.ld-olist{list-style:none; padding-left:0}
.ld-prose > ul.ld-olist li{counter-increment:none; padding-left:26px}
.ld-prose > ul.ld-olist li::before{
  content:""; width:9px; height:9px; top:9px; left:4px; border-radius:50%;
  background:var(--sky); border:var(--outline-thin);
}
.ld-prose .ld-callout ul.ld-olist{margin-top:10px}

/* Count line above an archive grid. */
.ld-tally{font-size:14px; font-weight:700; color:var(--ink-2); margin-bottom:14px}

/* ------------------------------------------------------- 8. Journal */
.ld-feat{
  display:grid; grid-template-columns:.85fr 1.15fr;
  background:var(--white); border:var(--outline); border-radius:var(--r-lg);
  box-shadow:var(--hard); position:relative; margin-bottom:18px;
  transition:transform .14s ease, box-shadow .14s ease;
}
.ld-feat:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 #2F2F2F}
.ld-feat .ld-frame{border:0; border-right:var(--outline); border-radius:15px 0 0 15px}
.ld-feat-body{padding:22px; display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.ld-feat-body h2{font-size:clamp(20px,2.4vw,27px)}
.ld-feat-body > p{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.ld-read{margin-top:auto; font-weight:800; font-size:14px}

.ld-pcard{
  background:var(--white); border:var(--outline); border-radius:var(--r-lg);
  padding:13px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  box-shadow:var(--hard);
  transition:transform .14s ease, box-shadow .14s ease;
}
.ld-pcard:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 #2F2F2F}
.ld-pcard .ld-frame{width:100%; border-radius:11px}
.ld-pcard h3{font-size:16.5px; line-height:1.22}
.ld-pcard > p{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.ld-pcard .ld-byline{margin-top:auto}

.ld-pager{display:flex; gap:9px; align-items:center; margin-top:22px; flex-wrap:wrap}
.ld-page{
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 13px;
  background:var(--white); border:var(--outline); border-radius:11px;
  font-family:var(--f-display); font-weight:700; font-size:15px;
  box-shadow:2px 2px 0 #2F2F2F;
}
.ld-page[aria-current="page"]{background:var(--yellow)}
.ld-page-gap{display:grid; place-items:center; min-width:24px; height:40px; font-weight:800; color:var(--ink-2)}
.ld-page--next{margin-left:auto}

/* article */
.ld-article{background:var(--white); border:var(--outline); border-radius:var(--r-xl); padding:clamp(20px,3.2vw,40px); box-shadow:var(--hard)}
.ld-art-head{display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding-bottom:20px; border-bottom:2px dashed rgba(47,47,47,.2)}
.ld-art-head h1{font-size:clamp(27px,3.8vw,42px); line-height:1.06}
.ld-standfirst{font-size:17px; line-height:1.55; color:var(--ink-2); max-width:58ch}
.ld-art-meta{display:flex; align-items:center; gap:11px; font-size:13.5px}
.ld-avatar{width:40px; height:40px; border-radius:50%; background:var(--yellow); border:var(--outline-thin); display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:18px; flex:none}
.ld-art-meta b{display:block; font-weight:800; font-size:14.5px}
.ld-art-meta span{color:var(--ink-2); font-weight:700; font-size:12.5px}

figure{margin:0}
.ld-fig{margin-top:22px}
.ld-fig .ld-frame{border:var(--outline)}
.ld-fig figcaption{font-size:12.5px; font-weight:700; color:var(--ink-2); margin-top:8px}

.ld-prose{margin-top:24px; max-width:66ch}
.ld-prose > p{font-size:17px; line-height:1.68; margin-bottom:17px}
.ld-prose h2{font-size:clamp(21px,2.4vw,26px); margin:28px 0 12px; scroll-margin-top:110px}
.ld-prose em{font-style:italic}
.ld-prose a:not(.ld-btn){box-shadow:inset 0 -3px 0 var(--sky); font-weight:700}
.ld-prose a:not(.ld-btn):hover{box-shadow:inset 0 -6px 0 var(--sky)}

.ld-callout{background:var(--sky); border:var(--outline); border-radius:15px; padding:18px 20px; margin:24px 0; box-shadow:var(--hard)}
.ld-callout-t{display:inline-block; font-family:var(--f-display); font-weight:800; font-size:13px; background:var(--white); border:var(--outline-thin); border-radius:999px; padding:2px 12px; margin-bottom:9px}
.ld-callout p{font-size:15.5px; line-height:1.6}

.ld-olist{counter-reset:ld-ol; display:flex; flex-direction:column; gap:12px; margin:18px 0 22px}
.ld-olist li{counter-increment:ld-ol; position:relative; padding-left:42px; font-size:16px; line-height:1.6}
.ld-olist li::before{
  content:counter(ld-ol); position:absolute; left:0; top:1px;
  width:29px; height:29px; background:var(--yellow);
  border:var(--outline-thin); border-radius:9px;
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:15px;
}
.ld-olist b{font-weight:800}

.ld-quote{margin:26px 0; padding:20px 24px; background:var(--cream); border:var(--outline); border-radius:15px; font-family:var(--f-hand); font-size:26px; line-height:1.35; text-align:center; box-shadow:var(--hard)}

.ld-imgpair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0}
.ld-imgpair .ld-frame{border:var(--outline)}
.ld-imgpair figcaption{font-size:12.5px; font-weight:700; color:var(--ink-2); margin-top:8px}

.ld-signoff{font-family:var(--f-hand); font-size:24px; color:var(--ink-2)}

.ld-tags,.ld-share{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:24px; padding-top:18px; border-top:2px dashed rgba(47,47,47,.2); font-size:13px; font-weight:800; color:var(--ink-2)}
.ld-tags a,.ld-share a{background:var(--cream); border:var(--outline-thin); border-radius:999px; padding:4px 13px; font-size:13px; font-weight:800; color:var(--ink)}
.ld-tags a:hover{background:var(--yellow)}
.ld-share a:hover{background:var(--sky)}

.ld-prevnext{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.ld-pn{background:var(--cream); border:var(--outline); border-radius:var(--r-md); padding:15px 17px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--hard-sm); transition:transform .12s ease, box-shadow .12s ease}
.ld-pn:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 #2F2F2F}
.ld-pn span{font-size:12px; font-weight:800; color:var(--ink-2)}
.ld-pn b{font-family:var(--f-display); font-weight:700; font-size:15.5px; line-height:1.22}
.ld-pn--right{text-align:right}

.ld-related{margin-top:30px}

/* ---------------------------------------------------------- 9. Finds */
.ld-filters{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.ld-sort{display:flex; align-items:center; gap:9px; font-weight:800; font-size:13.5px; color:var(--ink-2)}
.ld-sort select{font-family:inherit; font-weight:700; font-size:13.5px; background:var(--white); border:var(--outline-thin); border-radius:var(--r-sm); padding:7px 11px; color:var(--ink)}

.ld-item{
  background:var(--white); border:var(--outline); border-radius:var(--r-lg);
  padding:12px; display:flex; flex-direction:column; gap:7px; align-items:flex-start;
  box-shadow:var(--hard);
  transition:transform .14s ease, box-shadow .14s ease;
}
.ld-item:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 #2F2F2F}
.ld-item .ld-frame{width:100%; border-radius:11px}
.ld-item h3{font-size:15px; line-height:1.24}
.ld-item-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.ld-price{font-family:var(--f-display); font-weight:800; font-size:17px}
.ld-cond{font-size:11.5px; font-weight:800; color:var(--ink-2); background:var(--cream); border:2px solid rgba(47,47,47,.2); border-radius:999px; padding:1px 9px}
.ld-item-go{margin-top:auto; font-weight:800; font-size:13px; color:var(--ink-2)}
.ld-item:hover .ld-item-go{color:var(--ink)}

.ld-src{
  position:absolute; top:7px; right:7px; z-index:2;
  border:var(--outline-thin); border-radius:999px;
  padding:2px 10px; font-size:11px; font-weight:800; color:var(--ink);
}
.ld-src--ebay{background:var(--sky)}
.ld-src--live{background:var(--pink)}
.ld-src--soon{background:var(--mint)}
.ld-src--static{position:static; display:inline-block}

.ld-loadmore{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px}
.ld-empty{background:var(--white); border:var(--outline); border-radius:var(--r-lg); padding:34px 24px; text-align:center; box-shadow:var(--hard)}
.ld-empty h3{font-size:20px; margin-bottom:8px}
.ld-empty p{font-size:15px; color:var(--ink-2)}

.ld-srcnote{background:var(--white); border:var(--outline); border-radius:var(--r-lg); padding:24px; margin-top:32px; box-shadow:var(--hard)}
.ld-srcnote h2{font-size:clamp(20px,2.3vw,25px); margin-bottom:16px}
.ld-srcgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.ld-srcgrid > div{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.ld-srcgrid p{font-size:14px; line-height:1.55; color:var(--ink-2)}

/* single item */
.ld-item-detail{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
.ld-gallery{display:flex; flex-direction:column; gap:12px}
.ld-gallery .ld-frame{border:var(--outline)}
.ld-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.ld-thumbs .ld-frame{border:var(--outline-thin); cursor:pointer}
.ld-buy{background:var(--white); border:var(--outline); border-radius:var(--r-lg); padding:24px; box-shadow:var(--hard)}
.ld-buy h1{font-size:clamp(23px,2.9vw,31px); margin-bottom:12px}
.ld-buy-price{font-family:var(--f-display); font-weight:800; font-size:34px; line-height:1}
.ld-buy-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.ld-specs{margin:18px 0; border-top:2px dashed rgba(47,47,47,.2)}
.ld-specs div{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:2px dashed rgba(47,47,47,.16); font-size:14.5px}
.ld-specs dt{font-weight:800; color:var(--ink-2); margin:0}
.ld-specs dd{margin:0; font-weight:700; text-align:right}
.ld-buy-note{font-size:13px; font-weight:700; color:var(--ink-2); margin-top:12px; line-height:1.5}

/* ---------------------------------------------------------- 10. About */
.ld-ahero{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; padding-block:40px 34px; position:relative}
.ld-ahero h1{font-size:clamp(31px,4.4vw,52px); line-height:1.03; margin-top:15px}
.ld-ahero > div > p{margin-top:14px; font-size:17px; max-width:40ch; line-height:1.56}
.ld-ahero img{width:clamp(150px,20vw,250px); margin-inline:auto; transform:rotate(3deg)}

.ld-story{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start}
.ld-story-main h2{font-size:clamp(22px,2.7vw,29px); margin-bottom:12px}
.ld-story-main h2 + p{margin-bottom:15px}
.ld-story-main > p{font-size:17px; line-height:1.66; margin-bottom:15px; max-width:64ch}
.ld-story-main > h2 ~ h2{margin-top:26px}
.ld-story-side{display:flex; flex-direction:column; gap:14px}

.ld-factcard{background:var(--white); border:var(--outline); border-radius:var(--r-lg); padding:19px; box-shadow:var(--hard)}
.ld-factcard h3{font-size:18px; margin-bottom:13px}
.ld-facts li{display:flex; flex-direction:column; gap:1px; padding:9px 0; border-bottom:2px dashed rgba(47,47,47,.16)}
.ld-facts li:last-child{border-bottom:0; padding-bottom:0}
.ld-facts b{font-family:var(--f-display); font-weight:700; font-size:14px; color:var(--ink-2)}
.ld-facts span{font-size:15px; font-weight:700}

.ld-step{background:var(--white); border:var(--outline); border-radius:var(--r-lg); padding:20px; box-shadow:var(--hard); display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.ld-stepn{width:34px; height:34px; background:var(--yellow); border:var(--outline-thin); border-radius:11px; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:17px}
.ld-step h3{font-size:18px}
.ld-step p{font-size:14.5px; line-height:1.55; color:var(--ink-2)}

.ld-endcta{background:var(--yellow); border:var(--outline); border-radius:var(--r-xl); padding:36px 26px; margin-top:44px; text-align:center; box-shadow:var(--hard-lg)}
.ld-endcta img{width:clamp(190px,26vw,300px); margin:0 auto 16px}
.ld-endcta h2{font-size:clamp(24px,2.9vw,33px)}
.ld-endcta > p{margin:12px auto 0; font-size:16.5px; line-height:1.55; max-width:46ch}

/* ----------------------------------------------------- 11. Links board */
.ld-board{max-width:560px; margin-inline:auto; text-align:center; padding-block:34px 46px}
.ld-board-logo{width:clamp(210px,42vw,300px); margin:0 auto 18px}
.ld-board-h1{font-size:clamp(22px,3vw,28px); margin-bottom:6px}
.ld-board > p{font-size:16.5px; line-height:1.55; margin-bottom:8px}
.ld-board-handle{display:inline-block; font-family:var(--f-display); font-weight:800; font-size:18px; background:var(--white); border:var(--outline); border-radius:999px; padding:5px 18px; box-shadow:var(--hard-sm); margin-bottom:22px}
.ld-board-handle:hover{background:var(--yellow)}
.ld-stack{display:flex; flex-direction:column; gap:11px; text-align:left}
.ld-row{
  display:flex; align-items:center; gap:12px;
  border:var(--outline); border-radius:var(--r-md);
  padding:14px 16px;
  font-weight:800; font-size:15.5px;
  box-shadow:var(--hard);
  transition:transform .12s ease, box-shadow .12s ease;
}
.ld-row:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 #2F2F2F}
.ld-row-ico{width:30px; height:30px; border-radius:9px; background:rgba(47,47,47,.12); display:grid; place-items:center; flex:none}
.ld-row-ico svg{width:16px; height:16px}
.ld-row-lab{flex:1; min-width:0}
.ld-row-lab em{display:block; font-style:normal; font-size:12px; font-weight:700; color:var(--ink-2); margin-top:2px}
.ld-row-go{font-size:13px; font-weight:800; color:var(--ink-2); flex:none}
.ld-row--1{background:var(--yellow); transform:rotate(-.6deg)}
.ld-row--2{background:var(--pink); transform:rotate(.5deg)}
.ld-row--3{background:var(--sky); transform:rotate(-.4deg)}
.ld-row--4{background:var(--mint); transform:rotate(.6deg)}
.ld-row--5{background:var(--white); transform:rotate(-.5deg)}
.ld-row--6{background:var(--tint-yellow); transform:rotate(.4deg)}
.ld-row:hover{transform:translate(2px,2px) rotate(0deg)}
.ld-board-foot{margin-top:24px; font-size:13.5px; font-weight:700; color:var(--ink-2); line-height:1.5}

/* -------------------------------------------- 12. Contact, search, 404 */
.ld-form{background:var(--white); border:var(--outline); border-radius:var(--r-xl); padding:clamp(20px,3vw,32px); box-shadow:var(--hard)}
.ld-field{display:block; margin-bottom:16px}
.ld-field > span{display:block; font-family:var(--f-display); font-weight:700; font-size:15px; margin-bottom:6px}
.ld-field input,.ld-field textarea,.ld-field select{
  width:100%; border:var(--outline-thin); border-radius:11px;
  padding:11px 13px;
  font-family:inherit; font-size:15.5px; font-weight:600;
  background:var(--cream); color:var(--ink);
}
.ld-field textarea{min-height:150px; resize:vertical}
.ld-field input:focus,.ld-field textarea:focus,.ld-field select:focus{outline:none; background:var(--white); box-shadow:0 0 0 3px rgba(247,216,90,.55)}
.ld-field-hint{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-top:5px}
.ld-hp{position:absolute; left:-9999px}
.ld-check{display:flex; gap:10px; align-items:flex-start; margin-bottom:18px; font-size:14.5px; font-weight:600; line-height:1.5; cursor:pointer}
.ld-check input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--ink)}
.ld-field > span em{font-style:normal; font-weight:600; font-size:13px; color:var(--ink-2)}
.ld-formstatus{
  margin-top:14px; padding:12px 15px;
  border:var(--outline-thin); border-radius:var(--r-sm);
  background:var(--mint); font-size:14.5px; font-weight:700; line-height:1.5;
}
.ld-formstatus[data-ok="0"]{background:var(--pink)}
.ld-formnote{font-size:13.5px; font-weight:700; color:var(--ink-2); margin-top:14px; line-height:1.5}

.ld-contact-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start}
.ld-faq{border-top:var(--outline-thin)}
.ld-faq details{border-bottom:var(--outline-thin); padding:4px 0}
.ld-faq summary{display:flex; justify-content:space-between; gap:14px; align-items:center; cursor:pointer; padding:14px 2px; font-family:var(--f-display); font-weight:700; font-size:17px; list-style:none}
.ld-faq summary::-webkit-details-marker{display:none}
.ld-faq summary::after{content:"+"; font-size:22px; font-weight:800; color:var(--ink-2); flex:none; line-height:1}
.ld-faq details[open] summary::after{content:"–"}
.ld-faq p{padding:0 2px 16px; font-size:15.5px; line-height:1.62; color:var(--ink-2); max-width:64ch}

.ld-searchbig{display:flex; gap:11px; max-width:560px; margin:0 auto 8px; flex-wrap:wrap}
.ld-searchbig input{flex:1; min-width:200px; border:var(--outline); border-radius:999px; padding:13px 20px; font-family:inherit; font-size:16px; font-weight:600; background:var(--white); color:var(--ink); box-shadow:var(--hard-sm)}
.ld-searchbig input:focus{outline:none; box-shadow:var(--hard)}
.ld-results{display:flex; flex-direction:column; gap:12px; max-width:760px; margin-inline:auto}
.ld-result{background:var(--white); border:var(--outline); border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--hard-sm); display:flex; flex-direction:column; gap:5px; transition:transform .12s ease, box-shadow .12s ease}
.ld-result:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 #2F2F2F}
.ld-result-kind{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2)}
.ld-result h3{font-size:18px}
.ld-result p{font-size:14.5px; color:var(--ink-2); line-height:1.5}

.ld-404{text-align:center; padding-block:50px 60px; position:relative}
.ld-404 img{width:clamp(150px,22vw,220px); margin:0 auto 20px; transform:rotate(-4deg)}
.ld-404 h1{font-size:clamp(34px,6vw,62px)}
.ld-404 > p{margin:14px auto 0; font-size:17px; max-width:48ch; line-height:1.56}
.ld-404-links{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:760px; margin:30px auto 0}
.ld-404-links a{background:var(--white); border:var(--outline); border-radius:var(--r-md); padding:16px 12px; font-family:var(--f-display); font-weight:700; font-size:16px; box-shadow:var(--hard-sm); transition:transform .12s ease, box-shadow .12s ease}
.ld-404-links a:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 #2F2F2F}

/* home-only bits */
.ld-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; padding-block:44px 50px; position:relative}
.ld-hero h1{font-size:clamp(34px,5vw,54px); line-height:1.02; margin-top:16px}
.ld-hero-copy > p{margin-top:14px; font-size:16.5px; max-width:38ch; line-height:1.56}
.ld-hero-copy > p em{font-style:italic; font-weight:800}
.ld-hero-side{position:relative; display:flex; flex-direction:column; align-items:center}
.ld-hero-duck{width:clamp(130px,16vw,190px); margin-bottom:-26px; position:relative; z-index:2; transform:rotate(3deg)}
.ld-hero-board{background:var(--white); border:var(--outline); border-radius:var(--r-xl); padding:20px 18px 18px; box-shadow:var(--hard-lg); width:100%}
.ld-hero-board h2{font-size:19px; text-align:center; margin-bottom:14px}
.ld-strip{background:var(--sky); border-block:var(--outline); padding:14px 0}
.ld-strip-in{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; gap:12px 26px; justify-content:center; flex-wrap:wrap; font-weight:800; font-size:14.5px}

/* ------------------------------------------------------ 13. Responsive */
@media (max-width:1000px){
  .ld-navlinks{gap:24px; font-size:16px}
  .ld-with-side,.ld-contact-grid{grid-template-columns:1fr}
  .ld-side{position:static}
  .ld-grid-4{grid-template-columns:repeat(3,1fr)}
  .ld-story{grid-template-columns:1fr}
}

@media (max-width:820px){
  :root{--gutter:18px}
  .ld-navlinks,.ld-nav > .ld-btn{display:none}
  .ld-burger{display:flex}
  .ld-brand img{height:46px}
  .ld-brand-name{font-size:19px}
  .ld-brand-sub{font-size:12px; letter-spacing:.18em}
  .ld-grid-3,.ld-grid-4{grid-template-columns:repeat(2,1fr)}
  .ld-hero,.ld-ahero,.ld-item-detail{grid-template-columns:1fr}
  .ld-ahero img{order:-1; width:160px}
  .ld-feat{grid-template-columns:1fr}
  .ld-feat .ld-frame{border-right:0; border-bottom:var(--outline); border-radius:15px 15px 0 0; aspect-ratio:16/10}
  .ld-feat-body{padding:18px}
  .ld-srcgrid,.ld-imgpair,.ld-prevnext{grid-template-columns:1fr}
  .ld-pn--right{text-align:left}
  .ld-404-links{grid-template-columns:repeat(2,1fr)}
  .ld-footer{margin-top:48px}
  .ld-footer-top{grid-template-columns:1fr; gap:20px; align-items:start}
  .ld-footer-logo img{max-width:220px}
  .ld-footer-nav{grid-template-columns:1fr; gap:22px; margin-top:22px}
  .ld-section{padding-block:34px}
}

@media (max-width:560px){
  .ld-grid-2,.ld-grid-3{grid-template-columns:1fr}
  .ld-grid-4{grid-template-columns:repeat(2,1fr)}
  .ld-thumbs{grid-template-columns:repeat(4,1fr)}
  .ld-article{padding:20px}
  .ld-prose > p{font-size:16px}
  .ld-count > span{padding:6px 2px}
  .ld-count b{font-size:18px}
}

@media print{
  .ld-header,.ld-side,.ld-footer,.ld-burger,.ld-drawer{display:none!important}
  body{background:#fff}
  .ld-article{border:0; box-shadow:none; padding:0}
}