/* /social/ starter packs — Settl design system (tokens mirror rebrand.css) */
/* Lagoon, matching landing.css and rebrand.css. The token was called --ember
   and held the pre-rebrand orange; renamed rather than just recoloured, since
   a token named after a colour it no longer holds is worse than no token.
   --accent-deep exists because the light accent cannot carry text: it is about
   2.4:1 on white, where the deep tone is about 4.9:1. Everything below that is
   TEXT, or carries white text, uses the deep one.

   2026-08-16: the colours were already Lagoon but the TYPE and the INK RAMP had
   drifted — this file was still on Inter Tight with the pre-rebrand warm ink
   (#14140F / #66645E / #ECEAE4), while rebrand.css had moved to Plus Jakarta
   Sans, a Bricolage Grotesque display face, and a cool ink ramp keyed to the
   lagoon. Values below are copied from the :root block of www/rebrand.css,
   which flutter/test/design/www_brand_sync_test.dart holds to
   GdIdentities.lagoon in flutter/lib/design/identity.dart. Keep them in step:
   if rebrand.css moves, this moves.
   The wordmark deliberately stays Source Serif 4 italic — that is the mark
   itself, not body type, and rebrand.css still loads the face for exactly it. */
:root { --accent: #00B3B0; --accent-deep: #007A82;
  --soft: #C9F4F1; --tint: #EAFBFA;
  --ink: #0D1717; --sec: #5D6C6C; --ter: #94A2A2;
  --paper: #FFFFFF; --bg: #F4FBFA; --line: #DCEFED;
  --serif: "Source Serif 4", "Tiempos Text", Georgia, serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --disp: "Bricolage Grotesque", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
.s-header { display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 24px; border-bottom: 1px solid var(--line); }
/* Typographic wordmark — same recipe as the landing's .brand-wordmark:
   italic 700 serif + accent period (the app-icon glyph, expanded). */
.s-brand { font-family: var(--serif); font-size: 24px; font-weight: 700;
  letter-spacing: -1px; line-height: 1; color: var(--ink); text-decoration: none; }
.s-brand em { font-style: italic; font-weight: 700; }
/* 2026-08 no-dot logo set: the accent period is gone from the wordmark.
   Do not reintroduce an .s-dot rule. Guarded by
   flutter/test/design/www_brand_sync_test.dart. */
.s-header span { color: var(--sec); font-size: 13px; }
.s-pack, .s-index { max-width: 680px; margin: 0 auto; padding: 40px 24px 80px; }
/* Post-rebrand display face. Bricolage is optical-size aware, so the headline
   takes a tighter track than the section heads rather than the same one. */
article h1, .s-index h1 { font-family: var(--disp);
  font-weight: 700; font-size: 34px; line-height: 1.14;
  letter-spacing: -0.02em; margin: 0 0 20px; }
article h2 { font-family: var(--disp); font-weight: 600;
  font-size: 23px; letter-spacing: -0.01em; margin: 36px 0 12px; }
/* Body links were 2.9:1 on white with ember, already under AA. */
article a { color: var(--accent-deep); }
article code { background: var(--tint); padding: 2px 6px; border-radius: 4px;
  font: 14px/1.5 var(--mono); }
article pre { background: var(--ink); color: #F4F4F5; padding: 16px 18px;
  padding-right: 78px; border-radius: 10px; position: relative;
  white-space: pre-wrap; word-break: break-word; }
article pre code { background: none; color: inherit; padding: 0;
  white-space: inherit; }
.s-copy { position: absolute; top: 10px; right: 10px; padding: 5px 11px;
  font: 600 12px/1.4 var(--sans); border: 0; border-radius: 8px;
  background: rgba(255,255,255,.16); color: #F4F4F5; cursor: pointer; }
.s-copy:hover { background: rgba(255,255,255,.28); }
article table { border-collapse: collapse; width: 100%; font-size: 15px; }
article th, article td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
article blockquote { border-left: 3px solid var(--accent); margin: 0; padding: 2px 18px; color: var(--sec); }
.s-github-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.s-github-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 17px; border-radius: 10px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; font: 700 14px/1.2 var(--sans);
  text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.s-github-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(13,23,23,.16); }
.s-github-btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.s-github-btn.secondary:hover { color: var(--accent-deep); border-color: var(--accent); }
.s-github-icon { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.s-skill-card { margin: 22px 0 30px; padding: 20px; border: 1px solid var(--line);
  border-radius: 14px; background: linear-gradient(145deg, #fff, var(--tint)); }
.s-skill-card strong { display: block; margin-bottom: 6px; font-family: var(--disp); font-size: 18px; }
.s-skill-card p { margin: 0; color: var(--sec); }
.s-capsule { margin-top: 56px; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; background: #FFFFFF; }
.s-capsule p { margin: 0 0 10px; font-weight: 600; }
.s-capsule div { display: flex; gap: 8px; }
.s-capsule input { flex: 1; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; }
.s-capsule button { padding: 11px 18px; border: 0; border-radius: 10px;
  background: var(--accent-deep); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.s-capsule .s-note { display: block; margin-top: 8px; color: var(--sec); }
.s-index .s-sub { color: var(--sec); margin: 0 0 28px; }
.s-day { display: flex; gap: 16px; align-items: baseline; padding: 14px 4px;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.s-day:hover strong { color: var(--accent-deep); }
.s-day-n { font: 600 13px/1 var(--mono);
  color: var(--accent-deep); min-width: 58px; }
.s-day-body { flex: 1; display: flex; flex-direction: column; }
.s-day-body em { color: var(--sec); font-style: normal; font-size: 14px; }
.s-day-cta { font-size: 12px; color: var(--sec); white-space: nowrap; }
.s-day-cta b { color: var(--ink); }
.s-footer { text-align: center; padding: 28px; border-top: 1px solid var(--line); }
.s-footer a { color: var(--sec); text-decoration: none; font-size: 15px; font-family: var(--serif); }
.s-footer em { font-style: italic; font-weight: 700; color: var(--ink); }
@media (max-width: 520px) { .s-day-cta { display: none; }
  article h1, .s-index h1 { font-size: 28px; } }

/* Launch-offer bar — sticky, mirrors the landing's .anbar (accent gradient).
   position:sticky reserves its own flow space, so it sits above the header
   on load and pins to the top on scroll without overlapping anything. */
.s-bar { position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: #fff;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 58%, #4FD1CE);
  /* Was rgba(194,74,31,.30) — pre-rebrand ember, missed by the colour sweep
     because a raw rgba() does not read as a brand token. Now keyed to lagoon. */
  box-shadow: 0 2px 16px rgba(0,122,130,0.30);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  animation: sBarDrop 0.7s cubic-bezier(0.16,1,0.3,1) backwards; }
.s-bar::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,0.30) 50%, transparent 82%);
  transform: translateX(-120%);
  animation: sBarShine 6s ease-in-out 1.4s infinite; }
.s-bar-inner { position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 9px 20px; max-width: 1100px;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.25; text-align: center; }
.s-bar-spark { font-size: 13px; opacity: 0.9; }
.s-bar-text { color: rgba(255,255,255,0.97); letter-spacing: 0.1px; }
.s-bar-text strong { font-weight: 700; color: #fff; }
.s-bar-star { font-size: 0.78em; vertical-align: super; opacity: 0.85; }
.s-bar-cta { display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.42);
  padding: 4px 13px; border-radius: 9999px;
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  transition: background 180ms ease, transform 180ms ease; }
.s-bar:hover .s-bar-cta { background: rgba(255,255,255,0.26); }
.s-bar-arrow { transition: transform 180ms ease; }
.s-bar:hover .s-bar-arrow { transform: translateX(3px); }
@keyframes sBarShine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes sBarDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (max-width: 600px) {
  .s-bar-inner { gap: 9px; padding: 8px 12px; font-size: 12px; }
  .s-bar-spark { display: none; }
  .s-bar-cta { font-size: 11.5px; padding: 3px 11px; } }
@media (prefers-reduced-motion: reduce) {
  .s-bar { animation: none; }
  .s-bar::before { display: none; } }