.kw{
.salks{ font-family:'Salks',sans-serif; font-weight:400; }
a{ color:inherit; text-decoration:none; }
/* ================= SECTION SHELL ================= */
  .kw{
    position:relative; overflow:clip; padding:104px 0 120px;
    background:
      repeating-linear-gradient(90deg, transparent 0 119px, rgba(245,181,51,.06) 119px 120px),
      repeating-linear-gradient(0deg, transparent 0 119px, rgba(245,181,51,.05) 119px 120px),
      var(--ink);
  }
.kw::before{
    /* faint corner glow for depth */
    content:""; position:absolute; top:-160px; right:-120px; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(249,74,25,.10), transparent 68%); pointer-events:none; z-index:0;
  }
.wrap{ position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:0 56px; }
/* ================= HEADER ================= */
  .kicker{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:800; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--amber); border:3px solid var(--ink); border-radius:100px; padding:9px 18px; box-shadow:5px 5px 0 #000; transform:rotate(-2deg); }
h2.title{ margin:24px 0 0; font-family:'Salks',sans-serif; font-weight:400; line-height:.88; letter-spacing:-.01em; font-size:clamp(52px,9vw,150px); color:var(--cream); }
.title-mask{ display:block; overflow:hidden; padding-bottom:.04em; }
.title-line{ display:inline-block; }
h2.title .pop{ color:var(--amber); }
h2.title .out{ -webkit-text-stroke:2.5px var(--orange); color:transparent; }
.lede{ margin:26px 0 0; max-width:600px; font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:rgba(253,243,227,.7); }
.lede b{ color:var(--cream); }
/* mascots */
  .mascot{ position:absolute; pointer-events:none; z-index:5; will-change:transform; }
.mascot img{ display:block; width:100%; height:auto; filter:drop-shadow(0 18px 18px rgba(0,0,0,.35)); will-change:transform; }
#mHead{ top:-22px; right:3%; width:150px; transform:rotate(7deg); }
#mFloat{ width:120px; }
/* ================= POSTAGE STAMP (shared) ================= */
  .stamp{
    --bg:var(--paper);
    --r:9px;    /* perforation radius */
    --d:24px;   /* perforation spacing */
    position:relative;
    background:var(--bg);
    filter:drop-shadow(6px 7px 0 #000);
    -webkit-mask:
      radial-gradient(var(--r) at 50% 0,    #0000 98%, #000) 0 0    / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 0 100% / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 0 50%,    #0000 98%, #000) 0 0    / 50% var(--d) repeat-y,
      radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 0 / 50% var(--d) repeat-y;
    mask:
      radial-gradient(var(--r) at 50% 0,    #0000 98%, #000) 0 0    / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 0 100% / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 0 50%,    #0000 98%, #000) 0 0    / 50% var(--d) repeat-y,
      radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 0 / 50% var(--d) repeat-y;
  }
.stamp-in{
    margin:14px; border:2px solid var(--ink); border-radius:4px;
    padding:24px 24px 22px; height:calc(100% - 28px);
    display:flex; flex-direction:column; gap:0;
    outline:1px solid var(--ink); outline-offset:3px;
  }
/* stamp colour variants */
  .v-paper{ --bg:var(--paper); }
.v-cream{ --bg:var(--cream); }
.v-amber{ --bg:var(--amber); }
.v-orange{ --bg:var(--orange); color:var(--cream); }
.v-orange .stamp-in,.v-orange .pm,.v-orange .name,.v-orange .cat{ border-color:var(--cream); color:var(--cream); }
.v-orange .stamp-in{ outline-color:var(--cream); }
.v-orange .quote{ color:var(--cream); }
.v-orange .star{ color:var(--cream); }
.v-orange .cat{ background:rgba(253,243,227,.16); }
/* stamp content */
  .strow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.name{ font-family:'Salks',sans-serif; font-weight:400; font-size:27px; line-height:.95; color:var(--ink); }
.stars{ display:flex; gap:2px; flex:0 0 auto; }
.star{ width:15px; height:15px; color:var(--orange); }
.v-amber .star,.v-cream .star,.v-paper .star{ color:var(--orange); }
.quote{ margin:16px 0 0; font-family:'Roboto'; font-weight:700; font-size:clamp(17px,1.45vw,21px); line-height:1.34; color:var(--ink); text-wrap:pretty; flex:1 1 auto; }
.quote::before{ content:"“"; font-family:'Salks',sans-serif; }
.quote::after{ content:"”"; font-family:'Salks',sans-serif; }
.stfoot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:18px; }
.cat{ font-weight:800; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); background:rgba(28,24,19,.08); border-radius:100px; padding:6px 12px; }
/* postmark cancellation badge */
  .pm{ width:62px; height:62px; flex:0 0 auto; border:2px dashed var(--ink); border-radius:50%; display:grid; place-items:center; text-align:center; transform:rotate(-13deg); color:var(--ink); opacity:.62; }
.pm b{ font-family:'Salks',sans-serif; font-weight:400; font-size:14px; line-height:.85; display:block; }
.pm i{ font-style:normal; font-weight:800; font-size:6.5px; letter-spacing:.1em; display:block; margin-top:2px; }
/* ================= FEATURED POSTCARD ================= */
  .feature{ position:relative; margin-top:54px; }
.postcard{
    position:relative; background:var(--cream); border-radius:8px;
    filter:drop-shadow(9px 10px 0 #000);
    --r:11px; --d:30px;
    -webkit-mask:
      radial-gradient(var(--r) at 50% 0,    #0000 98%, #000) 0 0    / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 0 100% / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 0 50%,    #0000 98%, #000) 0 0    / 50% var(--d) repeat-y,
      radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 0 / 50% var(--d) repeat-y;
    mask:
      radial-gradient(var(--r) at 50% 0,    #0000 98%, #000) 0 0    / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) 0 100% / var(--d) 50% repeat-x,
      radial-gradient(var(--r) at 0 50%,    #0000 98%, #000) 0 0    / 50% var(--d) repeat-y,
      radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) 100% 0 / 50% var(--d) repeat-y;
  }
.pc-in{ margin:18px; border:2.5px solid var(--ink); border-radius:6px; outline:1px solid var(--ink); outline-offset:4px; padding:48px 56px 46px; min-height:300px; display:flex; flex-direction:column; }
.pc-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.pc-name{ font-family:'Salks',sans-serif; font-size:clamp(30px,3.4vw,52px); line-height:.92; color:var(--ink); }
.pc-stars{ display:flex; gap:5px; }
.pc-stars .star{ width:24px; height:24px; }
.pc-quote{ margin:26px 0 0; font-family:'Roboto'; font-weight:700; font-size:clamp(22px,2.7vw,38px); line-height:1.22; color:var(--ink); max-width:20ch; text-wrap:balance; }
.pc-foot{ margin-top:auto; padding-top:30px; display:flex; align-items:center; gap:16px; }
.pc-pm{ width:96px; height:96px; }
.pc-pm b{ font-size:21px; }
.pc-pm i{ font-size:9px; }
.pc-cat{ font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
#mFeature{ position:absolute; right:-26px; bottom:-40px; width:176px; z-index:6; }
#mFeature img{ transform:rotate(-6deg); }
/* ================= STAMP GRID ================= */
  .grid-head{ margin-top:96px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.grid-head h3{ margin:0; font-family:'Salks',sans-serif; font-weight:400; font-size:clamp(28px,3.2vw,46px); line-height:.95; color:var(--cream); }
.grid-head p{ margin:0; max-width:340px; font-size:15px; line-height:1.45; color:rgba(253,243,227,.62); }
.grid{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 30px; align-items:start; }
.cell{ will-change:transform, opacity; }
.cell:nth-child(3n+2){ margin-top:30px; }
.cell:nth-child(3n+3){ margin-top:14px; }
.stamp{ height:100%; }
/* ================= BOTTOM MARQUEE + CTA ================= */
  .strip{ background:var(--amber); border-top:4px solid #000; border-bottom:4px solid #000; padding:14px 0; overflow:hidden; display:flex; transform:rotate(-1.2deg) scale(1.04); margin:104px 0 0; }
.strip .track{ display:flex; width:max-content; }
.strip .item{ display:flex; align-items:center; gap:22px; padding-right:22px; flex:0 0 auto; }
.strip .item span{ font-family:'Salks',sans-serif; font-size:28px; color:var(--ink); white-space:nowrap; }
.strip .item b{ width:12px; height:12px; border-radius:99px; background:var(--ink); display:block; flex:0 0 auto; }
.foot{ max-width:1280px; margin:74px auto 0; padding:0 56px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.foot .cta{ display:inline-flex; align-items:center; gap:12px; background:var(--orange); color:var(--cream); font-family:'Salks',sans-serif; font-size:26px; padding:18px 34px; border:3px solid #000; border-radius:100px; box-shadow:6px 6px 0 var(--amber); transition:transform .2s, box-shadow .2s; }
.foot .cta:hover{ transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--amber); }
.foot .note{ font-size:17px; color:rgba(253,243,227,.7); max-width:330px; line-height:1.45; }
/* ================= RESPONSIVE ================= */
  @media (max-width:980px){
    .grid{ grid-template-columns:repeat(2,1fr); }
    .cell:nth-child(3n+2),.cell:nth-child(3n+3){ margin-top:0; }
    .cell:nth-child(even){ margin-top:26px; }
    #mHead{ width:118px; right:4%; }
    #mFeature{ width:132px; right:-10px; bottom:-26px; }
  }
@media (max-width:640px){
    .wrap{ padding:0 24px; }
    .pc-in{ padding:34px 28px 32px; }
    .grid{ grid-template-columns:1fr; }
    .cell:nth-child(even){ margin-top:0; }
    .foot{ padding:0 24px; }
    .mascot{ display:none; }
  }
@media (prefers-reduced-motion:reduce){
    .strip .track{ transform:none; }
  }
}

/* ===== AMBER (yellow) theme — replaces the dark ground ===== */
.kw{ background:
  repeating-linear-gradient(90deg, transparent 0 119px, rgba(28,24,19,.05) 119px 120px),
  repeating-linear-gradient(0deg, transparent 0 119px, rgba(28,24,19,.045) 119px 120px),
  var(--amber) !important; }
.kw::before{ background:radial-gradient(circle, rgba(249,74,25,.16), transparent 68%) !important; }
.kw .kicker{ background:var(--paper); }
.kw h2.title{ color:var(--ink); }
.kw h2.title .pop{ color:var(--orange); }
.kw .lede{ color:var(--ink-soft); }
.kw .lede b{ color:var(--ink); }
.kw .grid-head h3{ color:var(--ink); }
.kw .grid-head p{ color:rgba(28,24,19,.6); }
/* amber stamps would vanish on amber — make them cream so every stamp pops */
.kw .stamp.v-amber{ --bg:var(--cream); color:var(--ink); }
.kw .stamp.v-amber .star{ color:var(--orange); }
/* bottom marquee back to dark ink for contrast on amber */
.kw .strip{ background:var(--ink); }
.kw .strip .item span{ color:var(--cream); }
.kw .strip .item b{ background:var(--amber); }
.kw .foot .note{ color:var(--ink-soft); }