/*
Theme Name: A.E.M. Home Decor — Gazette
Theme URI: https://example.com/aem-home-decor
Author: The Editorial Desk
Author URI: https://example.com
Description: A custom 1930s broadsheet-newspaper affiliate bridge-page theme. Single editorial landing page with advertorial layout, Customizer-managed offer & affiliate URL, redirect notice, cookie consent, compliant legal pages, and built-in on-page SEO (meta, Open Graph, Article schema).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aem-home-decor
Tags: one-column, custom-logo, landing-page, news
*/

/* ============================================================
   0. TOKENS — aged paper, letterpress ink, single rust accent
   ============================================================ */
:root{
  --paper:        #f2e9d8;   /* aged cream broadsheet */
  --paper-bright: #f7f0e0;
  --paper-shade:  #e6dabf;
  --desk:         #cdbf9f;   /* the desk the paper lies on */
  --ink:          #1c1a17;   /* letterpress charcoal, never pure black */
  --ink-soft:     #46403a;
  --ink-faint:    rgba(28,26,23,.55);
  --rust:         #8c2f1e;   /* the single accent — masthead rules, tags, CTA */
  --rust-deep:    #6e2415;
  --rule:         var(--ink);
  --font-blackletter: 'UnifrakturCook', 'Old English Text MT', serif;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Libre Caslon Text', 'Old Standard TT', 'Georgia', serif;
  --font-detail:  'Old Standard TT', 'Georgia', serif;
  --measure: 1120px;
}

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ transition:none!important; animation:none!important; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.075rem;
  line-height:1.68;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,250,235,.55), transparent 55%),
    repeating-linear-gradient(0deg, rgba(28,26,23,.028) 0 1px, transparent 1px 3px),
    var(--desk);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--rust); }
p{ margin:0 0 1em; }
::selection{ background:var(--rust); color:var(--paper-bright); }
:focus-visible{ outline:3px solid var(--rust); outline-offset:2px; }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); word-wrap:normal!important; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6em 1em; z-index:1000; }
.skip-link:focus{ left:8px; top:8px; }

/* ============================================================
   2. THE SHEET — one printed broadsheet on a desk
   ============================================================ */
.sheet{
  max-width:var(--measure);
  margin:clamp(10px,3vw,34px) auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(120,95,60,.03) 0 2px, transparent 2px 5px),
    var(--paper);
  border:1px solid rgba(28,26,23,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 45px -18px rgba(30,22,10,.55), 0 4px 14px rgba(30,22,10,.25);
  padding: clamp(14px,4vw,54px) clamp(14px,4.5vw,58px) clamp(24px,4vw,44px);
  position:relative;
}
.sheet::after{ /* faint page-fold */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 49.6%, rgba(28,26,23,.05) 50%, transparent 50.4%);
}

/* ============================================================
   3. MASTHEAD & DATELINE
   ============================================================ */
.ticker{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.14em;
  font-size:.78rem; color:var(--ink-soft);
  border-top:3px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.4em .15em; margin-bottom:.6rem;
}
.masthead{ text-align:center; padding:.6rem 0 .4rem; }
.masthead .nameplate{
  font-family:var(--font-blackletter); font-weight:700;
  font-size:clamp(2.6rem,8.5vw,5.6rem); line-height:1.02; margin:0;
  letter-spacing:.01em; text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.masthead .nameplate a{ text-decoration:none; color:inherit; }
.masthead .tagline{
  font-family:var(--font-detail); font-style:italic; font-size:.95rem;
  margin:.35rem 0 0; color:var(--ink-soft);
}
.dateline-bar{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.12em; font-size:.8rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.35em .15em; margin-top:.7rem; position:relative;
}
.dateline-bar::before, .dateline-bar::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--rust);
}
.dateline-bar::before{ top:2px; } .dateline-bar::after{ bottom:2px; }
.gnav{ border-bottom:3px double var(--rule); }
.gnav ul{ list-style:none; margin:0; padding:.45em 0; display:flex; justify-content:center; flex-wrap:wrap; gap:.4em 1.7em; }
.gnav a{
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.2em;
  font-size:.82rem; text-decoration:none;
}
.gnav a:hover{ text-decoration:underline; }

/* ============================================================
   4. DISCLOSURE STRIP  (masthead, always above the fold)
   ============================================================ */
.disclosure-strip{
  margin:0; padding:.42em 1em;
  border-top:1px solid rgba(28,26,23,.35);
  background:rgba(140,47,30,.06);
  font-family:var(--font-detail); font-size:.78rem; line-height:1.45;
  text-align:center; color:var(--ink-soft);
}
.disclosure-strip strong{
  font-variant:small-caps; letter-spacing:.16em; color:var(--rust);
  margin-right:.4em;
}
.disclosure-strip strong::after{ content:" ·"; color:var(--ink-faint); }
.disclosure-strip a{ color:var(--ink-soft); }

/* ============================================================
   5. STORY HEAD — kicker, headline decks, byline
   ============================================================ */
.kicker{
  margin:2rem 0 .6rem; text-align:center;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.38em; font-size:.82rem; color:var(--rust);
}
.kicker::before,.kicker::after{ content:"—"; letter-spacing:0; margin:0 .8em; color:var(--ink-faint); }
.headline{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  text-align:center; font-size:clamp(1.9rem,5.6vw,3.7rem); line-height:1.06;
  letter-spacing:.005em; margin:0 0 .55em;
}
.deck{
  font-family:var(--font-body); font-style:italic; text-align:center;
  font-size:clamp(1.05rem,2.1vw,1.28rem); line-height:1.55;
  max-width:62ch; margin:0 auto 1rem;
}
.byline{
  text-align:center; font-family:var(--font-detail); font-variant:small-caps;
  letter-spacing:.14em; font-size:.82rem; color:var(--ink-soft);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.4em 0; max-width:560px; margin:0 auto 1.6rem;
}
.rule-double{ border:0; border-top:4px double var(--rule); margin:1.6rem 0; }
.rule-thin{ border:0; border-top:1px solid var(--rule); margin:1.2rem 0; }

/* ============================================================
   6. HERO FIGURE — halftone/sepia press photo
   ============================================================ */
.hero-figure{ margin:0 auto 1.8rem; max-width:820px; text-align:center; }
.hero-figure .plate{
  position:relative; display:inline-block; padding:9px;
  background:var(--paper-bright); border:1px solid var(--ink);
  box-shadow: 0 0 0 4px var(--paper-bright) inset, 0 3px 10px rgba(28,26,23,.22);
}
.hero-figure img{ filter:sepia(.55) contrast(1.06) saturate(.7) brightness(1.01); }
.hero-figure .plate::after{ /* halftone dot screen */
  content:""; position:absolute; inset:9px; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background-image:radial-gradient(circle, rgba(28,26,23,.32) .7px, transparent 1.1px);
  background-size:3.5px 3.5px;
}
.hero-figure figcaption{
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.09em;
  font-size:.8rem; color:var(--ink-soft); margin-top:.6rem;
}

/* ============================================================
   7. BODY STORY — justified newsprint columns, drop cap
   ============================================================ */
.story{
  column-count:3; column-gap:2.3rem;
  column-rule:1px solid rgba(28,26,23,.5);
  margin:0 0 1.4rem; text-align:justify; hyphens:auto;
}
.story > *{ break-inside:avoid-column; }
.story p{ margin:0 0 1em; }
.story h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; font-size:.86rem; text-align:center;
  margin:1.3em 0 .7em; color:var(--ink);
}
.story h3::before,.story h3::after{ content:"❦"; color:var(--rust); font-size:.8em; margin:0 .7em; }
.lead-graf p:first-of-type::first-letter{
  font-family:var(--font-display); font-weight:900;
  font-size:3.55em; line-height:.82; float:left; padding:.06em .09em 0 0;
  color:var(--ink);
}
.dateline-inline{ font-variant:small-caps; letter-spacing:.08em; font-weight:700; }
a.inline-cta{ font-weight:700; color:var(--rust); }
@media (max-width:980px){ .story{ column-count:2; } }
@media (max-width:640px){ .story{ column-count:1; column-rule:none; text-align:left; hyphens:none; } }

/* ============================================================
   8. SPECIAL BULLETIN — vintage ad-frame offer box + CTA
   ============================================================ */
.adlabel{
  display:block; text-align:center; font-family:var(--font-detail);
  font-size:.68rem; letter-spacing:.5em; color:var(--ink-faint); margin:.4rem 0;
  text-transform:uppercase;
}
.bulletin{
  position:relative; margin:1.8rem auto; max-width:860px;
  border:3px solid var(--ink); padding:6px; background:var(--paper-bright);
  box-shadow: 5px 5px 0 rgba(28,26,23,.28);
}
.bulletin__inner{ border:1px solid var(--ink); padding:clamp(1.2rem,3.4vw,2rem) clamp(1rem,4vw,2.4rem); text-align:center; }
.bulletin__inner::before{ /* corner fleurons */
  content:"❧"; position:absolute; top:14px; left:16px; color:var(--rust); font-size:1rem;
}
.bulletin__inner::after{ content:"❧"; position:absolute; top:14px; right:16px; transform:scaleX(-1); color:var(--rust); font-size:1rem; }
.bulletin__tag{
  display:inline-block; background:var(--rust); color:var(--paper-bright);
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.28em;
  font-size:.74rem; padding:.32em 1.1em; margin-bottom:.9rem;
}
.bulletin h2{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,2rem); line-height:1.12; margin:0 0 .7rem;
}
.bulletin ul.features{
  list-style:none; margin:0 auto 1rem; padding:0; max-width:52ch;
  font-size:.98rem; text-align:center;
}
.bulletin ul.features li{ padding:.28em 0; border-bottom:1px dotted rgba(28,26,23,.4); }
.bulletin ul.features li:last-child{ border-bottom:0; }
.bulletin ul.features li::before{ content:"— "; color:var(--rust); font-weight:700; }
.bulletin ul.features li::after{ content:" —"; color:var(--rust); font-weight:700; }
.bulletin__sub{
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.12em;
  font-size:.86rem; color:var(--ink-soft); margin:0 0 .9rem;
}
.btn{
  display:inline-block; cursor:pointer;
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  letter-spacing:.13em; font-size:clamp(.92rem,2.3vw,1.12rem);
  color:var(--paper-bright); background:var(--rust);
  border:3px solid var(--ink); padding:.95em 1.9em;
  text-decoration:none; box-shadow: 5px 5px 0 rgba(28,26,23,.85);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{ background:var(--rust-deep); color:var(--paper-bright); transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(28,26,23,.85); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(28,26,23,.85); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:none; }
.btn--ghost:hover{ background:rgba(28,26,23,.07); color:var(--ink); transform:none; box-shadow:none; }
.redirect-note{
  font-family:var(--font-detail); font-style:italic; font-size:.83rem;
  color:var(--ink-soft); max-width:56ch; margin:.9rem auto 0; line-height:1.5;
}
.redirect-note .ext{ font-style:normal; }

/* ---- MERGED NOTICE + CTA UNIT ----------------------------------
   Disclosure, redirect warning and button share one frame so the
   button can never appear without its disclosure.               */
.cta-unit{
  position:relative; text-align:center;
  border:2px solid var(--ink); background:rgba(140,47,30,.05);
  padding:1.5rem clamp(1rem,3vw,2rem) 1.3rem;
  margin:1.6rem auto 0; max-width:60ch;
}
.cta-unit__label{
  position:absolute; top:-.72em; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:var(--paper-bright); padding:0 .7em;
  font-family:var(--font-detail); font-variant:small-caps;
  letter-spacing:.2em; font-size:.68rem; color:var(--rust);
}
.cta-unit__notice{
  font-family:var(--font-detail); font-size:.84rem; line-height:1.55;
  color:var(--ink-soft); margin:0 0 1.1rem; text-align:left;
}
.cta-unit__notice strong{ color:var(--ink); font-variant:small-caps; letter-spacing:.06em; }
.cta-unit__notice em{ font-style:italic; }
.cta-unit__notice .hand{ font-size:1.25em; color:var(--rust); vertical-align:-2px; margin-right:.25em; }
.cta-unit__fine{
  font-family:var(--font-detail); font-style:italic; font-size:.76rem;
  color:var(--ink-faint); margin:.85rem auto 0; max-width:52ch; line-height:1.5;
}
.cta-unit__fine a{ color:var(--ink-soft); }
/* closing unit sits on the page itself, so it carries the dashed classified frame */
.cta-unit--compact{
  border:2px dashed var(--rust); max-width:760px; margin:2.4rem auto;
  background:rgba(140,47,30,.05);
}
.cta-unit--compact .cta-unit__label{ background:var(--paper); }
.hand{ font-size:1.4em; vertical-align:-2px; }

/* ============================================================
   8b. QUERIES FROM THE POST-BAG (reader FAQ)
   ============================================================ */
.faq{
  max-width:820px; margin:0 auto; columns:2; column-gap:2.4rem;
  column-rule:1px solid rgba(28,26,23,.3);
}
.faq__item{ break-inside:avoid; margin:0 0 1.2rem; }
.faq__item h3{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  line-height:1.25; margin:0 0 .35em; color:var(--ink);
}
.faq__item h3::before{ content:"Q. "; color:var(--rust); font-weight:900; }
.faq__item p{ margin:0; font-size:.94rem; line-height:1.55; text-align:justify; hyphens:auto; }
.faq__item p::before{ content:"A. "; color:var(--rust); font-weight:700; font-family:var(--font-display); }
@media (max-width:860px){ .faq{ columns:1; column-rule:none; } }

/* ============================================================
   9. LETTERS TO THE EDITOR
   ============================================================ */
.section-head{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  text-align:center; letter-spacing:.06em; font-size:clamp(1.3rem,3.2vw,1.9rem);
  margin:2.4rem 0 .3rem;
}
.section-sub{ text-align:center; font-style:italic; color:var(--ink-soft); margin:0 0 1.2rem; }
.editor-note{
  max-width:720px; margin:0 auto 1.2rem; padding:.6em 1em;
  border-left:4px solid var(--rust); background:rgba(28,26,23,.045);
  font-family:var(--font-detail); font-size:.84rem; line-height:1.5;
}
.letters{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.letter{
  border-top:3px solid var(--rule); padding-top:.8rem; font-size:.98rem;
}
.letter blockquote{ margin:0 0 .7em; font-style:italic; }
.letter blockquote::before{ content:"“"; font-family:var(--font-display); font-size:1.6em; color:var(--rust); line-height:0; margin-right:.08em; }
.letter cite{
  font-family:var(--font-detail); font-style:normal; font-variant:small-caps;
  letter-spacing:.08em; font-size:.82rem; color:var(--ink-soft);
}
@media (max-width:860px){ .letters{ grid-template-columns:1fr; } }

/* ============================================================
   10. FOOTER / COLOPHON
   ============================================================ */
.colophon{
  border-top:4px double var(--rule); margin-top:2.6rem; padding-top:1.2rem;
  font-family:var(--font-detail); font-size:.85rem; color:var(--ink-soft); line-height:1.6;
}
.colophon h2{
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); margin:1.1em 0 .4em;
}
.colophon .legal-nav{ list-style:none; display:flex; flex-wrap:wrap; gap:.5em 1.6em; justify-content:center; margin:0 0 1rem; padding:0; }
.colophon .legal-nav a{ font-variant:small-caps; letter-spacing:.14em; font-size:.82rem; }
.fineprint{
  text-align:center; border-top:1px solid var(--rule); margin-top:1.2rem; padding-top:.8rem;
  font-variant:small-caps; letter-spacing:.08em;
}

/* ============================================================
   11. REDIRECT NOTICE (honest confirm — no fake loading)
   ============================================================ */
.aem-modal[hidden]{ display:none; }
.aem-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.aem-modal__backdrop{ position:absolute; inset:0; background:rgba(24,20,15,.74); }
.aem-modal__card{
  position:relative; max-width:560px; width:100%;
  background:var(--paper); border:3px solid var(--ink);
  box-shadow:9px 9px 0 rgba(0,0,0,.45); padding:1.6rem 1.5rem 1.4rem; text-align:center;
}
.aem-modal__wire{
  font-family:var(--font-detail); font-variant:small-caps; letter-spacing:.3em;
  font-size:.72rem; color:var(--ink-soft); border-bottom:1px dashed var(--ink);
  padding-bottom:.5rem; margin:0 0 .8rem;
}
.aem-modal h2{
  font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:1.3rem; letter-spacing:.06em; margin:0 0 .7rem;
}
.aem-modal p{ font-size:.96rem; margin:0 0 .8em; }
.aem-modal .stop{ font-variant:small-caps; letter-spacing:.55em; font-weight:700; color:var(--rust); }
.aem-modal .btn-row{ display:flex; gap:.8rem 1rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
body.aem-lock{ overflow:hidden; }

/* ============================================================
   12. COOKIE CONSENT BAR
   ============================================================ */
.aem-cookie[hidden]{ display:none; }
.aem-cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:1500;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-detail); font-size:.86rem; line-height:1.5;
  padding:.85em 1.1em; display:flex; gap:.8em 1.4em; align-items:center; justify-content:center; flex-wrap:wrap;
  border-top:3px solid var(--rust);
}
.aem-cookie a{ color:var(--paper); }
.aem-cookie .btn{ font-size:.72rem; padding:.55em 1.1em; box-shadow:none; border-width:2px; border-color:var(--paper); }
.aem-cookie .btn--ghost{ color:var(--paper); }
.aem-cookie .btn--ghost:hover{ background:rgba(255,255,255,.12); color:var(--paper); }

/* ============================================================
   13. LEGAL PAGES & 404 & FALLBACK INDEX
   ============================================================ */
.page-plain{ max-width:760px; margin:0 auto; }
.page-plain h1{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; text-align:center; font-size:clamp(1.6rem,4vw,2.4rem); margin:1.6rem 0 .4rem; }
.page-plain .page-rule{ border:0; border-top:4px double var(--rule); margin:.8rem 0 1.6rem; }
.page-plain h2{ font-family:var(--font-display); font-size:1.05rem; text-transform:uppercase; letter-spacing:.14em; margin:1.6em 0 .5em; }
.page-plain ul{ padding-left:1.2em; }
.updated-line{ text-align:center; font-variant:small-caps; letter-spacing:.12em; font-size:.82rem; color:var(--ink-soft); }
.error-404{ text-align:center; padding:2.5rem 0 3rem; }
.error-404 .big{ font-family:var(--font-display); font-weight:900; font-size:clamp(3rem,10vw,6rem); line-height:1; margin:0; }
.error-404 .torn{
  display:inline-block; margin:1.2rem auto; padding:1.2rem 1.6rem; background:var(--paper-bright);
  border:1px solid var(--ink); transform:rotate(-1.2deg);
  clip-path:polygon(0 4%,6% 0,94% 2%,100% 6%,98% 96%,92% 100%,8% 98%,0 94%);
}
.post-list{ list-style:none; padding:0; max-width:760px; margin:1.5rem auto; }
.post-list li{ border-bottom:1px solid var(--rule); padding:1rem 0; }
.post-list a{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; text-decoration:none; }

/* ============================================================
   14. PRINT — it is, after all, a newspaper
   ============================================================ */
@media print{
  body{ background:#fff; }
  .sheet{ box-shadow:none; border:0; margin:0; max-width:none; }
  .aem-cookie,.aem-modal,.skip-link,.btn{ display:none!important; }
}