/* Hey Tomo blog: the parts every page shares (header, footer, small icon actions, share row, text panel, notes,
   call to action) and the index. Each post has its own layout file: story.css (post 1) and night.css (post 2).
   public/ is copied as it is (no build step). Colours avoid hues 20 to 65 (no yellow or orange). */
:root {
  --bg: #FBFBFD; --bg-2: #F2F1F7; --fg: #0C0B14; --fg-2: #3B3A48; --muted: #6A6979; --line: rgba(12, 11, 20, .10);
  --accent: #5A47FF; --accent-soft: rgba(90, 71, 255, .09); --live: #16A36B; --card: #FFFFFF;
  --act-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 16px 0 color-mix(in srgb, var(--accent) 42%, transparent), 0 0 34px 2px color-mix(in srgb, var(--accent) 20%, transparent);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #07070B; --bg-2: #111118; --fg: #F4F3FA; --fg-2: #D3D2DE; --muted: #9C9BAD; --line: rgba(244, 243, 250, .12);
  --accent: #9C8CFF; --accent-soft: rgba(156, 140, 255, .14); --live: #3CCB8F; --card: #13131B;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.7 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }

/* header */
.bhdr { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line); }
.bhdr__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 10px 16px; }
.bhdr__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.bhdr__brand img { width: 30px; height: 30px; border-radius: 8px; }
.bhdr__nav { display: flex; align-items: center; gap: 18px; font-size: .9rem; color: var(--fg-2); }
.bhdr__nav a { text-decoration: none; }
.bhdr__nav a:hover { color: var(--fg); }

/* actions: small Lottie icons, a tooltip and a neon glow. Never big buttons. */
.licon { display: inline-block; width: 18px; height: 18px; }
.licon svg { display: block; }
.li-s { stroke: currentColor; }
.li-f, .lf-current { fill: currentColor; }
.act { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s, box-shadow .3s, transform .2s; }
.act:hover, .act:focus-visible { background: var(--accent-soft); color: var(--fg); box-shadow: var(--act-glow); outline: none; }
.act:active { transform: scale(.92); }
@media (hover: hover) {
  [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 50; padding: 6px 10px; border-radius: 9px; background: var(--fg); color: var(--bg); font: 500 .74rem/1.2 var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
  .bhdr [data-tip]::after { bottom: auto; top: calc(100% + 9px); left: auto; right: 0; transform: translateY(-4px); }
  .share li:last-child [data-tip]::after, .textpanel [data-tip]::after { left: auto; right: 0; transform: translateY(4px); }
  .share li:last-child [data-tip]:hover::after, .share li:last-child [data-tip]:focus-visible::after, .textpanel [data-tip]:hover::after, .textpanel [data-tip]:focus-visible::after { transform: none; }
  .bhdr [data-tip]:hover::after, .bhdr [data-tip]:focus-visible::after { transform: none; }
}
.toast { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 8px 14px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.share { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* shared prose bits */
.prose sup { font-size: .68em; line-height: 0; margin-left: 1px; }
.prose sup a { color: var(--accent); text-decoration: none; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.chips li { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); font-size: .9rem; font-family: var(--mono); }

/* the end of a post: call to action, share row, the text panel and numbered notes */
.end { max-width: 692px; margin: 0 auto; padding: 0 16px 20px; }
.cta { margin: 3.4em 0 0; padding: 32px; border-radius: 22px; background: var(--bg-2); }
.cta h2 { margin: 0 0 .6em; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.2; }
.cta p { margin: 0 0 1em; }
.cta p:last-child { margin-bottom: 0; }
.cta a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.sharerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 3em 0 0; padding: 18px 0; border-block: 1px solid var(--line); }
.sharerow h2, .textpanel h2, .notes h2 { margin: 0; font: 600 .8rem/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.textpanel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 1.6em 0 0; padding: 20px 22px; border-radius: 18px; background: var(--bg-2); }
.textpanel p { margin: 6px 0 0; font-size: .92rem; color: var(--fg-2); }
.notes { margin: 2.6em 0 0; font-size: .85rem; line-height: 1.6; color: var(--muted); }
.notes ol { margin: 12px 0 0; padding-left: 1.3em; }
.notes li { margin: 0 0 .7em; }
.notes li:target { color: var(--fg); }
.notes a { color: inherit; text-underline-offset: 2px; }
.notes .back { text-decoration: none; color: var(--accent); }
.foot { margin-top: 64px; padding: 28px 16px; border-top: 1px solid var(--line); text-align: center; font-size: .82rem; color: var(--muted); }

/* the index: a featured card and a second card, each previewing its post's own style */
.bidx { max-width: 1240px; margin: 0 auto; padding: 72px 16px 20px; }
.bidx__eyebrow { margin: 0 0 14px; font: 600 .78rem/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.bidx h1 { margin: 0 0 12px; font: 400 clamp(2.8rem, 7vw, 5.6rem)/.95 var(--serif); letter-spacing: -.02em; }
.bidx__dek { margin: 0 0 48px; max-width: 560px; color: var(--fg-2); font-size: 1.15rem; }
.feat { display: grid; grid-template-columns: 1.25fr 1fr; border-radius: 30px; overflow: hidden; background: linear-gradient(135deg, #EAF6EF, #EFEBFF); color: #0C0B14; text-decoration: none; transition: box-shadow .3s, transform .3s; }
.feat__art svg { display: block; width: 100%; height: 100%; }
.feat__txt { padding: 44px; align-self: center; }
.feat__kicker { display: flex; gap: 12px; margin: 0 0 16px; font: 600 .76rem/1.4 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #5A47FF; }
.feat__kicker span + span { color: #5E5D6D; }
.feat h2 { margin: 0 0 14px; font: 400 clamp(2rem, 3.6vw, 3.1rem)/1.02 var(--serif); }
.feat p { margin: 0; color: #3B3A48; }
.feat__num { display: block; margin-top: 22px; font: 500 .9rem/1 var(--mono); color: #0B6B47; }
.night-card { display: grid; grid-template-columns: 1fr 1.1fr; margin-top: 28px; border-radius: 30px; overflow: hidden; background: #0B0D2A; color: #F4F3FA; text-decoration: none; transition: box-shadow .3s, transform .3s; }
.night-card__art svg { display: block; width: 100%; height: 100%; }
.night-card__txt { padding: 40px; align-self: center; }
.night-card__kicker { margin: 0 0 14px; font: 500 .8rem/1.4 var(--mono); letter-spacing: .04em; color: #3CCB8F; }
.night-card h2 { margin: 0 0 12px; font: 650 clamp(1.5rem, 2.6vw, 2.1rem)/1.12 var(--font); letter-spacing: -.03em; }
.night-card p { margin: 0; color: #C9C6F2; }
.feat:hover, .feat:focus-visible, .night-card:hover, .night-card:focus-visible { box-shadow: var(--act-glow); transform: translateY(-2px); outline: none; }

@media (max-width: 860px) {
  .bhdr__nav .hide-sm { display: none; }
  .feat, .night-card { grid-template-columns: 1fr; }
  .feat__txt, .night-card__txt { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* sign-up band above the footer */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.join { padding-block: 72px 24px; padding-inline: 16px; }
.join__in { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px 40px; align-items: center; padding: 44px clamp(20px, 4vw, 52px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--card); }
.join__txt { min-width: 0; grid-row: span 2; }
.join__form { align-self: end; }
.join__kicker { margin: 0 0 8px; font: 500 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.join h2 { margin: 0 0 10px; font: 400 clamp(1.9rem, 3.6vw, 2.7rem)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.join__txt p:last-child { margin: 0; color: var(--fg-2); font-size: .98rem; }
.join__form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); transition: box-shadow .3s; }
.join__form:focus-within { box-shadow: var(--act-glow); }
.join__form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: .95rem; outline: none; }
.act--go { width: 40px; height: 40px; background: var(--accent); color: #fff; border-color: transparent; }
.act--go:hover, .act--go:focus-visible { background: var(--accent); color: #fff; }
.join__note { grid-column: 2; align-self: start; margin: 0 0 0 18px; font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) { .join__in { grid-template-columns: 1fr; } .join__txt { grid-row: auto; } .join__note { grid-column: 1; } }

/* footer */
.foot { text-align: left; padding: 44px 16px 28px; }
.foot__in { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; }
.foot__brand p { margin: 10px 0 0; max-width: 30ch; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.foot__col { display: flex; flex-direction: column; gap: 8px; font-size: .86rem; }
.foot__col b { font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.foot__col a { color: var(--muted); text-decoration: none; }
.foot__col a:hover { color: var(--accent); }
.foot__base { max-width: 1040px; margin: 32px auto 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
/* follow us: brand glyphs as small icon actions (tooltip, neon glow, a little hop on hover) */
.socials { display: flex; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.soc svg { display: block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.soc:hover svg, .soc:focus-visible svg { transform: translateY(-2px) rotate(-8deg) scale(1.08); }
.p-night .soc { color: var(--text-2); border-color: var(--edge); }

/* end of a post: who wrote it, then a magazine strip to keep reading (one wide story, two smaller reads) */
.kr { padding: 24px 16px 8px; }
.kr__in { max-width: 1040px; margin: 0 auto; }
.byline { display: flex; gap: 18px; align-items: flex-start; max-width: 720px; margin: 0 auto 56px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.byline img { flex: none; width: 56px; height: 56px; border-radius: 14px; }
.byline p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--fg-2); }
.byline__k { font: 600 .68rem/1.4 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; }
.byline__n { margin: 2px 0 6px !important; font: 400 1.5rem/1.1 var(--serif) !important; color: var(--fg) !important; }
.byline a { color: var(--accent); font-weight: 500; }
.kr h2 { margin: 0 0 18px; font: 400 clamp(2rem, 4vw, 2.6rem)/1.05 var(--serif); letter-spacing: -.01em; color: var(--fg); }
.kr__grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.kr__wide { grid-row: span 2; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.kr__art { display: block; min-height: 100%; overflow: hidden; background: var(--bg-2); }
.kr__wide--night .kr__art { background: #0B0D2A; }
.kr__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.kr__txt { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.kr__wide b { font: 400 2rem/1.05 var(--serif); color: var(--fg); }
.kr__s { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.kr__s b { font: 400 1.4rem/1.1 var(--serif); color: var(--fg); }
.kr__k { font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.kr__d { font-size: .9rem; line-height: 1.55; color: var(--fg-2); }
.kr__m { margin-top: auto; font-size: .8rem; color: var(--muted); }
.kr__wide:hover, .kr__wide:focus-visible, .kr__s:hover, .kr__s:focus-visible { transform: translateY(-3px); box-shadow: var(--act-glow); outline: none; }
.kr__wide:hover .kr__art img { transform: scale(1.04); }
@media (max-width: 860px) {
  .kr__grid { grid-template-columns: 1fr; }
  .kr__wide { grid-row: auto; grid-template-columns: 1fr; }
  .kr__art { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .kr__wide, .kr__s, .kr__art img { transition: none; } }