/* Pinboard: a sample design from Brad's mockup library, rewritten by
   scripts/import-designs.py. Do not edit; re-run that instead. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-normal-75a8b2e2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-normal-75a8b2e2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-mono-normal-3b1fc037.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-normal-54dbf8a8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-sans-normal-54dbf8a8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/dm-sans-normal-54dbf8a8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; margin:0; font-weight:inherit; }
p { text-wrap:pretty; margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
dl, dd { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
[hidden] { display:none !important; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Headers placed over a photo sit within .page, not the window, so anything a host adds above
   the page (the Shift & Shine sample bar) pushes them down instead of hiding under them. */
.page { position:relative; overflow-x:clip; }
.skip { position:absolute; left:12px; top:12px; z-index:100; padding:10px 14px; background:#fff; color:#111; }
.skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js-reveal [data-reveal]:not(.in) { opacity:0; transform:translateY(28px); }
[data-reveal] { transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.demo-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.demo-form .field { display:grid; gap:6px; min-width:0; }
.demo-form .wide { grid-column:1 / -1; }
.demo-form input, .demo-form select, .demo-form textarea { font:inherit; width:100%; min-width:0; }
@media (max-width:640px) { .demo-form { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

:root { --cobalt:#2134C4; --cream:#FFF4E0; --paper:#FFF8EC; --ink:#1B1A3A; --pink:#FF9CC5; --yellow:#FFD23F; --muted:#4F4D6B; --line:#E7DCC8; }
body { background:var(--paper); color:var(--ink); font:400 16.5px/1.6 "DM Sans", system-ui, sans-serif; }
a:focus-visible, button:focus-visible, input:focus-visible + span, select:focus-visible, textarea:focus-visible, input:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
h1, h2, h3 { font-family:"Bricolage Grotesque", sans-serif; }
.hd { position:absolute; top:0; left:0; right:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px clamp(16px, 3vw, 40px); color:var(--cream); }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 20px/1 "Bricolage Grotesque", sans-serif; }
.hen { width:38px; height:38px; }
.hen .disc { fill:var(--cream); }
.hen .dots circle { fill:var(--cobalt); }
.hd ul { display:flex; gap:6px; }
.hd nav a { display:block; padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:500; }
.hd nav a:hover { background:rgba(255,244,224,.16); }
.bag { padding:9px 16px; border-radius:999px; background:var(--cream); color:var(--cobalt); text-decoration:none; font-weight:700; }
.desk-wrap { background:var(--cobalt); color:var(--cream); padding:0 0 32px; }
.desk { position:relative; height:min(92svh, 860px); min-height:620px; overflow:hidden; }
.desk h1 { position:absolute; left:0; right:0; top:50%; transform:translateY(-58%); text-align:center; font-weight:800; font-size:clamp(80px, 14.2vw, 250px); line-height:.9; letter-spacing:-.055em; white-space:nowrap; pointer-events:none; }
.desk h1 span { display:inline; }
.desk h1 span + span { margin-left:.18em; }
.desk h1 span + span { color:var(--pink); }
.sticker { position:absolute; right:clamp(16px, 4vw, 70px); top:120px; z-index:7; width:126px; height:126px; border-radius:50%; background:var(--yellow); color:var(--ink); display:grid; place-items:center; text-align:center; font:800 17px/1.05 "Bricolage Grotesque", sans-serif; transform:rotate(12deg); padding:14px; box-shadow:0 6px 0 rgba(0,0,0,.18); }
.pins { position:absolute; inset:0; }
.pin { position:absolute; padding:10px 10px 34px; background:#fff; border:0; color:var(--ink); transform:translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r)); box-shadow:0 14px 30px rgba(10,14,60,.35); touch-action:none; cursor:grab; transition:box-shadow .2s, left .7s cubic-bezier(.3,.8,.2,1), top .7s cubic-bezier(.3,.8,.2,1), transform .7s cubic-bezier(.3,.8,.2,1); }
.pin.drag { cursor:grabbing; box-shadow:0 30px 60px rgba(10,14,60,.45); transition:box-shadow .2s; }
.pin img { width:100%; aspect-ratio:4/5; object-fit:cover; pointer-events:none; }
.pin .lab { position:absolute; left:10px; right:10px; bottom:8px; font:500 13px/1.2 "DM Mono", monospace; text-align:left; }
.tape { position:absolute; left:50%; top:-10px; width:64px; height:20px; transform:translateX(-50%) rotate(-3deg); background:rgba(255,210,63,.75); }
.p0 { left:3%; top:12%; width:13%; --r:-7deg; }
.p1 { left:35%; top:10%; width:10%; --r:-4deg; }
.p2 { left:63%; top:11%; width:12%; --r:6deg; }
.p3 { left:7%; top:60%; width:13%; --r:5deg; }
.p4 { left:29%; top:64%; width:12%; --r:-3deg; }
.p5 { left:55%; top:61%; width:13%; --r:8deg; }
.p6 { left:80%; top:57%; width:13%; --r:-4deg; }

.desk-foot { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; gap:16px 32px; align-items:end; padding:0 clamp(16px, 3vw, 40px); }
.tag { font:500 13.5px/1.4 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.06em; }
.intro { font-size:18px; max-width:34em; }
.desk-ctl { display:grid; gap:8px; justify-items:end; }
.tidy { padding:12px 20px; border-radius:999px; border:2px solid var(--cream); background:transparent; color:var(--cream); font-weight:700; }
.tidy[aria-pressed="true"], .tidy:hover { background:var(--cream); color:var(--cobalt); }
.hint { font-size:13px; opacity:.85; max-width:20em; text-align:right; }
.ticker { position:relative; display:flex; align-items:center; background:var(--pink); color:var(--ink); border-block:2px solid var(--ink); overflow:hidden; }
.tk { display:flex; gap:28px; padding:16px 0; white-space:nowrap; animation:tk 34s linear infinite; font:800 clamp(24px, 3vw, 40px)/1 "Bricolage Grotesque", sans-serif; }
.ticker.paused .tk { animation-play-state:paused; }
@keyframes tk { to { transform:translateX(-50%); } }
.tk-btn { position:absolute; right:10px; border:2px solid var(--ink); background:var(--pink); border-radius:999px; padding:6px 12px; font-weight:700; font-size:13px; }
section { padding:clamp(70px, 8vw, 120px) clamp(16px, 3vw, 40px); }
.sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:18px; margin-bottom:32px; }
.sec-head h2, .commission h2 { font-weight:800; font-size:clamp(46px, 6.4vw, 104px); line-height:.9; letter-spacing:-.04em; }
.sec-head p { max-width:28em; color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filters button { padding:10px 18px; border-radius:999px; border:2px solid var(--ink); background:transparent; font-weight:700; }
.filters button[aria-pressed="true"] { background:var(--ink); color:var(--cream); }
.wall { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:clamp(180px, 18vw, 260px); grid-auto-flow:dense; gap:18px; }
.w { display:flex; flex-direction:column; gap:6px; min-height:0; }
.w.tall { grid-row:span 2; }
.w.wide { grid-column:span 2; }
.w figure { position:relative; flex:1; min-height:0; border-radius:14px; overflow:hidden; border:2px solid var(--ink); }
.w img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.w:hover img { transform:scale(1.05) rotate(-1deg); }
.stk { position:absolute; left:10px; top:10px; padding:5px 10px; border-radius:999px; background:var(--yellow); font:700 12.5px/1 "DM Mono", monospace; transform:rotate(-4deg); border:2px solid var(--ink); }
.w h3 { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.w p { font-size:14.5px; color:var(--muted); margin-top:-4px; }
.w-link { font-weight:700; color:var(--cobalt); font-size:14.5px; width:max-content; }
.shop { background:var(--cream); border-block:2px solid var(--ink); }
.prods { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
.prod { display:grid; gap:14px; align-content:start; }
.pf { padding:22px; border-radius:16px; border:2px solid var(--ink); }
.pf0 { background:var(--yellow); } .pf1 { background:var(--pink); } .pf2 { background:#BFE3CF; } .pf3 { background:#B9C3FF; }
.pf img { aspect-ratio:4/5; width:100%; object-fit:cover; border:8px solid #fff; transform:rotate(-2deg); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.prod:nth-child(even) .pf img { transform:rotate(2deg); }
.pd { display:grid; gap:10px; }
.pd h3 { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.inks { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); }
.ink { width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); }
.inks span { margin-left:6px; }
.ink-yellowhour-0 { background:#F5C61B; }
.ink-yellowhour-1 { background:#1B1B3A; }
.ink-handbill-0 { background:#E8452C; }
.ink-handbill-1 { background:#1B1B3A; }
.ink-herbariumno3-0 { background:#2F6B4F; }
.ink-herbariumno3-1 { background:#F29BB8; }
.ink-postcardset-0 { background:#2338C9; }
.ink-postcardset-1 { background:#F29BB8; }
.ink-postcardset-2 { background:#F5C61B; }

.sizes { display:flex; gap:6px; flex-wrap:wrap; }
.sizes label { position:relative; }
.sizes input { position:absolute; opacity:0; }
.sizes span { display:block; padding:7px 13px; border-radius:999px; border:2px solid var(--ink); font-size:14px; font-weight:700; cursor:pointer; }
.sizes input:checked + span { background:var(--ink); color:var(--cream); }
.price { font:700 18px "DM Mono", monospace; }
.add { justify-self:start; padding:12px 20px; border-radius:999px; border:2px solid var(--ink); background:var(--cobalt); color:var(--cream); font-weight:700; }
.add:hover { background:var(--ink); }
.bag-out { margin-top:20px; min-height:1.5em; font-weight:700; color:var(--cobalt); }
.steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; counter-reset:s; }
.steps li { position:relative; display:grid; gap:10px; align-content:start; }
.steps figure { border-radius:50% 50% 16px 16px; overflow:hidden; border:2px solid var(--ink); }
.steps img { aspect-ratio:3/4; width:100%; object-fit:cover; }
.num { position:absolute; top:-14px; left:-6px; width:52px; height:52px; border-radius:50%; background:var(--cobalt); color:var(--cream); display:grid; place-items:center; font:800 24px/1 "Bricolage Grotesque", sans-serif; border:2px solid var(--ink); }
.steps h3 { font-size:24px; font-weight:800; }
.steps p { color:var(--muted); }
.commission { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px, 5vw, 80px); background:var(--cobalt); color:var(--cream); }
.commission p { margin-top:16px; font-size:18px; max-width:28em; }
.commission a { color:var(--cream); font-weight:700; font-size:22px; }
.demo-form label { font-weight:700; font-size:14.5px; }
.demo-form input, .demo-form select, .demo-form textarea { padding:13px 14px; border:2px solid var(--cream); border-radius:12px; background:rgba(255,244,224,.08); color:var(--cream); }
.demo-form select option { color:var(--ink); }
.demo-form button { justify-self:start; padding:14px 24px; border-radius:999px; border:2px solid var(--ink); background:var(--pink); color:var(--ink); font-weight:800; font-size:16px; }
.form-out { color:var(--yellow); min-height:1.4em; font-weight:700; }
.ft { background:var(--ink); color:var(--cream); padding:30px clamp(16px, 3vw, 40px) 26px; overflow:hidden; }
.ft .big { font:800 clamp(56px, 14vw, 230px)/.85 "Bricolage Grotesque", sans-serif; letter-spacing:-.05em; color:var(--pink); white-space:nowrap; }
.ft div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:16px; font-size:14px; }
.ft a { color:var(--cream); }
@media (max-width:1000px) { .hd nav { display:none; } .wall { grid-template-columns:repeat(2, minmax(0,1fr)); } .prods, .steps { grid-template-columns:repeat(2, minmax(0,1fr)); } .commission { grid-template-columns:1fr; } .desk-foot { grid-template-columns:1fr; } .desk-ctl { justify-items:start; } .hint { text-align:left; } }
@media (max-width:700px) {
  .desk { height:auto; min-height:0; padding:92px 0 0; }
  .desk h1 { position:relative; top:auto; transform:none; font-size:20vw; white-space:normal; line-height:.86; }
  .desk h1 span { display:block; } .desk h1 span + span { margin-left:0; }
  .sticker { position:relative; top:auto; right:auto; width:104px; height:104px; font-size:14px; margin:14px auto -10px; }
  .pins { position:relative; display:flex; gap:14px; overflow-x:auto; padding:30px 16px 26px; scroll-snap-type:x mandatory; }
  .pin { position:relative; left:auto !important; top:auto !important; flex:0 0 58vw; width:auto !important; scroll-snap-align:center; touch-action:auto; transform:rotate(var(--r)); cursor:default; }
  .desk-ctl { display:none; }
  .wall { grid-template-columns:1fr; grid-auto-rows:auto; }
  .w.tall, .w.wide { grid-row:auto; grid-column:auto; }
  .w figure { flex:none; aspect-ratio:4/3; }
  .prods, .steps { grid-template-columns:1fr; }
  .tk-btn { position:static; margin-right:10px; flex:none; }
}


/* ---------- Shift & Shine sample bar (scripts/import-designs.py) ---------- */
@font-face { font-family: "SSD Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
:root { --ssd-bar: 53px; scroll-padding-top: var(--ssd-bar); }
.ssd-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px 14px; margin: 0; padding: 8px clamp(14px, 3vw, 28px); background: #0F1B1B; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); font: 400 13.5px/20px "SSD Geist", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: left; text-transform: none; }
.ssd-bar .ssd-bar-text { flex: 1; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; max-width: none; }
.ssd-bar a { color: #FFFFFF; text-decoration: none; }
.ssd-bar .ssd-bar-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -10px; border-radius: 6px; }
.ssd-bar .ssd-bar-home svg { display: block; width: 15px; height: 16px; }
.ssd-bar .ssd-bar-back { display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font: 500 13.5px/1 "SSD Geist", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ssd-bar .ssd-bar-back:hover { background: #FFFFFF; color: #0F1B1B; }
.ssd-bar a:focus-visible { outline: 3px solid #5AD7D7; outline-offset: 2px; }
/* Fingers get the full 44px. */
@media (pointer: coarse) { .ssd-bar .ssd-bar-back { min-height: 44px; } .ssd-bar .ssd-bar-home { width: 44px; height: 44px; margin: 0 -12px 0 -14px; } }
/* Line heights in whole pixels, so the bar is too, and the sample under it
   doesn't land on half pixels. */
@media (max-width: 520px) { :root { --ssd-bar: 71px; } .ssd-bar { font-size: 12.5px; line-height: 18px; } }