/* Nancy's Web — public stylesheet
   Palette: a web at dusk. Aubergine night, silk-silver strands, amber for the
   catch, mint for savings. Prices are set in mono so they read as a readout. */

:root{
  --ink:      #171022;
  --ink-2:    #201730;
  --ink-3:    #2b1f3f;
  --silk:     #d6cce4;
  --silk-dim: #9184a6;
  --silk-line:rgba(214,204,228,.14);
  --amber:    #f0a830;
  --amber-dk: #c2811d;
  --catch:    #7ee0a8;
  --danger:   #ff7a7a;
  --radius:   14px;
  --maxw:     1240px;
  --shadow:   0 18px 50px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--silk);
  font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Ambient web strands behind everything, very faint */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(circle at 88% -8%, rgba(240,168,48,.10), transparent 46%),
    radial-gradient(circle at 4% 102%, rgba(126,224,168,.06), transparent 42%);
  pointer-events:none;
  z-index:0;
}

.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 20px}

a{color:var(--silk);text-decoration:none}
a:hover{color:var(--amber)}
img{max-width:100%;display:block}

h1,h2,h3,h4{
  font-family:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.4rem,2.8vw,2.1rem)}
h3{font-size:1.12rem}

.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--amber);color:#1a1024;padding:10px 16px;border-radius:8px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:40;
  background:rgba(23,16,34,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--silk-line);
}
.hdr-in{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.16rem;letter-spacing:-.03em;color:#fff;flex:none}
.brand svg{width:32px;height:32px;flex:none}
.brand span i{color:var(--amber);font-style:normal}

.nav{display:flex;gap:20px;font-size:.94rem;flex:1}
.nav a{color:var(--silk-dim);font-weight:500}
.nav a:hover,.nav a[aria-current]{color:var(--silk)}

.hdr-tools{display:flex;align-items:center;gap:10px;flex:none}

.srch{display:flex;align-items:center;background:var(--ink-2);border:1px solid var(--silk-line);border-radius:999px;padding:6px 8px 6px 14px}
.srch input{background:none;border:0;color:var(--silk);font:inherit;font-size:.9rem;width:150px;outline:none}
.srch input::placeholder{color:var(--silk-dim)}
.srch button{background:var(--amber);border:0;border-radius:999px;width:28px;height:28px;cursor:pointer;color:#1a1024;display:grid;place-items:center}

.mkt{background:var(--ink-2);border:1px solid var(--silk-line);color:var(--silk);border-radius:999px;padding:8px 12px;font:inherit;font-size:.86rem;cursor:pointer}

.burger{display:none;background:none;border:1px solid var(--silk-line);border-radius:9px;color:var(--silk);width:38px;height:38px;cursor:pointer;font-size:1.1rem}

/* ---------- hero: the signature web ---------- */
.hero{position:relative;padding:56px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero p.lede{font-size:1.1rem;color:var(--silk-dim);max-width:46ch;margin:0 0 26px}
.hero h1 em{font-style:normal;color:var(--amber)}

.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--silk-line)}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:'JetBrains Mono',monospace;font-size:1.5rem;color:#fff;font-weight:600;letter-spacing:-.02em}
.hero-stats small{color:var(--silk-dim);font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;margin-top:2px}

.web-art{width:100%;height:auto}
.web-art .strand{stroke:var(--silk-line);stroke-width:1;fill:none}
.web-art .radial{stroke:rgba(214,204,228,.10);stroke-width:1}
.web-art .dew{fill:var(--amber);opacity:.85}

@media (prefers-reduced-motion:no-preference){
  .web-art .dew{animation:dew 5s ease-in-out infinite}
  .web-art .dew:nth-of-type(2){animation-delay:1.1s}
  .web-art .dew:nth-of-type(3){animation-delay:2.4s}
  .web-art .dew:nth-of-type(4){animation-delay:3.3s}
  @keyframes dew{0%,100%{opacity:.25}50%{opacity:.95}}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#1a1024;font-weight:650;font-size:.95rem;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;transition:transform .12s ease,background .12s ease}
.btn:hover{background:#ffbb47;color:#1a1024;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--silk);border:1px solid var(--silk-line)}
.btn-ghost:hover{background:var(--ink-2);color:#fff}
.btn-sm{padding:8px 15px;font-size:.86rem}

/* ---------- section headers ---------- */
.sec{padding:42px 0}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.sec-hd h2{margin:0}
.eyebrow{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:7px}
.sec-hd a{font-size:.9rem;color:var(--silk-dim);white-space:nowrap}
.sec-hd a:hover{color:var(--amber)}

/* strand divider with a node */
.strand-rule{height:1px;background:var(--silk-line);position:relative;margin:0}
.strand-rule::after{content:"";position:absolute;left:14%;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--amber);opacity:.6}

/* ---------- deal grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.grid-lg{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

.card{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--silk-line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.card:hover{transform:translateY(-3px);border-color:rgba(240,168,48,.42);box-shadow:var(--shadow)}
.card-img{position:relative;background:#fff;aspect-ratio:1/1;display:grid;place-items:center;padding:14px}
.card-img img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:normal}
.card-img .noimg{color:#b9b0c6;font-size:.8rem}

.badge{position:absolute;top:10px;left:10px;background:var(--catch);color:#0d2a1c;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.82rem;padding:4px 9px;border-radius:7px;letter-spacing:-.02em}
.badge-prime{position:absolute;top:10px;right:10px;background:rgba(23,16,34,.9);color:var(--silk);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;font-weight:600}

.card-body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-brand{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--silk-dim);font-weight:600}
.card-title{font-size:.92rem;line-height:1.4;color:var(--silk);font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.card:hover .card-title{color:#fff}

.price{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:4px}
.price .now{font-family:'JetBrains Mono',monospace;font-size:1.22rem;font-weight:700;color:#fff;letter-spacing:-.03em}
.price .was{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--silk-dim);text-decoration:line-through}
.price .stale{font-size:.78rem;color:var(--silk-dim)}

.coupon{font-size:.75rem;color:var(--catch);background:rgba(126,224,168,.10);border:1px dashed rgba(126,224,168,.35);border-radius:7px;padding:5px 8px;font-family:'JetBrains Mono',monospace}

.card-foot{display:flex;gap:8px;padding:0 14px 14px}
.card-foot .btn{flex:1;justify-content:center}

.card-link{position:absolute;inset:0;z-index:1}
.card-foot,.card-foot *{position:relative;z-index:2}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px;background:var(--ink-2);border:1px solid var(--silk-line);border-radius:var(--radius);margin-bottom:22px}
.filters select,.filters input[type=search]{background:var(--ink);border:1px solid var(--silk-line);color:var(--silk);border-radius:9px;padding:9px 12px;font:inherit;font-size:.88rem}
.filters label{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--silk-dim);font-weight:600;margin-right:-4px}

.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--silk-line);font-size:.85rem;color:var(--silk-dim);background:var(--ink-2)}
.chip:hover{color:var(--silk);border-color:rgba(240,168,48,.4)}
.chip[aria-current]{background:var(--amber);color:#1a1024;border-color:var(--amber);font-weight:600}

/* ---------- deal detail ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:36px 0}
.detail-img{background:#fff;border-radius:var(--radius);padding:28px;display:grid;place-items:center;min-height:340px}
.detail h1{font-size:clamp(1.5rem,3.2vw,2.25rem);line-height:1.16}
.detail .pricebox{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:18px 0}
.detail .pricebox .now{font-family:'JetBrains Mono',monospace;font-size:2.4rem;font-weight:700;color:#fff;letter-spacing:-.04em}
.detail .pricebox .was{font-family:'JetBrains Mono',monospace;font-size:1.05rem;color:var(--silk-dim);text-decoration:line-through}
.detail .pricebox .save{background:var(--catch);color:#0d2a1c;font-family:'JetBrains Mono',monospace;font-weight:700;padding:5px 11px;border-radius:8px;font-size:.95rem}
.detail .btn{font-size:1.02rem;padding:15px 30px}

.meta-list{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--silk-line)}
.meta-list li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--silk-line);font-size:.9rem}
.meta-list span:first-child{color:var(--silk-dim)}
.meta-list span:last-child{text-align:right}

.freshness{font-size:.82rem;color:var(--silk-dim);margin-top:14px}
.freshness.stale{color:var(--danger)}

.spark{width:100%;height:70px;margin-top:8px}
.spark path{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round}
.spark .fill{fill:rgba(240,168,48,.12);stroke:none}

/* ---------- notices ---------- */
.notice{background:var(--ink-2);border:1px solid var(--silk-line);border-left:3px solid var(--amber);border-radius:10px;padding:15px 18px;font-size:.9rem;color:var(--silk-dim);margin:20px 0}
.notice strong{color:var(--silk)}

.empty{text-align:center;padding:70px 20px;color:var(--silk-dim)}
.empty h2{color:var(--silk)}

/* ---------- pagination ---------- */
.pager{display:flex;gap:8px;justify-content:center;align-items:center;padding:34px 0;flex-wrap:wrap}
.pager a,.pager span{padding:9px 14px;border-radius:9px;border:1px solid var(--silk-line);font-size:.88rem;color:var(--silk-dim);font-family:'JetBrains Mono',monospace}
.pager a:hover{border-color:var(--amber);color:var(--amber)}
.pager [aria-current]{background:var(--amber);color:#1a1024;border-color:var(--amber);font-weight:700}

/* ---------- interstitial ---------- */
.hand-off{min-height:100vh;display:grid;place-items:center;text-align:center;padding:30px}
.hand-off .spin{width:96px;height:96px;margin:0 auto 26px}
@media (prefers-reduced-motion:no-preference){
  .hand-off .spin{animation:spin 2.6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
}
.hand-off p{color:var(--silk-dim)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--silk-line);margin-top:60px;padding:44px 0 34px;background:var(--ink-2)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silk-dim);margin-bottom:12px}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ftr a{font-size:.9rem;color:var(--silk-dim)}
.ftr a:hover{color:var(--amber)}
.ftr .disclosure{font-size:.8rem;color:var(--silk-dim);line-height:1.65;max-width:44ch}
.ftr-btm{margin-top:34px;padding-top:20px;border-top:1px solid var(--silk-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--silk-dim)}

/* ---------- prose pages ---------- */
.prose{max-width:70ch;padding:40px 0}
.prose h2{margin-top:1.8em}
.prose p,.prose li{color:var(--silk-dim)}
.prose strong{color:var(--silk)}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{display:none}
  .detail{grid-template-columns:1fr;gap:26px}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;background:var(--ink-2);flex-direction:column;padding:18px 20px;border-bottom:1px solid var(--silk-line);gap:14px}
  .srch{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .card-title{font-size:.86rem;-webkit-line-clamp:2}
  .ftr-grid{grid-template-columns:1fr}
  .sec{padding:30px 0}
}