/* Journal, About, Newsletter, Contact and policy pages in the Espresso system. Loaded after lp.css. */
.seo-breadcrumb{padding-top:36px;font-size:13px;color:var(--muted)}
.seo-breadcrumb a{text-decoration:none;color:var(--muted)}
.seo-breadcrumb a:hover{color:var(--gold)}
.kicker{margin:0 0 22px;font:700 13px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--muted);max-width:32em;margin:24px 0 32px}
.button{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--on-gold);border:0;border-radius:999px;padding:14px 26px;font:600 15px/1.2 var(--text);text-decoration:none;cursor:pointer;transition:background .2s,transform .1s}

.textlink{color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.fineprint{font-size:14px;color:var(--muted);margin-top:16px}
.page-intro{padding-block:72px 64px;max-width:900px}
.page-intro h1,.article-title h1{font-size:clamp(44px,5.4vw,80px)}
.section{padding-block:96px}
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.editorial h2{font-size:clamp(30px,3vw,44px);margin-bottom:20px}
.editorial p{color:var(--muted);max-width:34em}
.about-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;padding-bottom:64px}
.about-hero .page-intro{padding-bottom:0}
.about-portrait{margin:0}
.about-portrait img{display:block;width:100%;height:auto;border-radius:24px}
.about-portrait figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.about-note,.signup-panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:40px}
.about-note h3,.signup-panel h2{margin-bottom:16px}
.about-note p,.signup-panel p{color:var(--muted)}
.newsletter-landing{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;max-width:none}
.age-check{display:flex;gap:12px;align-items:flex-start;margin:24px 0;font-size:16px;color:var(--ink)}
.age-check input{width:22px;height:22px;margin-top:2px;accent-color:var(--gold)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.filters button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font:500 14px var(--text);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.journal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding-bottom:120px}
.journal-item a{display:block;height:100%;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 22px 28px;text-decoration:none;transition:transform .3s,border-color .3s}
.journal-item a:hover{transform:translateY(-3px);border-color:var(--gold-2)}
.journal-item h2,.journal-item h3{font-size:24px;margin:8px 0 10px}
.journal-item p{color:var(--muted)}
.journal-image{margin-bottom:22px}
.tag{margin:0;font:700 12px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.editorial-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;aspect-ratio:16/10;padding:28px;border-radius:18px;background:radial-gradient(80% 90% at 50% 40%,#3a2918,var(--surface) 70%);border:1px solid var(--line);color:var(--muted)}
.editorial-cover .cover-label{font:700 12px/1.4 var(--text);letter-spacing:.18em;color:var(--gold-2)}
.editorial-cover strong{font:var(--display-weight) clamp(48px,6vw,96px)/1 var(--display);color:var(--gold);letter-spacing:-.02em}
.article-title{padding-block:56px 48px;max-width:920px}
.article-title .textlink{display:inline-block;margin-bottom:28px;text-decoration:none}
.byline{color:var(--muted);font-size:14px}
.article-figure{margin-bottom:72px}
.article-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;padding-bottom:120px}
.article-layout aside{position:sticky;top:104px;align-self:start;font-size:15px}
.article-layout aside nav a{display:block;padding:8px 0;color:var(--muted);text-decoration:none;border-top:1px solid var(--line)}
.article-layout aside nav a:hover{color:var(--gold)}
.article-layout aside .textlink{display:inline-block;margin-top:20px}
.article-copy{max-width:700px}
.article-copy h2{font-size:clamp(28px,2.6vw,38px);margin:56px 0 18px}
.article-copy section:first-child h2,.article-copy>h2:first-child{margin-top:0}
.article-copy p,.article-copy li{font-size:19px;line-height:1.75;color:var(--ink)}
.article-copy a{color:var(--gold)}
.article-copy blockquote{margin:32px 0;padding:24px 28px;border-left:2px solid var(--gold);background:var(--card);border-radius:0 16px 16px 0;font:var(--display-weight) 24px/1.4 var(--display)}
.article-copy figure{margin:40px 0}
.article-copy img{border-radius:18px;height:auto}
.article-copy figcaption,.article-copy small{font-size:14px;color:var(--muted)}
.policy{padding-bottom:120px}
.policy h2{font-size:28px}
@media(max-width:900px){
  .editorial,.about-hero,.newsletter-landing,.article-layout{grid-template-columns:1fr;gap:40px}
  .article-layout aside{position:static}
  .journal-grid{grid-template-columns:1fr}
  .section{padding-block:72px}
  .page-intro{padding-block:48px 40px}
}
/* Letter sign-up block and inline films */
.newsletter{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:48px}
.newsletter h2{font-size:clamp(30px,3vw,44px);margin-bottom:16px}
.newsletter p{color:var(--muted)}
.newsletterbox{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.newsletterbox small{font-size:14px;color:var(--muted)}
.concept-media{margin:0 auto;max-width:1000px}
.concept-media .motion-frame{position:relative;isolation:isolate;aspect-ratio:1344/768;overflow:hidden;border-radius:24px;background:#0b0806;border:1px solid var(--line)}
.concept-media .motion-frame img,.concept-media .motion-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.concept-media .motion-frame video{opacity:0;transition:opacity .8s}
.concept-media.is-ready .motion-frame video{opacity:1}
.concept-media figcaption{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}
.concept-media:hover .motion-toggle{opacity:1}
@media(max-width:900px){.newsletter{grid-template-columns:1fr;padding:32px 24px;gap:28px}}

/* Phone pass (13 Oct): 44px tap targets */
@media(max-width:760px){
  .seo-breadcrumb{padding-top:24px}
  .seo-breadcrumb a{display:inline-block;padding:12px 4px;margin-inline:-4px}
  :not(p,li)>.textlink{position:relative}
  :not(p,li)>.textlink::before{content:'';position:absolute;inset:-12px -6px}
}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* Primary button: one system for links and <button>s (lit brass, offset shadow, drawn arrow). */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border:0;border-radius:999px;font-family:inherit;font-weight:600;line-height:1.2;letter-spacing:.01em;text-decoration:none;cursor:pointer;color:var(--on-gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 78%,#fff) 0%,var(--gold) 52%,color-mix(in srgb,var(--gold) 84%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.2),0 8px 20px -10px rgba(0,0,0,.9);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .2s;-webkit-tap-highlight-color:transparent}
.button:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.2),0 14px 28px -12px rgba(0,0,0,.95)}
.button:active{transform:translateY(0) scale(.98);filter:brightness(.96);transition-duration:.08s}
.button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.button:disabled,.button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.button:not(:has(svg))::after{content:"";flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.button[target="_blank"]::after{rotate:-45deg}
.button:hover::after{translate:3px 0}
.button[target="_blank"]:hover::after{translate:2px -2px}
@media (prefers-reduced-motion:reduce){.button,.button::after{transition:none}.button:hover,.button:hover::after{transform:none;translate:0}}

/* Buttons inside article copy keep dark text on the gold pill; the CTA row wraps cleanly (was guide.css only) */
.article-copy .button{color:var(--on-gold);text-decoration:none}
.guide-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
/* Footnotes under article copy: normal line spacing instead of the 19px body's 1.75 */
.article-copy p small{display:block;line-height:1.5}
/* Phone pass: less empty space before the footer (the footer brings its own 56px) */
@media(max-width:760px){.article-layout,.policy{padding-bottom:48px}}