/* porchnote.guide until the marketing site exists (src/views/site.tsx). Persuade mode in the owner's
   design system: Petrona display, DM Sans text, the marketing call to action (pn-cta), the Lantern
   on a plate answering the pointer at intensity 0.8. Light and dark follow the system. Tokens and
   components load first from /brand/. */
@font-face { font-family: 'DM Sans'; src: url(/fonts/DMSans-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Petrona'; src: url(/fonts/Petrona-SemiBold-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; }
:root { --pn-intensity: 0.8; }
/* The Lantern figure's line weight (the design system's 1.1 px, made bolder at the owner's ask, 2026-11-10): one weight for every line. */
:root { --pn-figure-stroke: 2px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--pn-bg); }
body { margin: 0; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--pn-bg); color: var(--pn-fg); font: 400 17px/28px var(--font-sans); }
::selection { background: var(--pn-accent); color: var(--pn-accent-fg); }
a { color: var(--pn-link); text-underline-offset: 3px; }
:focus-visible { outline: var(--pn-focus-width) solid var(--pn-focus-ring); outline-offset: var(--pn-focus-width); border-radius: var(--pn-radius-sm); }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px); }

.top { padding-top: clamp(20px, 4vw, 40px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--pn-space-4); }
.logo img { display: block; width: 150px; height: auto; }
.signin { color: var(--pn-fg); font-weight: 500; text-decoration: none; padding: 10px 0; }
.signin:hover { text-decoration: underline; }

.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: clamp(48px, 9vh, 120px); }
h1 { font: 600 clamp(44px, 30px + 3.6vw, 76px)/1.02 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--pn-space-6); text-wrap: balance; }
.lede { font-size: clamp(17px, 16px + 0.35vw, 21px); line-height: 1.55; color: var(--pn-fg-muted); max-width: 34rem; margin: 0 0 var(--pn-space-8); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pn-space-3) var(--pn-space-6); }
/* The marketing call to action (pn-cta): Clay-deep by day, Lamp by night; a Button that rises. */
.cta { min-height: 52px; padding: 0 28px; background: var(--pn-cta-bg); border-color: var(--pn-cta-bg); color: var(--pn-cta-fg); font-size: 17px; font-weight: 700; text-decoration: none; }
.cta:hover, .cta:focus-visible { border-color: var(--pn-stroke-hi); }
.actions p { margin: 0; color: var(--pn-fg-muted); font-size: 15px; }
.figure { padding: clamp(16px, 3vw, 40px); }


@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: 40px 56px; }
  .figure { order: -1; max-width: 280px; padding: 0; }
}
/* The shared footer sits right under the hero here, on the hero's column (foot.css loads after). */
body > .pn-foot { margin-top: 0; }
body > .pn-foot .pn-foot-in { max-width: 72rem; padding-inline: clamp(16px, 5vw, 64px); }

/* Night falls where the Lantern hangs (public/porch.js): hovering its panel turns that panel dark
   (the dark theme on that region) and lights the lantern; both fade back on leave. */
[data-night] { transition: background-color var(--pn-dur-settle) linear, border-color var(--pn-dur-settle) linear, color var(--pn-dur-settle) linear; }
.pn-empty-figure[data-night] { padding: var(--pn-space-3); border-radius: var(--pn-radius-lg); }
[data-night][data-theme='dark'] { background: var(--pn-plate); color: var(--pn-fg); }
@media (prefers-reduced-motion: reduce) { [data-night] { transition: none; } }