/* ============================================================
   People on a Mission — v1
   "The Kept Comment" — card styling carried over unchanged from
   preview/index.html direction 1. Everything else is chrome built
   in the same language: warm paper, Courier Prime, hairlines.
   ============================================================ */

:root{
  --paper:        #F2ECE1;
  --paper-deep:   #EAE2D4;
  --card:         #FCF8F1;
  --ink:          #221E1A;
  --ink-soft:     #574F45;
  --ink-faint:    #8B8073;
  --rule:         #DED3C0;
  --terracotta:   #B4491F;
  --terracotta-l: #C9714B;
  --red:          #CE3419;
  --stamp:        #A2382B;

  --navh: 46px;

  --serif: "Newsreader", Iowan Old Style, Palatino, Georgia, serif;
  --display: "Fraunces", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --emoji: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--paper);
  /* woven paper grain, generated not downloaded */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.32'/></svg>"),
    radial-gradient(120% 80% at 50% -10%, #FBF6EC 0%, rgba(251,246,236,0) 60%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.wrap{max-width:1460px;margin:0 auto;padding:0 34px}
.skip{
  position:absolute;left:-9999px;top:0;font-family:var(--mono);font-size:12px;
  background:var(--card);border:1px solid var(--rule);padding:10px 14px;z-index:20;
}
.skip:focus{left:16px;top:16px}

/* ---------- sticky top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:12;height:var(--navh);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.topnav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(242,236,225,.93);
  -webkit-backdrop-filter:saturate(120%) blur(7px);
  backdrop-filter:saturate(120%) blur(7px);
  opacity:0;transition:opacity .25s ease;
}
body.scrolled .topnav::before{opacity:1}
body.scrolled .topnav{border-bottom-color:var(--rule)}
.topnav-inner{
  width:100%;max-width:1460px;margin:0 auto;padding:0 34px;
  display:flex;align-items:center;gap:18px;min-width:0;
}
.nav-mark{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.nav-mark:hover{color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:16px;margin-left:auto;min-width:0}
.nav-why{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:color .2s, border-color .2s;white-space:nowrap;
}
.nav-why:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.nav-hi{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .2s, border-color .2s;white-space:nowrap;
}
.nav-hi:hover{color:var(--terracotta);border-bottom-color:rgba(180,73,31,.35)}
.nav-coffee{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#FFF8F0;background:linear-gradient(135deg,var(--red) 0%,var(--terracotta) 100%);
  border-radius:100px;padding:7px 14px 6px;white-space:nowrap;line-height:1;
  box-shadow:0 1px 0 rgba(120,60,30,.18), 0 8px 18px -12px rgba(160,50,20,.9);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.nav-coffee:hover{
  transform:translateY(-1px);filter:saturate(115%);
  box-shadow:0 1px 0 rgba(120,60,30,.2), 0 12px 24px -12px rgba(160,50,20,.95);
}
.nav-coffee:active{transform:translateY(0)}
.nav-mark:focus-visible,.nav-why:focus-visible,
.nav-hi:focus-visible,.nav-coffee:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:3px;border-radius:2px;
}

/* ---------- masthead ---------- */
.masthead{padding:78px 0 0;text-align:center;position:relative}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 30px;
}
.masthead h1{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:520;font-size:clamp(40px,10.4vw,104px);line-height:.9;
  letter-spacing:-.03em;margin:0;color:var(--ink);
}
.masthead h1 .l1{display:block}
.masthead h1 .l2{display:block;font-style:italic;font-weight:420;color:var(--terracotta)}
.mast-rule{display:block;width:120px;height:1px;background:var(--rule);margin:28px auto 22px}
.tagline{
  font-family:var(--serif);font-weight:400;color:var(--ink-soft);
  font-variant-caps:small-caps;letter-spacing:.14em;
  font-size:clamp(15px,1.6vw,19px);line-height:1.4;
  margin:0 auto;max-width:none;white-space:nowrap;
}
.mast-credit{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.13em;
  font-size:clamp(11.5px,1.3vw,15px);line-height:1.75;
  color:var(--ink-soft);margin:30px auto 0;max-width:62ch;
}
.mast-credit a{
  color:var(--terracotta);border-bottom:1px solid rgba(180,73,31,.45);padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.mast-credit a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.mast-credit a:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
.flourish{
  display:block;width:78px;height:1px;background:var(--rule);margin:38px auto 0;
  position:relative;
}
.flourish::after{
  content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;margin-left:-2.5px;
  background:var(--terracotta);border-radius:50%;
}

/* ---------- the story ---------- */
.story{
  max-width:62ch;margin:40px auto 0;text-align:center;
  font-size:16.5px;line-height:1.72;color:var(--ink-soft);font-weight:350;
  scroll-margin-top:calc(var(--navh) + 18px);
}
.story h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;margin:0 0 20px;
}
.story p{margin:0 0 15px}
.story-body p:last-child{margin-bottom:0}
.story b{font-weight:600;color:var(--ink)}
.story em{font-style:italic}
.honesty{
  display:block;max-width:62ch;margin:26px auto 0;padding-top:18px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;line-height:1.85;letter-spacing:.05em;
  color:var(--ink-faint);text-align:center;
}
.honesty b{color:var(--ink-soft);font-weight:700}

/* accordion (why I built this) — the affordance has to be unmistakable */
.story summary{
  display:block;cursor:pointer;list-style:none;
  padding:4px 0 2px;border-radius:4px;
}
.story summary::-webkit-details-marker{display:none}
.story summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:8px}
.story summary h2{
  margin:0 0 12px;transition:color .2s ease;
}
.story summary h2::after{
  content:"\203A";display:inline-block;margin-left:9px;vertical-align:1px;
  font-size:14px;line-height:0;color:var(--terracotta);
  transform:rotate(90deg);transform-origin:center;
  transition:transform .25s ease;
}
.story[open] summary h2::after{transform:rotate(-90deg)}
.story summary .teaser{
  font-family:var(--serif);font-style:italic;font-weight:350;
  font-size:17.5px;line-height:1.65;color:var(--ink-soft);margin:0;
  transition:color .2s ease;
}
.story-cue{
  display:inline-block;margin-top:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);background:transparent;
  border:1px solid var(--rule);border-radius:100px;padding:6px 14px 5px;
  transition:color .2s, border-color .2s, background-color .2s;
}
.story-cue::before{content:"Read the story"}
.story[open] .story-cue::before{content:"Close"}
.story summary:hover h2{color:var(--terracotta)}
.story summary:hover .teaser{color:var(--ink)}
.story summary:hover .story-cue{
  color:#FCF8F1;background-color:var(--terracotta);border-color:var(--terracotta);
}
.story-body{margin-top:26px}

/* ---------- controls ---------- */
.controls{
  position:sticky;top:var(--navh);z-index:6;width:100%;margin:48px 0 0;padding:18px 0 14px;
}
.controls::before{
  content:"";position:absolute;inset:-1px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--paper) 0,
              var(--paper) calc(100% - 22px), rgba(242,236,225,0) 100%);
  opacity:0;transition:opacity .25s ease;
}
.controls.stuck::before{opacity:1}
.controls-inner{max-width:1460px;margin:0 auto;padding:0 34px}

.searchrow{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.search{
  flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--rule);padding-bottom:9px;
}
.search-mark{font-family:var(--mono);font-size:12px;color:var(--terracotta);letter-spacing:.1em}
.search input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--mono);font-size:14px;letter-spacing:.02em;color:var(--ink);padding:0;
}
.search input::placeholder{color:var(--ink-faint);opacity:.85}
.search input:focus-visible{outline:none}
.search:focus-within{border-bottom-color:var(--terracotta)}
.clear{
  border:0;background:transparent;cursor:pointer;padding:0 2px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);visibility:hidden;
}
.clear.on{visibility:visible}
.clear:hover{color:var(--terracotta)}
.count{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;
}
.count b{color:var(--terracotta);font-weight:700}

.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.pill{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);background:transparent;
  border:1px solid var(--rule);border-radius:100px;padding:5.5px 12px 5px;
  cursor:pointer;transition:border-color .2s, color .2s, background .2s;
}
.pill:hover{border-color:var(--terracotta-l);color:var(--terracotta)}
.pill .n{opacity:.5;margin-left:6px;letter-spacing:.06em}
.pill[aria-pressed="true"]{
  background:var(--terracotta);border-color:var(--terracotta);color:#FCF8F1;
}
.pill[aria-pressed="true"] .n{opacity:.7}
.pill:focus-visible,.clear:focus-visible,.kept-tag:focus-visible,
.kept-handle:focus-visible,.kept-go:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:3px;
}

/* the second and third pill rows — speciality, then what they're open to.
   A hairline label sits in the margin so the rows read as one hierarchy. */
.pillrow{display:flex;align-items:baseline;gap:12px;margin-top:10px}
.pillrow[hidden]{display:none}
.pillrow-label{
  flex:0 0 auto;padding-top:6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.pillrow .pills{margin-top:0;flex:1 1 auto;min-width:0}
.pills-sub .pill{border-style:dashed}
.pills-sub .pill[aria-pressed="true"]{border-style:solid}
.pills-intent .pill{
  border-color:rgba(180,73,31,.28);color:var(--terracotta);background:rgba(180,73,31,.04);
}
.pills-intent .pill:hover{border-color:var(--terracotta-l)}
.pills-intent .pill[aria-pressed="true"]{
  background:var(--terracotta);border-color:var(--terracotta);color:#FCF8F1;
}
.count-more{opacity:.62}

/* ---------- the grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  column-gap:34px;row-gap:30px;align-items:start;
  margin-top:34px;padding-bottom:10px;
}
.empty{
  grid-column:1/-1;text-align:center;padding:80px 0 60px;
  font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-soft);
}
.empty span{
  display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.sentinel{height:1px}
.more{
  text-align:center;padding:34px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
}
.more[hidden]{display:none}

/* shared bits */
.txt{white-space:pre-wrap;overflow-wrap:break-word}
.mention{color:var(--terracotta);font-style:italic}
.emoji{font-family:var(--emoji);font-style:normal}
.av-fallback{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;color:#fff;background:var(--terracotta-l);
  width:100%;height:100%;font-size:1.1em;
}

/* ============================================================
   THE KEPT COMMENT — editorial, typeset, generous
   ============================================================ */
.kept{
  display:block;position:relative;
  background:var(--card);
  border:1px solid #E7DCC9;
  border-radius:3px;
  padding:30px 30px 26px;
  box-shadow:0 1px 0 rgba(120,100,70,.05), 0 14px 30px -22px rgba(70,55,35,.5);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s, border-color .32s;
}
.kept:hover{
  transform:translateY(-3px);
  border-color:#DBCBAE;
  box-shadow:0 1px 0 rgba(120,100,70,.05), 0 24px 44px -26px rgba(70,55,35,.62);
}
/* The kept/bookmark tick. It is a real button, not a pseudo-element:
   it is the way in to the frame shop, and ::after is needed by the
   Gold Leaf frame for its shine. */
.kept-tab{
  position:absolute;top:0;right:26px;width:13px;height:22px;z-index:4;
  padding:0;border:0;-webkit-appearance:none;appearance:none;
  background:var(--terracotta);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  opacity:.82;cursor:pointer;
  transition:opacity .2s, transform .2s, background-color .2s;
}
.kept-tab:hover,.kept-tab:focus-visible{opacity:1;transform:translateY(2px) scaleY(1.14)}
.kept-tab:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
/* The whisper next to the tick — it only surfaces on the card it belongs to. */
.kept-tab-hint{
  position:absolute;top:5px;right:46px;z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);opacity:0;transform:translateX(4px);
  transition:opacity .24s ease, transform .24s ease;
}
.kept:hover .kept-tab-hint,.kept:focus-within .kept-tab-hint{opacity:.75;transform:translateX(0)}
.kept-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.kept-av{
  width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 38px;
  background:var(--paper-deep);box-shadow:0 0 0 1px rgba(120,100,70,.18);
}
.kept-av img{width:100%;height:100%;object-fit:cover;display:block}
.kept-handle{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);
}
.kept-verified{color:var(--terracotta);font-size:10px;margin-left:5px;vertical-align:1px}
.kept-quote{
  font-family:var(--serif);font-size:19px;line-height:1.62;font-weight:350;
  color:var(--ink);letter-spacing:-.004em;margin:0;
  position:relative;
}
.kept-quote::before{
  content:"\201C";position:absolute;left:-19px;top:-12px;
  font-family:var(--display);font-size:52px;line-height:1;color:var(--terracotta);
  opacity:.24;pointer-events:none;
}
/* every word is its own sibling link — prose, @mention, or URL */
.kept-quote a{color:inherit;text-decoration:none}
.kept-quote a:hover{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:rgba(180,73,31,.4);
}
.kept-quote a.link{
  color:var(--terracotta);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(180,73,31,.35);overflow-wrap:anywhere;
}
.kept-quote a.mention:hover,.kept-quote a.link:hover{text-decoration-color:currentColor}
.kept-quote a:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;border-radius:2px}
.kept-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin-top:24px;padding-top:17px;border-top:1px solid #EBE1D0;
}
.kept-tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);border-radius:100px;
  padding:4.5px 11px 4px;
  -webkit-appearance:none;appearance:none;background:transparent;line-height:normal;
  cursor:pointer;transition:border-color .2s, color .2s;
}
.kept-tag:hover{border-color:var(--terracotta-l);color:var(--terracotta)}
.kept-go{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}
.kept:hover .kept-go{color:var(--terracotta)}
.kept mark{
  background:rgba(180,73,31,.14);color:inherit;border-radius:2px;
  padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- the jammerbbk quote, now the closing note ---------- */
.foot-quote{
  max-width:34ch;margin:96px auto 0;text-align:center;
  padding-top:34px;border-top:1px solid var(--rule);
}
.foot-quote blockquote{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:350;
  font-size:clamp(20px,2.6vw,29px);line-height:1.45;color:var(--ink);
}
.foot-quote cite{
  display:block;margin-top:16px;font-style:normal;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.foot-quote cite a{color:var(--ink-faint);border-bottom:1px solid var(--rule);padding-bottom:2px}
.foot-quote cite a:hover{color:var(--terracotta);border-bottom-color:var(--terracotta)}
.foot-quote cite a:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

/* ---------- footer ---------- */
.foot{
  margin-top:100px;padding:30px 0 60px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
}
.foot-quote + .foot{margin-top:54px}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;column-gap:0;row-gap:22px}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .controls-inner{padding:0 18px}
  .pills{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
    /* let the rows run to the edge of the paper, not the 18px gutter */
    margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;
  }
  .pills::-webkit-scrollbar{display:none}
  .pill{flex:0 0 auto}
  .pillrow{display:block;margin-top:8px}
  .pillrow-label{display:block;padding-top:0;margin-bottom:6px}
  .pillrow .pills{margin-top:0}
  .topnav-inner{padding:0 18px;gap:10px}
  /* the H1 sits right under the bar on mobile, so the mark is redundant —
     the three actions take the full width instead, evenly split. */
  .nav-mark{display:none}
  .nav-links{margin-left:0;width:100%;justify-content:space-between;gap:8px}
  .nav-why{font-size:9.5px;letter-spacing:.12em}
  .nav-hi{font-size:9.5px;letter-spacing:.12em}
  .nav-coffee{font-size:9.5px;letter-spacing:.1em;padding:6px 11px 5px}
  .masthead{padding:44px 0 0}
  .eyebrow{margin:0 0 24px}
  .mast-rule{margin:22px auto 18px}
  .mast-credit{margin-top:24px}
  .flourish{margin-top:32px}
  .story{margin-top:34px;font-size:15.5px}
  .controls{margin-top:36px}
  .story summary .teaser{font-size:16.5px}
  .kept{padding:24px 22px 22px}
  .kept-quote{font-size:17.5px}
  .kept-quote::before{left:-14px;font-size:42px}
  .foot-quote{margin-top:70px}
  .foot-quote + .foot{margin-top:44px}
  .foot{margin-top:70px}
}
@media (max-width:340px){
  .masthead .tagline{white-space:normal;max-width:22ch}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .kept:hover{transform:none}
  .nav-coffee:hover{transform:none}
}

.foot-by a{
  color:var(--terracotta);border-bottom:1px solid rgba(180,73,31,.35);padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.foot-by a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot-by a:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

/* ============================================================
   FRAMES — the bought flair, carried over from mockups/hover.html
   A card wears one .d-* class; the animation is the hover preview.
   ============================================================ */
@property --irid-ang{syntax:"<angle>";inherits:false;initial-value:210deg}
@property --gold-ang{syntax:"<angle>";inherits:false;initial-value:150deg}
:root{--gold:#B08833}

/* ---- 02 · Iridescent ---- */
.d-irid{
  --irid-ang:210deg;
  border:2px solid transparent;border-radius:5px;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    conic-gradient(from var(--irid-ang),#9fe7f5,#f7c8e8,#fbeec2,#c3f0d2,#cdc7f7,#9fe7f5) border-box;
  box-shadow:0 1px 0 rgba(120,100,70,.05),0 16px 34px -24px rgba(70,55,35,.5);
  overflow:hidden;
}
.d-irid::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(118deg,rgba(160,230,245,0) 32%,rgba(245,205,235,.30) 46%,rgba(255,246,205,.32) 54%,rgba(180,235,205,0) 68%);
  background-size:260% 100%;background-position:120% 0;
}
.d-irid .kept-head,.d-irid .kept-quote,.d-irid .kept-foot{position:relative;z-index:1}
@keyframes irid-spin{ to{ --irid-ang:570deg } }
@keyframes irid-sheen{ 0%{background-position:120% 0} 100%{background-position:-60% 0} }
@keyframes irid-shadow{
  0%,100%{box-shadow:0 1px 0 rgba(120,100,70,.05),0 26px 52px -26px rgba(70,55,35,.62),0 0 30px -12px rgba(160,220,240,.55)}
  50%    {box-shadow:0 1px 0 rgba(120,100,70,.05),0 34px 64px -26px rgba(70,55,35,.7), 0 0 46px -10px rgba(228,180,225,.6)}
}
.d-irid:hover{animation:irid-spin 3.6s linear infinite, irid-shadow 3.2s ease-in-out infinite}
.d-irid:hover::before{animation:irid-sheen 2.4s cubic-bezier(.45,.05,.3,1) infinite}
.d-irid .kept-tab{background:linear-gradient(160deg,#8fd9ea,#e6b8dd)}

/* ---- 03 · Gold Leaf ---- */
.d-gold{
  --gold-ang:150deg;
  border:2px solid transparent;border-radius:4px;overflow:hidden;
  background:
    linear-gradient(#FDFAF2,#FBF6EA) padding-box,
    linear-gradient(var(--gold-ang),#C9A44C,#F2DFA0,#A97F2E,#EBD08F,#B08833) border-box;
  box-shadow:0 1px 0 rgba(120,100,70,.06),0 18px 36px -24px rgba(120,90,30,.55);
}
.d-gold::after{
  content:"";position:absolute;top:-60%;left:-70%;width:52%;height:220%;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,248,220,.78),rgba(255,255,255,0));
  transform:rotate(18deg);pointer-events:none;
}
@keyframes gold-sweep{ 0%{left:-70%} 60%{left:135%} 100%{left:135%} }
@keyframes gold-turn{ to{ --gold-ang:510deg } }
@keyframes gold-halo{
  0%,100%{box-shadow:0 1px 0 rgba(120,100,70,.06),0 26px 50px -26px rgba(120,90,30,.72),0 0 26px -8px rgba(226,186,92,.55)}
  50%    {box-shadow:0 1px 0 rgba(120,100,70,.06),0 34px 62px -26px rgba(120,90,30,.85),0 0 48px -6px rgba(240,206,120,.8)}
}
.d-gold:hover{animation:gold-turn 5s linear infinite, gold-halo 2.6s ease-in-out infinite}
.d-gold:hover::after{animation:gold-sweep 2.4s cubic-bezier(.4,.05,.25,1) infinite}
.d-gold .kept-handle{color:#8A6A21}
.d-gold .kept-quote::before{color:var(--gold);opacity:.42}
.d-gold .kept-tab{background:linear-gradient(165deg,#E3C878,#B08833);z-index:3}
.d-gold .kept-tag{border-color:rgba(176,136,51,.42);color:#7E6224}
.d-gold .kept-go{color:#9A7A2C}
.d-gold:hover .kept-go{color:#7E6224}

/* ---- 05 · Terracotta Glow ---- */
.d-glow{
  border:1px solid rgba(180,73,31,.5);border-radius:4px;
  background:linear-gradient(180deg,#FDF4EC 0%,var(--card) 42%);
  box-shadow:0 0 0 5px rgba(201,113,75,.09),0 18px 40px -22px rgba(180,73,31,.62);
}
.d-glow::before{
  content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(85% 60% at 50% 0%,rgba(206,52,25,.16),rgba(206,52,25,0) 70%);
}
.d-glow .kept-head,.d-glow .kept-quote,.d-glow .kept-foot{position:relative;z-index:1}
@keyframes ember-pulse{
  0%,100%{
    border-color:rgba(180,73,31,.55);
    box-shadow:0 0 0 5px rgba(201,113,75,.10),0 22px 46px -22px rgba(180,73,31,.66),0 0 26px -8px rgba(206,52,25,.28)
  }
  50%{
    border-color:rgba(180,73,31,.92);
    box-shadow:0 0 0 12px rgba(201,113,75,.20),0 30px 62px -22px rgba(180,73,31,.9),0 0 52px -4px rgba(206,52,25,.55)
  }
}
@keyframes ember-wash{ 0%,100%{opacity:.35} 50%{opacity:1} }
.d-glow:hover{animation:ember-pulse 2.1s ease-in-out infinite}
.d-glow:hover::before{animation:ember-wash 2.1s ease-in-out infinite}
.d-glow .kept-tab{background:var(--red);opacity:1}
.d-glow .kept-quote::before{opacity:.4}
.d-glow .kept-tag{border-color:rgba(180,73,31,.32);color:#8E4123}

/* ---- 14 · Spotlight Boost ---- */
.d-spot{
  border-color:#E7D9BE;
  background:radial-gradient(90% 62% at 50% -14%,#FFFDF7 0%,#FDF8EE 42%,var(--card) 78%);
  box-shadow:0 -2px 26px -6px rgba(255,226,160,.8),0 22px 48px -26px rgba(70,55,35,.72);
  overflow:hidden;
}
.d-spot::before{
  content:"";position:absolute;top:0;left:50%;width:64%;height:60%;z-index:0;
  transform:translateX(-50%);transform-origin:50% 0;
  background:radial-gradient(60% 90% at 50% 0,rgba(255,236,190,.75),rgba(255,236,190,0) 72%);
  pointer-events:none;
}
.d-spot::after{
  content:"";position:absolute;top:-30%;left:50%;width:140%;height:150%;z-index:0;opacity:0;
  transform:translateX(-50%) rotate(-8deg);transform-origin:50% 0;
  background:radial-gradient(38% 60% at 50% 0,rgba(255,242,206,.72),rgba(255,238,190,.22) 45%,rgba(255,236,190,0) 75%);
  pointer-events:none;
}
.d-spot .kept-head,.d-spot .kept-quote,.d-spot .kept-foot{position:relative;z-index:1}
@keyframes spot-breathe{
  0%,100%{opacity:.72;transform:translateX(-50%) scale(.94)}
  50%    {opacity:1;  transform:translateX(-50%) scale(1.16)}
}
@keyframes spot-sweep{
  0%  {opacity:.35;transform:translateX(-78%) rotate(-11deg)}
  50% {opacity:.95;transform:translateX(-22%) rotate(11deg)}
  100%{opacity:.35;transform:translateX(-78%) rotate(-11deg)}
}
@keyframes spot-lamp{
  0%,100%{box-shadow:0 -4px 34px -6px rgba(255,224,150,.9), 0 26px 54px -26px rgba(70,55,35,.78)}
  50%    {box-shadow:0 -8px 58px -6px rgba(255,216,120,1),  0 34px 68px -26px rgba(70,55,35,.86)}
}
.d-spot:hover{animation:spot-lamp 3.4s ease-in-out infinite}
.d-spot:hover::before{animation:spot-breathe 3.4s ease-in-out infinite}
.d-spot:hover::after{animation:spot-sweep 5.2s ease-in-out infinite}
.kept-beam{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#B39142;
  transition:color .4s ease;pointer-events:none;
}
.d-spot:hover .kept-beam{color:#8F6B1E}
.d-spot .kept-tab{background:#E8B94B}
/* Spotlight buys placement, so the card needs the room to be seen. */
.kept.d-spot{padding-top:38px}

/* ============================================================
   THE FRAME SHOP — one modal, opened from one card's tick
   ============================================================ */
.flair-modal[hidden]{display:none}
.flair-modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding:max(24px,6vh) 20px 40px;overflow-y:auto;
}
.flair-scrim{
  position:fixed;inset:0;border:0;padding:0;width:100%;height:100%;cursor:pointer;
  background:radial-gradient(70% 55% at 50% 40%,rgba(34,30,26,.34) 0%,rgba(34,30,26,.56) 100%);
  -webkit-backdrop-filter:saturate(.85) blur(2px);backdrop-filter:saturate(.85) blur(2px);
  animation:flair-fade .28s ease both;
}
@keyframes flair-fade{from{opacity:0}to{opacity:1}}
@keyframes flair-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.flair-panel{
  position:relative;z-index:1;width:100%;max-width:560px;
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:30px 30px 26px;
  box-shadow:0 40px 90px -40px rgba(40,30,15,.75);
  animation:flair-rise .34s cubic-bezier(.2,.7,.3,1) both;
}
.flair-close{
  position:absolute;top:12px;right:12px;width:30px;height:30px;line-height:1;
  border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:15px;color:var(--ink-faint);
  transition:color .2s,border-color .2s;
}
.flair-close:hover{color:var(--terracotta);border-color:var(--rule)}
.flair-close:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.flair-eyebrow{
  margin:0 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);
}
.flair-title{
  margin:0 0 22px;font-family:var(--display);font-weight:500;
  font-size:24px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);
}
.flair-title b{font-weight:500;font-style:italic;color:var(--terracotta)}
.flair-intro{
  margin:0 0 20px;font-family:var(--serif);font-size:15px;line-height:1.65;
  font-weight:350;color:var(--ink-soft);
}
/* The stage keeps room for the frame's glow so nothing jumps on hover. */
.flair-stage{padding:14px 10px 4px;margin:0 0 22px}
.flair-stage .kept{cursor:default}
.flair-stage .kept-quote{font-size:17px}
.flair-stage .kept-tab{cursor:default;pointer-events:none}
.flair-opts{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}
.flair-opt{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:11px 13px;cursor:pointer;
  background:var(--card);border:1px solid var(--rule);border-radius:3px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.flair-opt:hover{border-color:var(--terracotta-l);transform:translateY(-1px)}
.flair-opt:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.flair-opt[aria-pressed="true"]{
  border-color:var(--terracotta);
  box-shadow:inset 0 0 0 1px var(--terracotta);
}
.flair-swatch{
  width:20px;height:26px;flex:0 0 20px;border-radius:2px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
}
.flair-swatch.d-irid{background:linear-gradient(160deg,#8fd9ea,#e6b8dd);border:0}
.flair-swatch.d-gold{background:linear-gradient(165deg,#E3C878,#B08833);border:0}
.flair-swatch.d-glow{background:var(--red);border:0}
.flair-swatch.d-spot{background:#E8B94B;border:0}
.flair-opt-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.flair-opt-name{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
}
.flair-opt-price{font-family:var(--serif);font-size:14px;color:var(--ink-soft)}
.flair-opt-price span{font-style:italic;color:var(--ink-faint)}
/* September deal: anchor struck through, deal price loud, discount beside it */
.flair-opt-price .flair-was{
  text-decoration:line-through;color:var(--ink-faint);font-style:normal;margin-right:5px;
}
.flair-opt-price .flair-now{font-weight:600;color:var(--ink);font-style:normal}
.flair-opt-price .flair-off{
  margin-left:7px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--terracotta);font-style:normal;
}
.flair-benefit{
  display:block;margin-top:5px;font-family:var(--serif);font-style:italic;
  font-size:12.5px;line-height:1.55;color:var(--ink-faint);
}
.flair-scarce{
  display:block;margin-top:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#8F6B1E;
}
/* Spotlight is the one we want them to look at */
.flair-opt.is-boost{
  border-color:rgba(232,185,75,.85);
  background:linear-gradient(180deg,#FFFCF3,var(--card));
  box-shadow:0 0 0 4px rgba(255,226,160,.24);
}
.flair-opt.is-boost:hover{border-color:#D9A73A}
.flair-opt.is-boost[aria-pressed="true"]{
  border-color:#C8942A;box-shadow:inset 0 0 0 1px #C8942A, 0 0 0 4px rgba(255,226,160,.34);
}
.flair-buy{
  display:block;width:100%;padding:14px 18px;cursor:pointer;
  -webkit-appearance:none;appearance:none;border:1px solid var(--terracotta);border-radius:3px;
  background:var(--terracotta);color:#FCF8F1;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:background-color .2s,border-color .2s,opacity .2s;
}
.flair-buy:hover:not(:disabled){background:#9C3D18;border-color:#9C3D18}
.flair-buy:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.flair-buy:disabled{opacity:.55;cursor:default}
.flair-note{
  margin:13px 0 0;text-align:center;
  font-family:var(--mono);font-size:10px;line-height:1.8;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.flair-err{
  margin:13px 0 0;padding:10px 12px;border:1px solid rgba(206,52,25,.4);border-radius:3px;
  background:rgba(206,52,25,.06);
  font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.06em;color:var(--stamp);
}
.flair-err[hidden]{display:none}
.flair-deal{
  margin:8px 0 0;text-align:center;font-family:var(--serif);font-style:italic;
  font-size:12.5px;line-height:1.6;color:var(--ink-faint);
}
.flair-notnow{
  display:block;margin:14px auto 0;padding:2px 4px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px;
}
.flair-notnow:hover{color:var(--terracotta)}
.flair-notnow:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}

/* the state Stripe hands a cancelled checkout back to */
.checkout-cancel[hidden]{display:none}
.checkout-cancel{
  display:flex;align-items:flex-start;gap:14px;
  margin:0 0 26px;padding:15px 16px 14px;
  border:1px solid var(--rule);border-radius:3px;background:var(--card);
  font-family:var(--serif);font-size:15px;line-height:1.6;font-weight:350;color:var(--ink-soft);
}
.checkout-cancel-x{
  margin-left:auto;flex:0 0 auto;width:26px;height:26px;line-height:1;cursor:pointer;
  border:1px solid transparent;border-radius:50%;background:transparent;
  font-family:var(--mono);font-size:13px;color:var(--ink-faint);
  transition:color .2s,border-color .2s;
}
.checkout-cancel-x:hover{color:var(--terracotta);border-color:var(--rule)}
.checkout-cancel-x:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
body.flair-open{overflow:hidden}

@media (max-width:560px){
  .flair-panel{padding:26px 20px 22px}
  .flair-opts{grid-template-columns:1fr}
  .flair-title{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .kept::before,.kept::after,.kept:hover,.kept:hover::before,.kept:hover::after,
  .flair-scrim,.flair-panel{animation:none !important}
  .kept-tab:hover,.kept-tab:focus-visible{transform:none}
}