/* Gabi Lipan — page layouts for the live site (home, work, writing, about, contact, tools, pinboard).
   Loaded after site.css (tokens, header) and components.css (the building blocks documented at
   /build/system/). Only things that no component covers live here. */

/* The prototype home in site.css styled a bare .band; here every band is placed on a ground. */
.band { text-align: left; }
.band--center { text-align: center; }
.band p { opacity: 1; }
.band form.input-join { max-width: 520px; margin: var(--s4) auto 0; flex-direction: row; }
.band .input { border-color: currentColor; }
.band .input::placeholder { color: inherit; opacity: .7; }
.band .input:focus { outline-color: var(--yellow); }

.nav-links a[aria-current], .menu-panel a[aria-current] { color: var(--fg); }

/* ── Page headings ───────────────────────────────────────── */
.page-head { display: grid; gap: var(--s2); padding-top: var(--s5); padding-bottom: var(--s4); }
.page-head .h1 { max-width: 18ch; }
.head-tools { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: space-between; margin-top: var(--s3); }
a.chip { text-decoration: none; }
.btn-group .btn { text-decoration: none; }
.btn-group .btn.is-on { cursor: default; }

/* ── Home ────────────────────────────────────────────────── */
.hero-c .mk { display: block; width: 72px; height: 72px; margin: 0 auto var(--s4); overflow: visible; }
.hero-c .btn-row { gap: var(--s3); }
.sec-head.between { margin-bottom: var(--s4); }
.project--feature .media { grid-row: 1; }
.rows .post-row:first-child, .rows .post-row.is-first { border-top: 0; }
.rows .post-row:last-of-type { border-bottom: 0; }

/* ── Case study ──────────────────────────────────────────── */
.case-head { display: grid; gap: var(--s3); padding-top: var(--s5); padding-bottom: var(--s4); }
.case-head .h1 { max-width: 20ch; }
.container > .facts { margin-bottom: var(--s3); }
.case-cover { padding-bottom: var(--s3); }
.case-gallery figure.wide { grid-column: 1 / -1; }
.next { margin-top: var(--s5); margin-bottom: var(--s5); }

/* ── Article ─────────────────────────────────────────────── */
/* The article is a column beside a panel, so the page is as wide as every other page. The text stays narrow. */
/* The panel's width and the gap before it are registered values, so they can animate: hiding the panel (script sets data-side="float") takes them to 0 and the
   article column grows into the room, and showing it again takes them back. */
@property --art-w { syntax: "<length>"; inherits: false; initial-value: 320px; }
@property --art-gap { syntax: "<length>"; inherits: false; initial-value: 80px; }
.article-grid { --art-w: 320px; --art-gap: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr) var(--art-w); column-gap: var(--art-gap); align-items: start; }
.article-main { width: 100%; min-width: 0; }
/* The text's measure (and the line under the title) fill the column when the panel is hidden, and settle back to a comfortable line length beside the panel */
/* (an @property initial value may not use font-relative units such as ch, or the whole rule is dropped and nothing animates: so these are in px, about 64ch of the text and 52ch of the line under the title) */
@property --art-measure { syntax: "<length-percentage>"; inherits: true; initial-value: 737px; }
@property --art-lede { syntax: "<length-percentage>"; inherits: true; initial-value: 699px; }
.article-grid { --art-measure: 737px; --art-lede: 699px; }
.article-main .prose { max-width: var(--art-measure); }
.article-main .article-head .lede { max-width: var(--art-lede); }
.article-grid.is-moving { transition: --art-w .72s cubic-bezier(.45, 0, .15, 1), --art-gap .72s cubic-bezier(.45, 0, .15, 1), --art-measure .72s cubic-bezier(.45, 0, .15, 1), --art-lede .72s cubic-bezier(.45, 0, .15, 1); }
.article-side { position: sticky; top: 96px; padding-top: var(--s5); }
.side-panel { display: grid; gap: var(--s3); padding: var(--s3); max-height: calc(100vh - 120px); overflow-y: auto; corner-shape: squircle; }
.side-panel > section { display: grid; gap: var(--s1); }
.side-panel > section + section { padding-top: var(--s3); border-top: 1px solid var(--line); }
.side-h { margin: 0 0 4px; font: 700 15px/1.3 var(--display); letter-spacing: -0.01em; }
.side-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* "On this page": no rule down the side. Each part has a small dot; the part being read lights up yellow. */
.side-panel .toc { list-style: none; margin: 6px 0 0; padding: 0; border: 0; display: grid; gap: 0; }
.side-panel .toc a { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; color: var(--muted); font-size: 15px; line-height: 1.35; text-decoration: none; transition: color .2s; }
.side-panel .toc a::before { content: ""; position: static; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transform: translateY(-1px); transition: background-color .25s, transform .5s var(--spring); }
.side-panel .toc a:hover { color: var(--fg); }
.side-panel .toc a:hover::before { background: var(--muted); }
.side-panel .toc a.is-active { color: var(--fg); font-weight: 600; }
.side-panel .toc a.is-active::before { top: auto; bottom: auto; left: auto; width: 7px; background: var(--yellow); transform: translateY(-1px) scale(1.45); }
.side-panel .toc .toc-sub a { padding-left: 19px; font-size: 14px; }
.side-panel .toc .toc-sub a::before { width: 5px; height: 5px; }
.side-posts a { display: grid; gap: 2px; padding: 8px 0; color: inherit; text-decoration: none; }
.side-posts time { color: var(--muted); font-size: 13px; }
.side-posts b { font: 600 16px/1.3 var(--text); }
.side-posts a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.side-author { display: grid; margin: 0; }
.side-author span { color: var(--muted); font-size: 14px; }
/* Tablet: the panel stays beside the article, a little narrower. Phone: without script the panel sits under the article; with it, it is the floating button (below). */
@media (max-width: 1000px) {
  .article-grid { --art-w: 260px; --art-gap: var(--s4); }
}
@media (max-width: 760px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .article-side { position: static; padding-top: var(--s4); }
  .side-panel { max-height: none; }
}
/* The panel's own button to hide it (script turns it on) and the round button that takes its place */
.side-hide { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 32px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 13px/1 var(--text); cursor: pointer; transition: background-color .2s; }
.side-hide[hidden] { display: none; }
.side-hide:hover { background: var(--bg); }
.side-hide .icon { width: 16px; height: 16px; }
.side-hide:focus-visible, .side-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.side-fab { display: none; }
/* Floating mode (data-side="float", set by script): one wider column for the article, a frosted round button at the corner, and the panel opening above it
   as frosted glass like the header and the menus. Tapping outside, Escape or a link inside closes it. */
.article-grid[data-side="float"] { --art-w: 0px; --art-gap: 0px; --art-measure: 100%; --art-lede: 100%; }
.article-grid[data-side="float"] .side-fab, .article-grid.is-opening .side-fab { position: fixed; z-index: 30; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); transition: transform .5s var(--spring); }
.article-grid[data-side="float"] .side-fab:hover { transform: scale(1.06); }
.article-grid[data-side="float"] .side-fab[aria-expanded="true"] { background: var(--fg); color: var(--bg); }
.article-grid[data-side="float"] .article-side { position: fixed; z-index: 29; top: auto; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100vw - 32px)); padding: 0; visibility: hidden; opacity: 0; transform: translateY(10px) scale(.97); transform-origin: 100% 100%; transition: opacity .2s, transform .5s var(--spring), visibility 0s .5s; }
.article-grid[data-side="float"] .article-side.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.article-grid[data-side="float"] .side-panel { max-height: min(70vh, calc(100dvh - 120px)); max-height: min(70dvh, calc(100dvh - 120px)); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); corner-shape: squircle;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); }
@media (prefers-reduced-motion: reduce) { .article-grid[data-side="float"] .article-side { transition: none; } }
.article-head { display: grid; gap: var(--s3); padding-top: var(--s5); padding-bottom: var(--s4); }
.article-head .h1 { font-size: clamp(36px, 5vw, 56px); }
.article-head .lede { max-width: 52ch; }
.article-cover { padding-bottom: var(--s4); }
.article-cover .figcap { margin-top: 10px; }
.byline { color: var(--muted); }
.byline b { display: inline; margin-right: 10px; }

.prose { max-width: 64ch; font-size: 18px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose blockquote { margin: 1.8em 0; padding: 0 0 0 var(--s3); border-left: 8px solid var(--fg); font: 700 24px/1.3 var(--display); letter-spacing: -0.03em; }
.prose blockquote p { margin: 0; }
.prose pre:not(.code-pre) { margin: 1.5em 0; padding: var(--s3); background: var(--surface); border-radius: var(--r-inner); corner-shape: squircle; overflow-x: auto; font: 500 14px/1.7 ui-monospace, "SF Mono", Menlo, monospace; }
.prose pre:not(.code-pre) code { background: none; padding: 0; border-radius: 0; font: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; margin: 1.6em 0; }
.prose th { text-align: left; font-weight: 600; padding: 10px 20px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.prose td { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--r-inner); corner-shape: squircle; margin: 1.6em 0; }
.prose li.task { list-style: none; margin-left: -1.3em; }
.prose li.task input { margin-right: 8px; }
.prose h2, .prose h3 { scroll-margin-top: 96px; }

/* ── About / contact ─────────────────────────────────────── */
.about-top { padding-top: var(--s5); }
.about-top .split { gap: var(--s5); grid-template-columns: 5fr 7fr; }
.contact { padding-top: var(--s5); gap: var(--s5); }
.contact .card { padding: var(--s4); }
.contact .badge { align-items: flex-start; }
.contact .badge::before { margin-top: 7px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { min-height: 1.4em; }

/* ── Tools ───────────────────────────────────────────────── */
.tool .mark { font: 800 22px/1 var(--display); letter-spacing: -0.04em; }
.tool--soon { cursor: default; }
.tool--soon:hover { transform: none; }
.tool--soon .mark { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* ── Pinboard ────────────────────────────────────────────── */
.board { height: min(78vh, 760px); min-height: 520px; }
/* Work: the pinboard runs the full width of the window; the grid view stays in the page's column */
.work-board { padding-bottom: var(--s5); }
.board--full { border-radius: 0; }
.head-tools { align-items: center; }
.pin-link { display: block; color: inherit; text-decoration: none; }
.pin--tag .pin-link { display: inline; }
.pin, .pin a, .pin img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.pin-list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s4); }
.pin-list .project p { margin: 0; }
.pin--note, .pin--quote { cursor: grab; }

/* ── Footer ──────────────────────────────────────────────── */
.site-foot { margin-top: var(--s5); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s4); }
.foot-brand p { margin: var(--s2) 0 0; max-width: 30ch; color: var(--muted); font-size: 15px; }
.site-foot .brand { margin-right: 0; }
.site-foot .legal a { color: inherit; text-decoration: none; }
.legal-links { display: flex; gap: var(--s3); }
.site-foot .legal a:hover { color: var(--fg); }
.band + .site-foot { margin-top: 0; }

@media (max-width: 900px) {
  .about-top .split { grid-template-columns: 1fr; gap: var(--s4); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .contact .card { padding: var(--s3); }
  .page-head, .case-head, .article-head { padding-top: var(--s4); }
  .band form.input-join { flex-direction: column; }
}
@media (max-width: 700px) {
  .board { display: none; }
  .pin-list { display: grid; }
  /* A pinboard section set to "Show the board on phones": the board itself, a little shorter, with the hint moved out of the zoom buttons' way */
  .work-board--phones .board { display: block; height: 68svh; min-height: 420px; }
  .work-board--phones .pin-list { display: none; }
  .work-board--phones .board-hint { bottom: auto; top: 16px; }
  .hero-c { padding-top: var(--s5); }
}

/* Items the filter chips show and hide (filter.js) */
[data-filter-item][hidden], [data-filter-empty][hidden] { display: none !important; }
.filter-in { animation: filter-in .5s var(--spring) both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes filter-in { from { opacity: 0; transform: translateY(10px); } }

/* ── Sections added in the admin (src/site/sections.ts) ── */
.sec-quote { margin: 0; }
.sec-quote blockquote { margin: 0; padding: 0 0 0 var(--s3); border-left: 8px solid var(--fg); font: 700 clamp(24px, 3.4vw, 36px)/1.25 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.sec-quote .figcap { margin: var(--s2) 0 0 calc(var(--s3) + 8px); font-size: 15px; }
.sec-tp .stack { align-self: center; }

/* ── Section boxes: background, spacing, alignment ── */
.sx-bg-surface { background: var(--surface); }
.sx-sp-none > section, .sx-sp-none > header, .sx-sp-none > .band { padding-top: 0; padding-bottom: 0; }
.sx-sp-tight > section, .sx-sp-tight > header, .sx-sp-tight > .band { padding-top: var(--s3); padding-bottom: var(--s3); }
.sx-sp-loose > section, .sx-sp-loose > header, .sx-sp-loose > .band { padding-top: var(--s6); padding-bottom: var(--s6); }
.sx-al-center .page-head { justify-items: center; text-align: center; }
.sx-al-center .page-head .h1, .sx-al-center .page-head .lede { margin-left: auto; margin-right: auto; }
.sx-al-center .prose { margin-left: auto; margin-right: auto; text-align: center; }
.sx-al-center .prose ul, .sx-al-center .prose ol { display: inline-block; text-align: left; }
.sx-al-center .container--narrow > div[style] { text-align: center; }
.sx-al-center .sec-quote blockquote { padding-left: 0; border-left: 0; text-align: center; }
.sx-al-center .sec-quote .figcap { margin-left: 0; text-align: center; }
.work-tools { padding-bottom: var(--s3); }
.prose--wide { max-width: none; }
.sec-quote--small blockquote { font-size: 22px; border-left-width: 6px; }
.sec-quote--small .figcap { margin-left: calc(var(--s3) + 6px); }
.r-auto img { height: auto; }

/* ── Columns ── */
.sx-cols { display: grid; grid-template-columns: var(--tpl, 1fr 1fr); gap: var(--s4); align-items: start; }
.sx-cols--center { align-items: center; }
.sx-col { min-width: 0; }
.sx-col .h2, .sx-col .h3, .sx-col .h4 { margin: 0; }
.sx-spacer--s { height: var(--s2); } .sx-spacer--m { height: var(--s4); } .sx-spacer--l { height: var(--s5); }
@media (max-width: 800px) { .sx-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }
.sx-ph { color: var(--muted); font-style: italic; }
.sx-ph--box { padding: var(--s3); border: 2px dashed var(--line); border-radius: var(--r-inner); corner-shape: squircle; text-align: center; margin: 0; }

/* ── Video ── */
.r-9-16 { aspect-ratio: 9 / 16; }
.media iframe, .media video { display: block; width: 100%; height: 100%; border: 0; background: var(--black); }
.sx-video { max-width: 100%; }
.sx-video.r-9-16 { max-width: 420px; margin-left: auto; margin-right: auto; }
.form-note { margin: 0; }
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ── Interface, not reading ──
   Things you press, menus, tags and labels are not text to select (a drag across a card or a button should never highlight its words).
   Reading text is: body text, headings and summaries stay selectable, and so do links inside written text. Fields always are. */
a, button, .btn, .chip, .tag, .badge, .seg, .menu-btn, .menu-panel, .nav-bar, .nav-pill, .brand, .skip, .crumbs, .legal, .site-foot a,
.project, .post-row, .tool, .pin, .board, .board-zoom, .board-hint, .head-tools, .btn-group, .side-panel, .side-fab, .side-hide, .toc, label.switch, .label { -webkit-user-select: none; user-select: none; }
.prose a, .figcap a { -webkit-user-select: text; user-select: text; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }   /* (Safari will not type into a field inside something that cannot be selected) */

/* The panel flying into the round button (and back): a copy of the panel that morphs between its two shapes (see ARTICLE_SIDE_JS in src/site/pages.ts) */
.side-ghost { border: 0; corner-shape: squircle; will-change: left, top, width, height; }
.article-grid.is-moving .side-fab { z-index: 32; }
.article-grid.is-opening .side-fab { display: grid; pointer-events: none; }   /* the button stays until the panel has grown out of it */
.side-ghost.side-panel { max-height: none; }
.article-side.side-hold { visibility: hidden; }
.article-grid.is-moving[data-side="float"] .article-side { visibility: hidden; opacity: 0; transition: none; }   /* while the copy flies into the button, the real panel stays out of sight (it would show as a second panel fading at the corner) */