/* Squawesome site styles. Brand values come from /brand/styles.css; this file
   only arranges them. See brand/README.md for the doctrine. */

/* --- Base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--text-link);text-underline-offset:.18em;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
h1,h2,h3,p,blockquote{margin:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

.wrap{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter)}
.wrap-content{max-width:var(--container-content);margin:0 auto;padding:0 var(--gutter)}

/* --- Brand pieces --- */
.wordmark{font-family:var(--font-display);font-weight:var(--weight-black);letter-spacing:-.03em;color:var(--granite-800);white-space:nowrap}
.wordmark span{color:var(--sun-600)}
.kicker{font:var(--text-kicker);letter-spacing:var(--tracking-kicker);text-transform:uppercase}
.meta{font:var(--text-meta);letter-spacing:var(--tracking-meta);color:var(--text-faint)}
.tag{display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--radius-pill);border:var(--border-width) solid var(--c);background:var(--c);color:var(--snow-000)}

/* --- Masthead: the one glass surface --- */
.masthead{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:var(--border-width) solid var(--border-subtle)}
.masthead .wrap{height:var(--header-height);display:flex;align-items:center}
.masthead .home{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.masthead .home img{width:38px;height:38px;border-radius:50%}
.masthead .wordmark{font-size:19px}

/* --- Story header: photo under a full scrim --- */
.story-head{position:relative;background:var(--granite-800)}
.story-head > img{width:100%;height:clamp(340px,46vw,520px);object-fit:cover}
.story-head .over{position:absolute;inset:0;background:var(--scrim-full);display:flex;align-items:flex-end}
/* Wide screens: the headline fits in the lower part, so the lighter bottom
   scrim keeps it legible and leaves the sky and ridges clear. */
@media (min-width:900px){.story-head .over{background:var(--scrim-bottom)}}
.story-head .over .wrap-content{width:100%;padding-bottom:var(--space-8)}
.story-head h1{margin-top:var(--space-4);max-width:820px;font:var(--text-display-2);letter-spacing:var(--tracking-display);color:var(--text-inverse);text-wrap:balance}
.story-head + .credit{text-align:right;padding-top:var(--space-2)}
.credit a{color:inherit}
/* No photo: a solid granite inverse block in the photo header's place. */
.story-head.plain{padding:var(--space-10) 0 var(--space-8)}
.story-head.plain h1{margin-top:var(--space-4)}

/* --- Article --- */
.story{padding-top:var(--space-5);padding-bottom:var(--space-11)}
.byline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding-bottom:var(--space-5);border-bottom:var(--border-width) solid var(--border-subtle)}
.prose{max-width:var(--container-prose);margin-top:var(--space-6)}
.prose p,.prose li{font:var(--text-body)}
.prose p{margin-bottom:var(--space-5)}
.prose strong{font-weight:var(--weight-semibold);color:var(--text-strong)}
.prose h2{font:var(--text-h2);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:0 0 var(--space-4);text-wrap:balance}
.prose h3{font:var(--text-h3);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:var(--space-7) 0 var(--space-3);text-wrap:balance}
.prose ol,.prose ul{margin:0 0 var(--space-5);padding-left:1.4em}
.prose li{margin-bottom:var(--space-3)}
.prose li::marker{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--text-heading)}
.prose a{overflow-wrap:anywhere}
.prose .events li{margin-bottom:var(--space-5)}
.prose .events .when{display:block;margin:var(--space-1) 0;font:var(--text-meta);letter-spacing:var(--tracking-meta);color:var(--text-muted)}
.prose hr{border:0;border-top:var(--border-width) solid var(--border-subtle);margin:var(--space-8) 0}

/* --- Home feed --- */
.feed{padding-top:var(--space-8);padding-bottom:var(--space-11)}
.section-heading{padding-top:var(--space-3);border-top:3px solid var(--c);font:var(--text-h2);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5);margin-top:var(--space-5)}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);text-decoration:none;transition:var(--transition-control)}
.card h3{font:var(--text-h2);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;transition:color var(--dur-fast) var(--ease-standard)}
/* Not color:var(--text-body): typography.css reuses that name for the body
   font shorthand and wins the cascade, so the colour would be invalid. */
.card .dek{font:var(--text-body);color:var(--slate-700)}
.card .meta{margin-top:auto}
.card:hover{transform:var(--hover-lift);box-shadow:var(--shadow-md)}
.card:hover h3{color:var(--text-link)}
.card:active{transform:scale(var(--press-scale))}

/* --- Footer --- */
.footer{background:var(--surface-inverse);color:var(--text-inverse-muted);padding:var(--space-10) 0 var(--space-7)}
.footer .brand{display:flex;align-items:center;gap:var(--space-3)}
.footer .brand img{width:44px;height:44px;border-radius:50%}
.footer .wordmark{font-size:19px;color:var(--snow-000)}
.footer .wordmark span{color:var(--sun-500)}
.footer .note{margin-top:var(--space-4);font:var(--text-ui-sm);font-weight:var(--weight-regular);line-height:1.6;text-wrap:balance}

@media (max-width:600px){
  .story-head .over .wrap-content{padding-bottom:var(--space-7)}
  .story-head h1{font:var(--text-display-3);letter-spacing:var(--tracking-display)}
}