/* ==========================================================================
   Peninsula Post - site design system
   Illustration-led: Fraunces display in evergreen, Nunito Sans body,
   watercolor washes + paper grain, real issue art, scroll + pointer motion.
   ========================================================================== */

:root{
  --cream:#F5F2EC;
  --cream-deep:#ECE5D6;
  --paper:#FBF8F1;
  --callout:#FAF6EE;
  --ink:#2E5E4E;         /* forest - headings, buttons, borders */
  --deep:#163226;        /* deepest evergreen - dark blocks */
  --green:#2D5F3A;       /* links + accent */
  --gold:#C9A84C;
  --gold-deep:#B98F2E;
  --ocean:#3B7A9E;
  --terracotta:#C4704B;
  --text:#33372F;
  --text-soft:#54604F;
  --muted:#8A8676;
  --line:#DED4BE;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,72px);
  --radius:14px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--body);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;}
img{max-width:100%;display:block;}
/* Issues scheduled for a future date. assets/publish-gate.js drops the
   attribute once the date arrives, which reveals them. Hidden by default so
   the failure mode is appearing late, never early. */
[data-publish]{display:none !important;}
/* <picture> is only a wrapper for the webp/jpeg swap. Taking it out of the
   layout tree keeps rules like .issue-card__cover img{height:100%} resolving
   against the card, not against the picture box. */
picture{display:contents;}
a{color:inherit;}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(64px,10vw,128px);position:relative;}

/* ---- type ---- */
.eyebrow{font-family:var(--body);font-size:.74rem;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-deep);margin:0;}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.03;margin:0;color:var(--ink);
  letter-spacing:-.015em;font-optical-sizing:auto;}
h2{font-size:clamp(2.2rem,5vw,3.6rem);}
h3{font-size:1.36rem;line-height:1.15;}
.lede{font-size:clamp(1.08rem,1.8vw,1.32rem);color:var(--text-soft);line-height:1.55;
  font-family:var(--body);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:800;
  font-size:1rem;padding:.85em 1.5em;border-radius:999px;border:2px solid var(--ink);
  background:var(--ink);color:var(--cream);cursor:pointer;text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.btn:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(22,50,38,.22);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--cream);}

/* ==========================================================================
   Masthead + dateline
   ========================================================================== */
.masthead{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--cream) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.masthead__bar{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,3vw,20px);padding-block:14px;}
/* The wordmark is one unbreakable unit (nbsp), so at 320px it and the Subscribe
   button together used to outrun the bar and the button was clipped off-screen.
   The brand yields instead: fluid below ~500px, pinned at 1.44rem above it, so
   nothing changes on desktop. min-width:0 lets flex actually do the shrinking. */
.brand{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,4.6vw,1.44rem);
  letter-spacing:-.01em;min-width:0;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.5em;}
.brand__mark{width:11px;height:11px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 32%,transparent);flex:0 0 auto;}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex:0 0 auto;}
.nav a{font-size:.95rem;font-weight:700;text-decoration:none;color:var(--green);padding-block:4px;
  border-bottom:2px solid transparent;transition:border-color .15s,color .15s;}
.nav a:hover{color:var(--ink);border-color:var(--gold);}
.nav .btn{padding:.5em 1.1em;font-size:.88rem;color:var(--cream);}
.nav .btn:hover{color:var(--cream);}
.nav__link{display:none;}
@media(min-width:760px){.nav__link{display:inline;}}

.dateline{background:var(--deep);color:var(--cream);}
.dateline__row{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding-block:9px;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:color-mix(in srgb,var(--cream) 80%,transparent);}
.dateline__row b{color:var(--gold);font-weight:800;}

/* ==========================================================================
   Texture helpers: watercolor washes + paper grain
   ========================================================================== */
.hero__paint{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hero__paint svg{width:100%;height:100%;display:block;}
.grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;}
.hero__grid{position:relative;z-index:2;display:grid;gap:clamp(30px,5vw,56px);
  align-items:center;padding-block:clamp(46px,7vw,88px);grid-template-columns:1fr;}
@media(min-width:940px){.hero__grid{grid-template-columns:1.02fr .98fr;}}
.hero__copy{display:grid;gap:26px;max-width:600px;}
.hero__sprig{width:64px;height:auto;margin-bottom:-8px;}
.hero h1{font-size:clamp(2.9rem,7vw,5.2rem);font-weight:800;line-height:1.0;}
.hero h1 em{font-style:italic;color:var(--green);font-weight:500;}
.hero .lede{max-width:42ch;}

/* poster stack */
.stage{position:relative;min-height:clamp(360px,52vw,600px);}
.poster{position:absolute;padding:2.4% 2.4% 8%;background:#fff;border-radius:6px;
  box-shadow:0 26px 60px rgba(22,50,38,.30),0 4px 12px rgba(22,50,38,.16);
  transform:translate(var(--px,0),var(--py,0)) rotate(var(--rot,0));
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease;
  outline:1px solid rgba(201,168,76,.5);outline-offset:-1px;}
.poster img{border-radius:3px;}
.poster figcaption{position:absolute;left:0;right:0;bottom:2.4%;text-align:center;
  font-family:var(--body);font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);}
.poster--front{--rot:-4deg;z-index:3;width:60%;left:15%;top:5%;}
.poster--mid{--rot:6.5deg;z-index:2;width:52%;right:0;top:-1%;}
.poster--back{--rot:-9deg;z-index:1;width:48%;left:-1%;bottom:2%;}
.stage:hover .poster{box-shadow:0 32px 70px rgba(22,50,38,.34),0 6px 14px rgba(22,50,38,.18);}

/* ==========================================================================
   Marquee band (towns)
   ========================================================================== */
.marquee{background:var(--deep);color:var(--cream);overflow:hidden;border-block:1px solid rgba(201,168,76,.28);}
.marquee__track{display:flex;gap:0;white-space:nowrap;width:max-content;
  animation:scroll-x 32s linear infinite;}
.marquee__track span{font-family:var(--display);font-style:italic;font-size:1.15rem;
  padding:16px 30px;color:color-mix(in srgb,var(--cream) 88%,transparent);}
.marquee__track span::after{content:"\2735";color:var(--gold);margin-left:60px;font-style:normal;
  font-size:.7rem;vertical-align:middle;}
@keyframes scroll-x{to{transform:translateX(-50%);}}

/* ==========================================================================
   Features
   ========================================================================== */
.features{background:var(--cream-deep);border-block:1px solid var(--line);}
.features__head{max-width:60ch;margin-bottom:clamp(30px,5vw,52px);display:grid;gap:16px;}
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;display:grid;gap:11px;align-content:start;
  transition:transform .2s ease,box-shadow .2s ease;}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(22,50,38,.12);}
.card__tag{font-family:var(--body);font-weight:800;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);}
.card p{margin:0;color:var(--muted);font-size:.99rem;line-height:1.5;}
.card__rule{width:32px;height:3px;background:var(--gold);border-radius:3px;}

/* ==========================================================================
   Gallery showcase (dark) - the art / archive
   ========================================================================== */
.gallery{background:var(--deep);color:var(--cream);}
.gallery__head{display:grid;gap:16px;max-width:60ch;margin-bottom:clamp(34px,5vw,56px);}
.gallery__head h2{color:var(--cream);}
.gallery__head .eyebrow{color:var(--gold);}
.gallery__head .lede{color:color-mix(in srgb,var(--cream) 76%,transparent);}
.gallery__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);}
@media(max-width:820px){.gallery__strip{grid-template-columns:repeat(2,1fr);}}
.plate{position:relative;border-radius:8px;overflow:hidden;background:#fff;padding:8px;
  box-shadow:0 20px 44px rgba(0,0,0,.34);transition:transform .3s ease;}
.plate img{border-radius:4px;transition:transform .5s ease;}
.plate:hover{transform:translateY(-6px) rotate(-1deg);}
.plate:hover img{transform:scale(1.05);}
.plate:nth-child(even){transform:translateY(22px);}
.plate:nth-child(even):hover{transform:translateY(16px) rotate(1deg);}
.gallery__cta{display:flex;justify-content:center;margin-top:clamp(34px,5vw,56px);}
.gallery .btn{background:var(--gold);border-color:var(--gold);color:var(--deep);}
.gallery .btn:hover{background:#fff;border-color:#fff;color:var(--deep);}

/* ==========================================================================
   Printables split
   ========================================================================== */
.split{display:grid;gap:clamp(30px,5vw,68px);align-items:center;grid-template-columns:1fr;}
@media(min-width:860px){.split{grid-template-columns:1.05fr .95fr;}}
.split__body{display:grid;gap:22px;}
.split__body .lede{max-width:46ch;}
.chip{display:inline-flex;align-items:center;gap:.5em;align-self:start;background:var(--callout);
  border:1px solid var(--gold);color:var(--gold-deep);font-weight:800;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.44em .95em;border-radius:999px;}
.panel{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:0 22px 46px rgba(22,50,38,.14);}
.panel__seasons{display:grid;gap:13px;}
.panel__row{display:flex;align-items:center;gap:13px;}
.panel__swatch{width:40px;height:40px;border-radius:9px;flex:0 0 auto;}
.panel__row span{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);}
.panel__row small{color:var(--muted);font-family:var(--body);font-weight:600;display:block;font-size:.82rem;}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.closing{background:var(--deep);color:var(--cream);text-align:center;overflow:hidden;}
/* Dusk over the Sound behind the last call to action. The deep evergreen on
   .closing stays underneath as the fallback if the image never loads.
   display:block undoes the site-wide picture{display:contents} above: that
   rule generates no box, so without this the absolute positioning and the
   scrim ::after are both dropped and the image stretches the section in
   normal flow. Any <picture> used as a backdrop needs the same override. */
.closing__scene{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;}
/* Darkening with brightness() rather than a heavier flat wash keeps the dusk
   sky warm; a flat evergreen scrim strong enough for contrast pulls the whole
   frame monochrome and throws away the best part of the picture. The scrim
   below still has to clear 4.5:1 for the small gold eyebrow against the
   brightest sky, wherever the cover crop happens to land. */
.closing__scene img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:brightness(.38) saturate(1.06);}
.closing__scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--deep) 42%,transparent) 0%,
    color-mix(in srgb,var(--deep) 52%,transparent) 58%,
    color-mix(in srgb,var(--deep) 70%,transparent) 100%);}
/* A phone makes this section portrait, and filling a portrait box from a 2.5:1
   picture crops it to a 29% wide slice: heavily zoomed and unreadable as a
   place. Below 620px the scene stops filling the box and instead lies along the
   bottom at its own aspect, full width, like a horizon under the copy, with the
   section's evergreen filling everything above. The mask feathers the top edge
   so the sky meets that evergreen without a seam. */
@media (max-width:620px){
  .closing__scene{top:auto;height:auto;}
  /* Only the button and the field overlap the band here, and both are solid
     fills, so the heavy darkening the desktop crop needs for its small gold
     eyebrow would just bury the picture. It lifts, and the scrim comes off
     entirely: an unmasked scrim would paint a rectangle past the feathered
     top edge and put a visible line across the evergreen. */
  .closing__scene img{height:auto;object-fit:fill;filter:brightness(.58) saturate(1.06);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);
    mask-image:linear-gradient(180deg,transparent 0,#000 38%);}
  .closing__scene::after{display:none;}
}
.closing .wrap{position:relative;z-index:2;display:grid;gap:24px;}
.closing h2{color:var(--cream);max-width:20ch;margin-inline:auto;}
.closing .lede{color:color-mix(in srgb,var(--cream) 80%,transparent);max-width:44ch;margin-inline:auto;}
.subscribe{display:flex;flex-wrap:wrap;gap:11px;max-width:480px;}
.closing .subscribe{margin-inline:auto;justify-content:center;}
.subscribe__field{flex:1 1 220px;display:flex;align-items:center;background:var(--paper);
  border:2px solid var(--line);border-radius:999px;padding:.28em .3em .28em 1.15em;transition:border-color .15s;}
.subscribe__field:focus-within{border-color:var(--gold);}
.subscribe input[type=email]{flex:1;border:0;background:transparent;font-family:var(--body);
  font-size:1rem;color:var(--ink);padding:.62em 0;min-width:0;}
.subscribe input[type=email]:focus{outline:none;}
.subscribe input::placeholder{color:var(--muted);}
.closing .subscribe__field{border-color:transparent;}
.closing .btn{background:var(--gold);border-color:var(--gold);color:var(--deep);}
.closing .btn:hover{background:#fff;border-color:#fff;color:var(--deep);}
.microcopy{font-size:.85rem;color:var(--muted);margin:0;}
.microcopy b{color:var(--green);font-weight:700;}
.closing .microcopy{color:color-mix(in srgb,var(--cream) 62%,transparent);}
.closing .microcopy b{color:var(--gold);}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--cream-deep);border-top:1px solid var(--line);padding-block:56px 42px;font-size:.92rem;}
.footer__grid{display:grid;gap:30px;grid-template-columns:1fr;}
@media(min-width:720px){.footer__grid{grid-template-columns:2fr 1fr 1fr;}}
.footer h4{font-family:var(--body);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 12px;font-weight:800;}
.footer a{color:var(--green);text-decoration:none;display:block;padding-block:3px;font-weight:600;}
.footer a:hover{color:var(--ink);text-decoration:underline;}
.footer__coverage{color:var(--muted);max-width:42ch;line-height:1.5;}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:38px;
  padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;}

/* ==========================================================================
   Reveal motion + a11y
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.09s;}
[data-reveal][data-delay="2"]{transition-delay:.18s;}
[data-reveal][data-delay="3"]{transition-delay:.27s;}
[data-reveal][data-delay="4"]{transition-delay:.36s;}

/* ==========================================================================
   Archive page
   ========================================================================== */
/* Full-bleed dusk band between the dateline and the page heading. It reuses
   the closing scene's file, so on any journey through the homepage it is
   already cached; only the crop differs. No text sits on this one, so unlike
   the closing scene it runs at natural brightness. The bottom fade dissolves
   it into the cream page rather than ending on a hard seam. */
.pageband{display:block;position:relative;height:clamp(112px,17vw,220px);
  overflow:hidden;background:var(--deep);}
.pageband img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;}
.pageband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  transparent 0%,transparent 62%,
  color-mix(in srgb,var(--cream) 55%,transparent) 86%,var(--cream) 100%);}
.pagehead{padding-block:clamp(40px,6vw,72px) 0;display:grid;gap:16px;max-width:60ch;}
.pagehead h1{font-size:clamp(2.4rem,5.5vw,3.8rem);}
/* The band already gives the eye somewhere to land, so the heading does not
   need to clear as much space above it. */
.pageband + main .pagehead{padding-block:clamp(28px,4vw,48px) 0;}
/* Says the embargo out loud, for the readers who never scroll to a card that
   happens to be in its "sent, not posted yet" window. */
.archive-note{margin:0;background:var(--callout);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:15px 20px;font-size:.97rem;line-height:1.55;color:var(--text-soft);}
.archive-note b{color:var(--ink);}
.archive-note a{color:var(--green);font-weight:800;text-decoration:underline;
  text-underline-offset:2px;}
.archive-grid{display:grid;gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  padding-block:clamp(32px,5vw,60px) clamp(64px,10vw,120px);}
.issue-card{display:grid;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;}
.issue-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(22,50,38,.17);}
.issue-card__cover{aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep);
  border-bottom:1px solid var(--line);}
.issue-card__cover img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .5s ease;}
.issue-card:hover .issue-card__cover img{transform:scale(1.04);}
.issue-card__meta{padding:22px 22px 26px;display:grid;gap:9px;}
.issue-card__no{font-family:var(--body);font-weight:800;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);}
.issue-card__meta h3{color:var(--ink);}
.issue-card__meta p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;}
.issue-card__link{font-weight:800;color:var(--green);font-size:.92rem;margin-top:2px;}
.issue-card:hover .issue-card__link{color:var(--ink);}
.issue-card--soon{opacity:.72;}
.issue-card--soon .issue-card__cover{display:flex;align-items:center;justify-content:center;
  background:var(--cream-deep);color:var(--muted);font-family:var(--display);font-style:italic;
  font-size:1.1rem;text-align:center;padding:20px;}
/* a{color:inherit} would leave this the same muted grey as the copy around
   it, so the one actionable thing on the card has to opt back in. */
.issue-card--soon .issue-card__meta a{color:var(--green);font-weight:800;
  text-decoration:underline;text-underline-offset:2px;}

/* ==========================================================================
   Advertise page
   ========================================================================== */
.slots{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.slot{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:grid;gap:9px;align-content:start;}
.slot__tag{font-family:var(--body);font-weight:800;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);}
.slot p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.5;}
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  counter-reset:step;list-style:none;padding:0;margin:0;}
.steps li{position:relative;padding-top:52px;}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--cream);
  font-family:var(--display);font-weight:700;font-size:1.1rem;display:flex;align-items:center;
  justify-content:center;}
.steps h3{font-size:1.12rem;margin-bottom:6px;}
.steps p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.5;}
.form{display:grid;gap:18px;max-width:640px;}
.form__row{display:grid;gap:18px;grid-template-columns:1fr 1fr;}
@media(max-width:560px){.form__row{grid-template-columns:1fr;}}
.field{display:grid;gap:7px;}
.field label{font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);}
.field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;
  padding:.72em .95em;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);
  color:var(--ink);width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
.field textarea{min-height:130px;resize:vertical;}
.form__note{font-size:.86rem;color:var(--muted);}
.form__note a{color:var(--green);font-weight:700;}

/* ==========================================================================
   Printables page
   ========================================================================== */
.printable-facts{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:12px;}
.printable-facts li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;
  color:var(--text-soft);line-height:1.4;}
.printable-facts li b{color:var(--ink);font-weight:800;}
.printable-facts svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px;color:var(--gold-deep);}

/* the paper "sheet" preview of a printable */
.paper{position:relative;max-width:460px;margin-inline:auto;background:var(--cream);
  border-radius:8px;padding:26px 26px 20px;transform:rotate(-1.4deg);
  box-shadow:0 30px 66px rgba(22,50,38,.26),0 6px 16px rgba(22,50,38,.14);
  outline:1px solid rgba(201,168,76,.5);outline-offset:-1px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;}
.paper:hover{transform:rotate(0) translateY(-4px);
  box-shadow:0 38px 82px rgba(22,50,38,.3),0 8px 18px rgba(22,50,38,.16);}
.paper__kicker{font-family:var(--body);font-weight:800;font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 5px;}
.paper__title{font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1.0;
  color:var(--ink);margin:0;letter-spacing:-.01em;}
.paper__sub{font-family:var(--display);font-style:italic;font-size:.82rem;color:var(--green);
  margin:6px 0 0;font-weight:500;}
.paper__rule{height:2.5px;background:var(--gold);border:0;margin:12px 0 15px;}
.paper__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.paper__col{display:grid;gap:13px;align-content:start;}
.paper__season{display:grid;gap:6px;}
.paper__season-head{display:flex;align-items:center;gap:6px;color:var(--cream);font-weight:800;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.paper__rows{display:grid;gap:5px;}
.paper__row{display:flex;gap:7px;align-items:flex-start;font-size:.66rem;line-height:1.25;
  font-weight:700;color:var(--ink);padding-bottom:4px;border-bottom:1px dotted #cdbf9f;}
.paper__row:last-child{border-bottom:0;}
.paper__box{flex:0 0 auto;width:9px;height:9px;margin-top:1px;border:1.5px solid var(--gold);
  border-radius:2px;}
.paper__foot{margin-top:15px;border-top:2.5px solid var(--gold);padding-top:9px;display:flex;
  justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:5px;font-size:.62rem;}
.paper__foot b{font-family:var(--display);color:var(--ink);font-weight:700;}
.paper__foot span{color:var(--terracotta);font-weight:800;}
@media(max-width:420px){.paper__grid{grid-template-columns:1fr;}}

/* status pill on the "more from the print shop" cards */
.slot__status{display:inline-flex;align-self:start;font-family:var(--body);font-weight:800;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.36em .8em;
  border-radius:999px;margin-bottom:2px;}
.slot__status--live{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-deep);
  border:1px solid var(--gold);}
.slot__status--soon{background:var(--cream-deep);color:var(--muted);border:1px solid var(--line);}
.slot__status--idea{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 38%,transparent);}

:where(a,button,input,summary):focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px;}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:0 0 8px 0;z-index:100;}
.skip:focus{left:0;}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;}
  .marquee__track{animation:none;}
}