/* Eastside Pulse — modern editorial design pass (Oct 30, 2026)
   Brand: green #0E382E, cream #F6F0E0, gold #A08034.
   Playfair Display for display type, Lato for everything else.
   Patterns: fluid type (P1), slim hide-on-scroll header (P2), hairline rhythm
   + one green chapter per page (P4), editorial rows not cards (P5),
   takeaway boxes (P6), 3-level CTA system (P8), stat panels (P9),
   single reveal motion (P10), footer as composition (P11), a11y/perf (P12). */
:root{
  --green:#0E382E; --green-deep:#0A2A22; --cream:#F6F0E0; --paper:#FDFBF5;
  --gold:#A08034; --gold-bright:#D9BE7A; --gold-hover:#8A6D2C; --ink-on-gold:#04211A;
  --ink:#1E2B26; --ink-soft:#43534B; --muted:#5C6B63;
  --line:rgba(14,56,46,.18); --line-cream:rgba(246,240,224,.18);
  --takeaway-bg:#EFE7D2;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Lato',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);
  font:400 1.0625rem/1.6 var(--sans)} /* 17px */
@media (min-width:768px){body{font-size:1.125rem;line-height:1.65}} /* 18px */
img{max-width:100%;height:auto}
::selection{background:var(--gold);color:var(--green-deep)}
a{color:var(--green);text-decoration-color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-hover)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
footer :focus-visible,.subscribe-block :focus-visible,.stat-panel :focus-visible,
.topline :focus-visible,.magazine-cover :focus-visible{outline-color:var(--cream)}
section[id],nav[id]{scroll-margin-top:84px}

/* Type system (P1) */
h1{font:600 clamp(2rem,4.5vw + 1rem,3rem)/1.05 var(--serif);letter-spacing:-.02em;color:var(--green);margin:.3rem 0 1rem}
h2{font:600 clamp(1.75rem,3vw + 1rem,2.5rem)/1.1 var(--serif);letter-spacing:-.015em;color:var(--green);margin:.2rem 0 1rem}
.section-label{font:700 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 .6rem}
.skip-link{position:absolute;left:-999px;top:0;background:var(--green);color:var(--cream);padding:.6rem 1rem;z-index:60}
.skip-link:focus{left:0}
.topline{background:var(--green);color:var(--cream);text-align:center;font:700 .75rem/1 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;padding:.65rem 1rem}

/* Page masthead (home + edition pages only; scrolls away, not sticky) */
.page-masthead{text-align:center;padding:1.5rem 1rem .25rem}
.brand{display:inline-block;text-decoration:none;color:var(--green)}
.brand-masthead img{width:min(620px,94vw);height:auto;object-fit:contain;background:transparent}

/* Slim sticky header (P2): 56px mobile / 64px desktop, hides on scroll down */
.site-header{position:sticky;top:0;z-index:30;background:var(--cream);border-bottom:1px solid var(--gold);
  display:flex;align-items:center;gap:1rem;height:56px;padding:0 1rem;
  transition:transform .35s ease}
@media (min-width:768px){.site-header{height:64px;padding:0 1.25rem}}
.site-header.header-hidden{transform:translateY(-101%)}
.wordmark{font:600 1.12rem var(--serif);color:var(--green);text-decoration:none;white-space:nowrap;flex:none}
.wordmark em{font-style:normal;color:var(--gold)}
@media (min-width:768px){.wordmark{font-size:1.3rem}}
.reader-nav{display:flex;align-items:center;gap:1.1rem;margin-left:auto;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.reader-nav::-webkit-scrollbar{display:none}
.reader-nav a{font:700 .8rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--green);text-decoration:none;padding:.4rem 0}
.reader-nav a:hover{color:var(--gold-hover);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.reader-nav a.nav-subscribe{background:var(--gold);color:var(--ink-on-gold);padding:.55rem .9rem;border-radius:999px}
.reader-nav a.nav-subscribe:hover{background:var(--gold-hover);color:#fff;text-decoration:none}
.site-header nav#primary-nav{display:flex;gap:1.1rem;margin-left:auto;align-items:center}
.site-header nav#primary-nav a{font:700 .8rem var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--green);text-decoration:none;padding:.4rem 0}
.site-header nav#primary-nav a:hover{color:var(--gold-hover);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.menu-button{display:none;font:700 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;
  background:var(--green);color:var(--cream);border:0;border-radius:4px;padding:.6rem .9rem;min-height:44px;cursor:pointer}
/* Primary CTA (P8). In the header it is the gold standing CTA. */
.subscribe-button{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--cream)!important;
  font:700 1rem var(--sans);text-decoration:none;padding:.875rem 1.5rem;min-height:48px;border-radius:4px;border:0;cursor:pointer;
  transition:background .18s ease}
.subscribe-button:hover{background:var(--green-deep);color:var(--cream)!important}
.site-header .subscribe-button{background:var(--gold);color:var(--ink-on-gold)!important;font-size:.85rem;
  padding:.6rem 1rem;min-height:44px;flex:none}
.site-header .subscribe-button:hover{background:var(--gold-hover);color:#fff!important}
@media (max-width:900px){
  .menu-button{display:inline-flex;align-items:center;order:3}
  .site-header nav#primary-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:29;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;padding:.5rem 1rem .9rem;
    background:var(--cream);border-bottom:1px solid var(--gold)}
  .site-header nav#primary-nav.open{display:flex}
  .site-header nav#primary-nav a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .site-header nav#primary-nav a:last-child{border-bottom:0}
  .site-header .subscribe-button{margin-left:auto}
}
@media (max-width:560px){
  .site-header .subscribe-button{font-size:.72rem;line-height:1.2;text-align:center;max-width:9.5rem;padding:.45rem .6rem;min-height:44px}
}

/* Edition (home + Issue 02) */
.edition{max-width:820px;margin:0 auto;padding:0 1.25rem 4rem}
.edition p{max-width:68ch}
.edition section p{line-height:1.7}
.magazine-cover{position:relative;margin:1.25rem -1.25rem 0;border-radius:0 0 4px 4px;overflow:hidden}
.magazine-cover-image{width:100%;height:min(62vh,560px);object-fit:cover;display:block}
.magazine-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,42,34,.05),rgba(10,42,34,.78))}
.magazine-cover-copy{position:absolute;left:0;right:0;bottom:0;padding:2rem;color:var(--cream)}
.magazine-cover-copy h1{font:600 clamp(2.375rem,6vw + 1rem,3.75rem)/1.05 var(--serif);letter-spacing:-.02em;margin:.4rem 0 .8rem;color:#fff}
.magazine-cover-copy .section-label{color:var(--gold-bright)}
.edition-deck{font-size:1.1875rem;line-height:1.5;max-width:34rem;margin:0 0 .8rem}
.edition-byline{font:700 .82rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#EFE3C0;margin:0}
.edition h2{margin:.2rem 0 1rem}
.edition h3{font:600 clamp(1.25rem,2vw + 1rem,1.45rem)/1.3 var(--serif);color:var(--green)}
.edition section{padding-top:3rem;margin-top:3rem;border-top:1px solid var(--line)}
@media (min-width:768px){.edition section{padding-top:5.5rem;margin-top:3.5rem}}
.chapter-intro{font-size:1.1875rem;line-height:1.55;color:var(--ink-soft)}
/* Contents: editorial rows with hairlines, no box (P5) */
.edition-contents{margin-top:2.6rem}
.edition-contents h2{margin:0 0 .4rem}
.contents-intro{color:var(--muted);margin:.2rem 0 1rem}
.edition-contents ol{margin:0;padding:0;list-style:none;counter-reset:contents}
.edition-contents li{counter-increment:contents;border-bottom:1px solid var(--line)}
.edition-contents li a{display:flex;align-items:baseline;gap:.9rem;padding:.9rem 0;font:600 1.08rem var(--sans);
  color:var(--green);text-decoration:none}
.edition-contents li a::before{content:counter(contents,decimal-leading-zero);font:700 .8rem var(--sans);color:var(--muted)}
.edition-contents li a::after{content:"→";margin-left:auto;color:var(--gold);transition:transform .18s ease}
.edition-contents li a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.edition-contents li a:hover::after{transform:translateX(2px)}
.publisher-portrait{float:right;width:210px;margin:.4rem 0 1rem 1.6rem;text-align:center}
.publisher-portrait img{border-radius:4px;border:3px solid var(--gold)}
.publisher-portrait figcaption{font:700 .85rem var(--sans);color:var(--green);margin-top:.5rem;line-height:1.4}
.edition figure{margin:1.4rem 0}
.edition figure img{border-radius:4px}
.edition figcaption{font:.85rem var(--sans);color:var(--muted);margin-top:.4rem}
.spotlight-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0 .4rem}
.spotlight-photos figure{margin:0}
.spotlight-photos img{width:100%;height:100%;object-fit:cover}
.spotlight-photo-credit{font:.85rem var(--sans);color:var(--muted)}
.spotlight-quote{border-left:3px solid var(--gold);margin:1.6rem 0;padding:.4rem 0 .4rem 1.3rem}
.spotlight-quote p{font:italic 600 1.45rem/1.4 var(--serif);color:var(--green);margin:0 0 .4rem}
.spotlight-quote cite{font:700 .9rem var(--sans);color:var(--green);font-style:normal}
.weekend-event-image{margin:1.2rem 0;max-width:430px}
.weekend-event-image a{display:block;overflow:hidden;border-radius:4px}
.weekend-event-image img{display:block;transition:transform .3s ease}
.weekend-event-image a:hover img{transform:scale(1.03)}
/* Tertiary CTA (P8): bold underlined text link */
.read-link{display:inline-block;font:700 .95rem var(--sans);color:var(--green);
  text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;padding-bottom:2px}
.read-link:hover{color:var(--gold-hover)}
.quiet-link{font:.95rem var(--sans);color:var(--muted)}
.data-period{font:700 .85rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
/* Takeaway box (P6) — also restyles the existing .edition-brief */
.takeaway,.edition-brief{background:var(--takeaway-bg);border-left:3px solid var(--gold);border-radius:4px;
  padding:1.25rem 1.5rem;margin:1.6rem 0;max-width:68ch}
.takeaway p,.edition-brief p{margin:.2rem 0;max-width:none}
.edition-brief h3{margin-top:.2rem}
/* Stat panel (P9): green data panel, hairline-divided, tabular figures */
.stat-panel{display:grid;grid-template-columns:1fr;background:var(--green);color:var(--cream);
  border-top:3px solid var(--gold);border-radius:4px;margin:1.6rem 0;overflow:hidden}
.stat-panel .stat{padding:1.3rem 1.4rem}
.stat-panel .stat + .stat{border-top:1px solid var(--line-cream)}
@media (min-width:700px){
  .stat-panel{grid-template-columns:repeat(3,1fr)}
  .stat-panel .stat + .stat{border-top:0;border-left:1px solid var(--line-cream)}
}
.stat-label{display:block;font:700 .75rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,240,224,.78);margin-bottom:.5rem}
.stat-num{display:block;font:800 2.25rem/1.05 var(--sans);font-variant-numeric:tabular-nums;color:#fff}
@media (min-width:768px){.stat-panel .stat-lead .stat-num{font-size:2.75rem}}
.stat-delta{display:block;margin-top:.5rem;font:.95rem/1.45 var(--sans);color:var(--cream)}
.source-note{font:.95rem/1.55 var(--sans);color:var(--ink-soft)}
/* Subscribe: the full-bleed green chapter (P4/P7) */
.edition section.subscribe-block{background:var(--green);color:var(--cream);border-top:3px solid var(--gold);
  width:100vw;margin-left:calc(50% - 50vw);margin-top:3.5rem;padding:3.5rem 1.25rem;border-radius:0}
.subscribe-inner{max-width:820px;margin:0 auto}
.subscribe-block h2{color:var(--cream)}
.subscribe-block .section-label{color:var(--gold-bright)}
.subscribe-block p{max-width:68ch}
.kit-signup{margin:1.2rem 0 .6rem;min-height:60px}
.signup-note{font:.95rem var(--sans);color:var(--cream);opacity:.92;margin:.4rem 0}
.signup-note a{color:var(--cream)}
.edition-signoff{margin-top:1.6rem;font-size:1.05rem}
.edition-sources{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.2rem}
.edition-sources summary{font:700 .95rem var(--sans);color:var(--green);cursor:pointer}
@media (max-width:640px){
  .spotlight-photos{grid-template-columns:1fr}
  .publisher-portrait{float:none;margin:0 auto 1rem}
}

/* Inner pages */
.section-wrap{max-width:1000px;margin:0 auto;padding:3rem 1.25rem 4.5rem}
.section-wrap section:not(.chart-panel):not(.market-method):not(.client-reviews){
  border-top:1px solid var(--line);padding-top:2.2rem;margin-top:2.2rem}
.market-intro{font-size:1.1875rem;line-height:1.6;max-width:68ch;color:var(--ink-soft)}
.market-controls{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 .6rem}
.market-controls label{font:700 .82rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--green);display:flex;flex-direction:column;gap:.4rem}
.market-controls select{font:1rem var(--sans);padding:.55rem .7rem;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.2rem 0}
.stats-grid>div,.stats-grid .stat{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:4px;padding:1rem 1.1rem}
.stats-grid .stat h2{font:700 .78rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:0 0 .4rem}
.stats-grid .stat strong{display:block;font:800 1.7rem/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--green-deep)}
.stats-grid .stat p{margin:.3rem 0 0;font:.9rem var(--sans);color:var(--muted)}
.chart-panel{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1.5rem 1.6rem;margin:1.8rem 0}
.chart-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.chart-heading h2{font-size:1.6rem;margin:.2rem 0}
.chart-heading label{font:700 .82rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--green);display:flex;flex-direction:column;gap:.4rem}
.chart-heading select{font:1rem var(--sans);padding:.5rem .6rem;border:1px solid var(--line);border-radius:4px}
#chart{width:100%;overflow-x:auto;margin-top:.8rem}
.market-note{font:.92rem/1.55 var(--sans);color:var(--muted)}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font:.95rem var(--sans);font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--line);padding:.45rem .6rem;text-align:left}
.market-method h2{font-size:1.6rem}
.subscribe-main{max-width:760px}
.subscribe-main .signup-note a{color:var(--green)}

/* Contact */
.contact-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:2.4rem;margin-top:1.8rem}
@media (max-width:820px){.contact-layout{grid-template-columns:1fr}}
#contact-form label{display:block;font:700 .85rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin:1rem 0 .35rem}
#contact-form input,#contact-form textarea{width:100%;font:1rem var(--sans);padding:.65rem .75rem;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--ink)}
.contact-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#contact-form .subscribe-button{margin-top:1.2rem}
.contact-portrait{border-radius:4px;border:3px solid var(--gold)}
.client-reviews{margin-top:3.4rem;border-top:1px solid var(--line);padding-top:2.2rem}
.client-reviews-heading{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:end}
.client-reviews h2{margin:.2rem 0}
.review-stars{color:var(--gold);font-size:1.3rem;letter-spacing:.2em}
.review-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.4rem}
.review-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1.2rem 1.3rem;margin:0}
.review-card h3{font:600 1.15rem var(--serif);color:var(--green);margin:.1rem 0 .6rem}
.review-card blockquote{margin:0 0 .6rem;font:italic 1.05rem/1.5 var(--serif);color:var(--ink)}
.review-context{font:.92rem var(--sans);color:var(--muted)}
.review-card figcaption{font:.9rem var(--sans);display:flex;flex-direction:column;gap:.1rem}
.review-source{margin-top:1.2rem;font:.92rem var(--sans);color:var(--muted)}

/* Footer as the final composition (P11) */
footer{background:var(--green);color:var(--cream);border-top:3px solid var(--gold);
  padding:4rem 1.25rem 2rem;text-align:left;margin-top:0}
footer>*{max-width:1000px;margin-inline:auto}
.footer-name{font:600 2.25rem/1.1 var(--serif);letter-spacing:.01em;color:var(--cream)}
.footer-name small{display:block;font:italic 400 1rem var(--serif);color:var(--gold-bright);margin-top:.25rem}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1.4rem auto}
footer nav a{color:var(--cream);font:700 .82rem var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
footer nav a:hover{color:var(--gold-bright)}
footer p{margin:.35rem auto;font:.95rem var(--sans)}
.brokerage-disclosure{color:var(--cream);opacity:.85}

/* Motion: one respectful reveal (P10) */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease-out,transform .5s ease-out}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* Edition cover without a photo (Edition 2): solid green cover, static copy */
.magazine-cover-text{background:linear-gradient(160deg,var(--green-deep),var(--green))}
.magazine-cover-text .magazine-cover-copy{position:static;padding:3rem 2rem}

/* Archive banner (Oct 30, 2026 restructure): slim strip on past editions */
.archive-banner{background:var(--green);color:var(--cream);text-align:center;
  padding:.6rem 1rem;font:700 .85rem/1.4 var(--sans);letter-spacing:.05em}
.archive-banner p{margin:0}
.archive-banner a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.archive-banner a:hover{color:var(--cream)}