/* coolhousearchive — stylesheet
   Tokens come straight from the brand brief. Blue is for identity and actions only. */

:root {
  --blue: #2468e8;
  --paper: #f6f4ef;
  --white: #ffffff;
  --ink: #171717;
  --graphite: #686761;
  --divider: #d9d6ce;

  /* TYPE RULEBOOK (full version in TYPE-RULES.md). Three families, nothing else:
     --serif  Georgia: headlines, house titles, editorial passages. Regular weight only.
     --sans   Inter: everything functional (body, UI, filters, prices, numbers).
     --accent IBM Plex Mono: small archive labels only (file numbers, status tags, category tags, counts). Never above 0.8125rem.
     The wordmark face (Inter Tight Bold) lives only inside assets/wordmark-*.png. Never set it as live text.
     No other family may be declared anywhere in this file. */
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --accent: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* sans scale: five steps, nothing in between */
  --t-xs: 0.75rem;     /* status tags, tiny tags */
  --t-s: 0.8125rem;    /* metadata, captions, counts, hints */
  --t-m: 0.9375rem;    /* interface: nav, filters, chips, buttons */
  --t-b: 1.0625rem;    /* body copy */
  --t-l: 1.25rem;      /* lede and intro paragraphs */

  /* heading scale: three steps, used for every h1 / h2 / h3 */
  --fs-1: clamp(2.4rem, 6.2vw, 6.2rem);
  --fs-2: clamp(2rem, 4.2vw, 3.8rem);
  --fs-3: clamp(1.4rem, 2.3vw, 2.1rem);

  --gutter: clamp(16px, 3.2vw, 44px);
  --max: 1680px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-b)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a, .prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1; margin: 0; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--graphite); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--divider);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; }
.wordmark { display: inline-block; line-height: 0; }
.site-header nav { display: flex; gap: clamp(14px, 2.4vw, 34px); font-size: var(--t-m); }
.site-header nav a { padding: 8px 0; border-bottom: 2px solid transparent; }
.site-header nav a:hover { color: var(--blue); }
.site-header nav a[aria-current="page"] { border-bottom-color: var(--blue); }
.site-header .wordmark { transition: opacity 0.2s; }
body[data-page="home"] .site-header .wordmark { opacity: 0; pointer-events: none; }
body[data-page="home"].scrolled .site-header .wordmark { opacity: 1; pointer-events: auto; }
@media (max-width: 620px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 8px; }
  
  .site-header nav { width: 100%; justify-content: space-between; }
  body[data-page="home"] .site-header .wordmark { display: none; }
}

/* ------------------------------------------------------------ type helpers */
.file { font-family: var(--accent); font-weight: 400; font-size: var(--t-s); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--graphite); }
.status { font-family: var(--accent); font-weight: 500; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border: 1px solid currentColor; display: inline-block; line-height: 1.4; }
.status.for-sale { color: var(--blue); }
.status.pending, .status.off-market, .status.unknown { color: var(--graphite); }
.status.sold, .status.archived { color: var(--ink); }
.status.not-a-listing { color: var(--graphite); border-style: dashed; }

/* ------------------------------------------------------------ images */
.media { background: var(--divider); overflow: hidden; position: relative; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.r-43 { aspect-ratio: 4 / 3; }
.r-32 { aspect-ratio: 3 / 2; }
.r-11 { aspect-ratio: 1 / 1; }
.r-169 { aspect-ratio: 16 / 9; }
.r-45 { aspect-ratio: 4 / 5; }
.r-21 { aspect-ratio: 2 / 1; }

/* ------------------------------------------------------------ home */
.masthead { padding-block: clamp(20px, 3vw, 40px) 0; }
.masthead h1 { margin: 0; line-height: 0; }
.masthead h1 img { width: 100%; height: auto; display: block; }
.masthead-row { display: grid; grid-template-columns: 1fr; gap: 24px 48px; align-items: end; padding: clamp(18px, 2.4vw, 32px) 0 clamp(22px, 3vw, 40px); }
@media (max-width: 760px) { .masthead-row { grid-template-columns: 1fr; } }


.lead { position: relative; display: block; }
.lead .media { aspect-ratio: 21 / 9; min-height: 56vh; }
.lead-text { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px clamp(24px, 5vw, 80px); padding-block: clamp(22px, 3vw, 44px) clamp(50px, 7vw, 110px); align-items: end; }
.lead-text h2 { font-size: var(--fs-1); }
.lead-text p { font-size: var(--t-l); max-width: 34ch; margin-bottom: 0.6em; }
.lead:hover h2 { color: var(--blue); }
@media (max-width: 860px) { .lead-text { grid-template-columns: 1fr; } .lead .media { aspect-ratio: 4/3; min-height: 0; } }

.section { padding: clamp(40px, 6vw, 96px) 0; border-top: 1px solid var(--divider); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(22px, 3vw, 44px); flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-2); }
.section-head a { color: var(--blue); border-bottom: 1px solid currentColor; }

.grid { display: grid; gap: clamp(28px, 3.4vw, 56px) clamp(16px, 2vw, 32px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid, .grid.three { grid-template-columns: 1fr; } }

.card { display: block; }
.card .media img { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.card:hover .media img { transform: scale(1.025); }
.card h3 { font-size: var(--fs-3); margin: 14px 0 8px; line-height: 1.02; }
.card:hover h3 { color: var(--blue); }
.card .where { margin: 0 0 4px; }
.card .traits { margin: 0 0 8px; color: var(--graphite); font-size: var(--t-m); }
.card .foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* browse by character: one long typographic index */
.char-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.char-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 0.12em 0 0.16em; border-bottom: 1px solid var(--divider); font: 400 var(--fs-1)/1 var(--serif); letter-spacing: -0.012em; transition: padding-left 0.25s, color 0.2s; }
.char-list a:hover { color: var(--blue); padding-left: 0.18em; }
.char-list .count { font: 400 var(--t-s) var(--accent); font-variant-numeric: tabular-nums; color: var(--graphite); white-space: nowrap; }

/* editor's file */

/* from the archive: horizontal run */
.run { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30vw); gap: clamp(16px, 2vw, 32px); overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x proximity; }
.run > * { scroll-snap-align: start; }
@media (max-width: 680px) { .run { grid-auto-columns: 82vw; } }

/* newsletter */
.letter { background: var(--blue); color: #fff; padding: clamp(36px, 6vw, 96px) 0; }
.letter .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(24px, 5vw, 80px); align-items: end; }
.letter h2 { font-size: var(--fs-1); }
.letter p { max-width: 32ch; }
.letter form { display: flex; border: 2px solid #fff; }
.letter input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px 16px; color: #fff; }
.letter input::placeholder { color: rgba(255,255,255,.75); }
.letter input:focus-visible { outline: none; background: rgba(255,255,255,.12); }
.letter button { border: 0; background: #fff; color: var(--blue); font-weight: 700; padding: 0 22px; cursor: pointer; }
.letter button:hover { background: var(--ink); color: #fff; }
.letter .msg { min-height: 1.6em; margin-top: 10px; }
.letter :focus-visible { outline-color: #fff; }
@media (max-width: 860px) { .letter .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ footer */

/* ------------------------------------------------------------ explore */
.page-top { padding-block: clamp(28px, 4vw, 64px) clamp(18px, 2vw, 28px); }
.page-top h1 { font-size: var(--fs-1); }
.page-top .lede { max-width: 40ch; margin-top: 14px; font-size: var(--t-l); }

.ideas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ideas button { border: 1px solid var(--divider); background: var(--white); padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: var(--t-m); }
.ideas button:hover { border-color: var(--blue); color: var(--blue); }

.explore { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); padding-block: clamp(24px, 3vw, 44px) clamp(60px, 8vw, 120px); align-items: start; }
.filters { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 6px; }
.filters h2 { font: 600 var(--t-m) var(--sans); letter-spacing: 0; margin-bottom: 12px; }
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; font-weight: 600; font-size: var(--t-m); margin-bottom: 6px; padding: 0; }
.field select { width: 100%; background: var(--white); border: 1px solid var(--divider); padding: 10px 12px; border-radius: 0; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select:focus-visible { border-color: var(--blue); }
fieldset.field { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.checks { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; border: 1px solid var(--divider); background: var(--white); padding: 6px 10px; }
.checks label { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: var(--t-m); margin: 0; padding: 5px 0; cursor: pointer; }
.checks input { accent-color: var(--blue); width: 16px; height: 16px; }
.filter-toggle, .filter-close { display: none; }

.results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); margin-bottom: 22px; }
.results-bar .count { font-weight: 600; }
.results-bar .controls { display: flex; gap: 14px; align-items: center; }
.results-bar select { background: var(--white); border: 1px solid var(--divider); padding: 7px 10px; border-radius: 0; }
.seg { display: inline-flex; border: 1px solid var(--divider); background: var(--white); }
.seg button { border: 0; background: transparent; padding: 7px 12px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chips button { background: var(--ink); color: #fff; border: 0; padding: 5px 10px; cursor: pointer; font-size: var(--t-m); }
.chips button:hover { background: var(--blue); }
.chips .clear { background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.coll-note { border-left: 4px solid var(--blue); padding: 4px 0 4px 18px; margin-bottom: 26px; }
.coll-note h2 { font-size: var(--fs-3); margin-bottom: 6px; }
.coll-note p { margin: 0; max-width: 54ch; }

.list .row { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--divider); }
.list .row h3 { font-size: var(--fs-3); margin-bottom: 8px; }
.list .row:hover h3 { color: var(--blue); }
@media (max-width: 560px) { .list .row { grid-template-columns: 1fr; } }

.empty { padding: 48px 0; max-width: 46ch; }
.empty h2 { font-size: var(--fs-2); margin-bottom: 12px; }
.empty ul { padding-left: 1.1em; }
.empty button { background: none; border: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }

@media (max-width: 960px) {
  .explore { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; border: 1px solid var(--ink); background: var(--white); padding: 8px 16px; cursor: pointer; font-weight: 600; }
  .filters { position: fixed; inset: auto 0 0 0; z-index: 70; max-height: 82vh; background: var(--paper); padding: 20px var(--gutter) 28px; border-top: 2px solid var(--ink); transform: translateY(105%); transition: transform 0.28s ease; box-shadow: 0 -30px 60px rgba(0,0,0,.18); }
  .filters.open { transform: none; }
  .filter-close { display: inline-block; position: absolute; top: 14px; right: var(--gutter); background: var(--ink); color: #fff; border: 0; padding: 8px 14px; cursor: pointer; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(23,23,23,.4); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .scrim.open { opacity: 1; pointer-events: auto; }
}

/* ------------------------------------------------------------ house page */
.house-head { padding-block: clamp(26px, 3.4vw, 52px) clamp(6px, 1vw, 14px); }
.house-head h1 { max-width: 22ch; }
.house-head h1 { font-size: var(--fs-1); }

.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); padding: clamp(24px, 4vw, 64px) 0; border-top: 1px solid var(--divider); }
.intro .serif { font: 400 clamp(1.45rem, 2.2vw, 1.9rem)/1.5 var(--serif); max-width: 32em; margin: 0; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-self: start; }
.facts dt, .facts dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--divider); }
.facts dt { color: var(--graphite); font-size: var(--t-m); }
.facts dd { font-weight: 500; }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr; } }


.traits-block { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 18px; list-style: none; }
.traits-block a { display: inline-block; border: 1.5px solid var(--ink); padding: 8px 16px; border-radius: 999px; font-weight: 500; }
.traits-block a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 4vw, 60px) 0; border-top: 1px solid var(--divider); }
.split h2 { font-size: var(--fs-3); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.listing-box { background: var(--white); border: 1px solid var(--divider); padding: clamp(18px, 2.4vw, 32px); max-width: 560px; }
.listing-box .price { font: 600 clamp(2rem, 4vw, 3rem)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 10px 0 8px; }
.btn { display: inline-block; background: var(--blue); color: #fff; padding: 12px 22px; font-weight: 600; border: 0; cursor: pointer; }
.btn:hover { background: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------ collections */
.coll { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(24px, 3.4vw, 52px) 0; border-top: 1px solid var(--divider); }
.coll:nth-of-type(even) .media { order: 2; }
.coll h2 { font-size: var(--fs-2); margin: 8px 0 12px; }
.coll:hover h2 { color: var(--blue); }
.coll p { max-width: 38ch; }
@media (max-width: 800px) { .coll { grid-template-columns: 1fr; } .coll:nth-of-type(even) .media { order: 0; } }

/* ------------------------------------------------------------ about / submit */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); padding: clamp(24px, 4vw, 64px) 0; border-top: 1px solid var(--divider); }
.about-grid h2 { font-size: var(--fs-3); }
.about-grid ul { padding-left: 1.1em; }
.about-grid li { margin-bottom: 0.4em; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.nope { color: var(--graphite); }

.logo-stage { padding: clamp(24px, 4vw, 56px) 0; }
.logo-stage img { width: min(100%, 420px); height: auto; }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.form { display: grid; gap: 20px; max-width: 640px; padding-bottom: clamp(50px, 7vw, 110px); }
.form label { display: block; font-weight: 600; margin-bottom: 6px; }
.form .hint { font-weight: 400; color: var(--graphite); font-size: var(--t-m); display: block; }
.form input, .form textarea, .form select { width: 100%; background: var(--white); border: 1px solid var(--ink); padding: 12px 14px; border-radius: 0; }
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
.form .ok { border-left: 4px solid var(--blue); padding-left: 14px; }

/* ------------------------------------------------------------ motion */
.reveal .media img { animation: unveil 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes unveil { from { clip-path: inset(0 0 100% 0); transform: scale(1.04); } to { clip-path: inset(0); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.credits{padding:0 0 clamp(28px,4vw,56px);max-width:90ch;margin:0}.credits a{text-decoration:underline}

.wordmark { display: inline-block; line-height: 0; }
.site-header .wordmark img { height: 22px; width: auto; display: block; }

/* ------------------------------------------------------------ admin */
.admin { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: clamp(50px, 7vw, 110px); }
.admin-form input:not([type="checkbox"]):not([type="range"]), .admin-form textarea, .admin-form select { width: 100%; background: var(--white); border: 1px solid var(--divider); padding: 10px 12px; border-radius: 0; }
.admin-form input[type="file"] { padding: 10px; }
.admin-form select { appearance: auto; }
.admin-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-form .checks { max-height: 190px; }
.admin-form .actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 6px; }
.posts h2 { font-size: var(--fs-3); margin-bottom: 14px; }
.post-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 16px; }
.post-tools label { font-weight: 600; font-size: var(--t-m); }
.post-tools input[type="range"] { accent-color: var(--blue); }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; align-items: start; }
.post canvas { width: 100%; height: auto; display: block; border: 1px solid var(--divider); background: var(--white); }
.post figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--t-m); flex-wrap: wrap; }
.post .btn { padding: 8px 14px; font-size: var(--t-m); }
.warn { background: var(--white); border-left: 4px solid var(--blue); padding: 10px 14px; }
@media (max-width: 1000px) { .admin { grid-template-columns: 1fr; } .posts { position: static; } }
@media (max-width: 520px) { .post-grid { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }
.empty-home { padding-block: clamp(50px, 9vw, 140px); }
.empty-home h2 { font-size: var(--fs-1); max-width: 12ch; }
.empty-home p { margin-top: 18px; max-width: 34ch; font-size: var(--t-l); }
.gate { padding-bottom: 24px; }
.gate-row { display: flex; gap: 12px; margin-top: 10px; }
.coll .media:empty { background: var(--divider); }

/* ------------------------------------------------------------ search */
.search-wrap { position: relative; }
.sug { position: absolute; top: 100%; left: 0; right: 0; z-index: 45; background: var(--white);  max-height: min(70vh, 520px); overflow-y: auto; }
.sug-head { font: 500 var(--t-s) var(--sans); color: var(--graphite); padding: 10px 16px 4px; text-transform: none; }
.sug-item { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 16px; cursor: pointer; font-size: var(--t-m); }
.sug-item.on, .sug-item:hover { background: #e8effd; }
.sug-type { font: 500 var(--t-xs) var(--accent); color: var(--graphite); border: 1px solid var(--divider); padding: 1px 7px; }
.sug-count { font: 400 var(--t-s) var(--accent); font-variant-numeric: tabular-nums; color: var(--graphite); min-width: 1.6em; text-align: right; }
.sug-item.house { grid-template-columns: 64px 1fr; }
.sug-item.house img { width: 64px; height: 48px; object-fit: cover; }
.searchbar.fill, .search-wrap .notice { margin: 10px 0 0; padding: 8px 12px; background: var(--white); border-left: 4px solid var(--blue); font-size: var(--t-m); }
.chips button.q { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.chips button.q:hover { background: var(--blue); color: #fff; }
mark { background: #dbe6fc; color: inherit; padding: 0 1px; }
.ideas .n, .checks .n, .empty .n { font: 400 var(--t-s) var(--accent); font-variant-numeric: tabular-nums; color: var(--graphite); margin-left: 4px; }
.checks label { justify-content: flex-start; }
.checks .n { margin-left: auto; }

.scrim { display: none; }
@media (max-width: 960px) { .scrim { display: block; } }

/* ------------------------------------------------------------ line breaks and measure */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; hyphens: none; }
p, li, dd, .hint, figcaption, .lede { text-wrap: pretty; }
p { max-width: 68ch; }
.credits { max-width: 90ch; }
.nw, .price, .status, .count, .n { white-space: nowrap; }
.char-list a { flex-wrap: nowrap; min-width: 0; }
.char-list .count { flex: none; }
.char-list a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.facts dd { overflow-wrap: anywhere; }
.card h3, .list .row h3 { overflow-wrap: break-word; }

/* phones and touch screens: comfortable tap targets, no iOS zoom on inputs */
@media (pointer: coarse) {
  .btn, .ideas button, .chips button, .seg button, .filter-toggle, .searchbar button,   .checks label { padding: 10px 0; }
  .site-header nav a { padding: 12px 0; }
  input, select, textarea { font-size: 1rem; }
}

/* ------------------------------------------------------------ the search bar (Latest and Explore share it) */
.search-wrap { position: relative; width: 100%; }
.searchbar { display: flex; align-items: stretch; width: 100%; background: var(--white); border: 2px solid var(--ink); }
.searchbar:focus-within { border-color: var(--blue); }
.searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 20px 22px; font-size: var(--t-l); line-height: 1.2; }
.searchbar input::placeholder { color: #8d8a82; }
.searchbar input:focus-visible { outline: none; }
.searchbar button { border: 0; background: var(--blue); color: #fff; font-weight: 600; font-size: var(--t-m); padding: 0 clamp(22px, 3vw, 40px); cursor: pointer; }
.searchbar button:hover { background: var(--ink); }
.sug { border: 2px solid var(--ink); border-top: 0; }
@media (max-width: 560px) { .searchbar input { padding: 15px 14px; font-size: 1rem; } .searchbar button { padding: 0 18px; } }

/* Explore keeps its own headline-sized search field */
.search-big { display: flex; border-bottom: 3px solid var(--ink); margin-top: clamp(18px, 2.4vw, 36px); }
.search-big input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 0; font: 400 var(--fs-2)/1.1 var(--serif); letter-spacing: -0.012em; }
.search-big input::placeholder { color: #a9a69d; }
.search-big input:focus-visible { outline: none; }
.search-big:focus-within { border-color: var(--blue); }
.search-big button { background: none; border: 0; color: var(--blue); font-weight: 600; cursor: pointer; padding: 0 0 0 18px; font-size: var(--t-b); }
.search-wrap > .search-big + .sug { border: 1px solid var(--ink); border-top: 0; }

/* small screens */
.results-bar .controls { flex-wrap: wrap; }
@media (max-width: 960px) { .explore { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .lead-text h2, .house-head h1 { font-size: var(--fs-2); } }
@media (max-width: 560px) {
  .results-bar .controls { width: 100%; }
  .results-bar .controls select { flex: 1; min-width: 0; }
  .page-top .lede { font-size: var(--t-b); }
}
.chips .clear { padding-left: 0; }

/* ------------------------------------------------------------ house hero: blue frame + liquid glass */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.frame-wrap { padding-top: clamp(14px, 2vw, 28px); }
.frame { position: relative; max-width: 1240px; margin-inline: auto; background: var(--blue); border-radius: clamp(18px, 2.2vw, 30px); padding: clamp(12px, 1.8vw, 26px); }
.frame-photo { border-radius: clamp(10px, 1.4vw, 18px); overflow: hidden; aspect-ratio: 3 / 2; width: 100%; background: var(--divider); }
.frame-photo img { width: 100%; height: 100%; object-fit: cover; }

.glass {
  position: absolute; z-index: 2;
  top: calc(clamp(12px, 1.8vw, 26px) + clamp(14px, 1.6vw, 22px)); bottom: calc(clamp(12px, 1.8vw, 26px) + clamp(14px, 1.6vw, 22px));
  right: calc(clamp(12px, 1.8vw, 26px) + clamp(14px, 1.6vw, 22px));
  width: min(370px, 34%);
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2vw, 28px);
  color: #fff; border-radius: clamp(18px, 2vw, 28px); isolation: isolate; overflow: hidden;
  /* tint: light sheen from the top left over a cool dark base so white text always reads */
  background:
    linear-gradient(145deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 38%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.16) 100%),
    rgba(14, 28, 60, .36);
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.06);
  backdrop-filter: blur(24px) saturate(1.8) brightness(1.06);
  border: 1px solid rgba(255,255,255,.34);
  /* the bright rim: top and left catch the light, bottom and right fall off */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.80),
    inset 1.5px 0 0 rgba(255,255,255,.38),
    inset 0 -1.5px 0 rgba(255,255,255,.14),
    inset -1px 0 0 rgba(255,255,255,.10),
    inset 0 0 36px rgba(255,255,255,.07),
    0 20px 44px rgba(8, 20, 50, .28);
}
/* specular glare */
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 55% at 18% -4%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), radial-gradient(80% 40% at 100% 100%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); }
/* Chromium only: add a gentle liquid ripple to what's behind the glass. Other browsers keep the plain blur above. */
@supports (backdrop-filter: url(#cha-liquid)) {
  .glass { -webkit-backdrop-filter: url(#cha-liquid) blur(20px) saturate(1.8) brightness(1.06); backdrop-filter: url(#cha-liquid) blur(20px) saturate(1.8) brightness(1.06); }
}
.glass-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.glass .file { color: rgba(255,255,255,.88); }
.glass .status { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.12); }
.glass-place { font-size: var(--fs-3); color: #fff; text-shadow: 0 1px 14px rgba(8,20,50,.35); }
.glass-price { margin: 12px 0 0; display: flex; flex-direction: column; gap: 2px; font: 600 clamp(2rem, 3.2vw, 2.8rem)/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 14px rgba(8,20,50,.35); }
.glass-label { font: 500 var(--t-s) var(--sans); letter-spacing: 0; opacity: .85; }
.glass-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.22); border-radius: 14px; overflow: hidden; }
.glass-facts div { background: rgba(14, 28, 60, .22); padding: 12px 14px; }
.glass-facts dt { font: 500 var(--t-s) var(--sans); color: rgba(255,255,255,.8); margin: 0 0 2px; }
.glass-facts dd { margin: 0; font: 600 1.35rem/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.glass-btn { display: block; text-align: center; padding: 13px 18px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--blue); font-weight: 600; font-size: var(--t-m); transition: background .2s; }
.glass-btn:hover { background: #fff; }
.glass-btn:focus-visible { outline-color: #fff; }
.glass-note { margin: -6px 0 0; font-size: var(--t-s); color: rgba(255,255,255,.8); text-align: center; }

@media (max-width: 960px) {
  /* phones and tablets: photo first, then a plain solid card inside the blue frame. No glass. */
  .glass { position: relative; inset: auto; width: auto; margin-top: 12px; gap: 16px; overflow: visible;
    background: var(--white); color: var(--ink); border: 0; box-shadow: none; text-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before { display: none; }
  .glass .file { color: var(--graphite); }
  .glass .status { color: var(--ink); border-color: currentColor; background: none; }
  .glass .status.for-sale { color: var(--blue); }
  .glass-place { color: var(--ink); }
  .glass-place, .glass-price { text-shadow: none; }
  .glass-label { color: var(--graphite); opacity: 1; }
  .glass-facts { background: var(--divider); }
  .glass-facts div { background: var(--paper); }
  .glass-facts dt { color: var(--graphite); }
  .glass-btn { background: var(--blue); color: #fff; }
  .glass-btn:hover { background: var(--ink); }
  .glass-btn:focus-visible { outline-color: var(--blue); }
  .glass-note { color: var(--graphite); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(14, 28, 60, .88); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.glass-facts dt { display: flex; align-items: center; gap: 7px; }
.glass-facts svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Pick a kind of house: the accent face labels each row like a filing tab */
.kind-meta { display: flex; align-items: baseline; gap: 14px; flex: none; }
.kind-type { font: 500 var(--t-xs) var(--accent); text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite); border: 1px solid var(--divider); padding: 3px 8px; transition: color .2s, border-color .2s; }
.char-list a:hover .kind-type { color: var(--blue); border-color: var(--blue); }
@media (max-width: 560px) { .kind-meta { flex-direction: column; align-items: flex-end; gap: 6px; } }

.lead-meta { color: var(--graphite); font-size: var(--t-m); margin: 0; }
.lead-meta .file { margin-left: 6px; }
.credits { color: var(--graphite); font-size: var(--t-s); }

/* ------------------------------------------------------------ gallery: every photo the same size */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); padding: 0 0 clamp(36px, 5vw, 80px); }
.gallery figure { margin: 0; }
.gallery .media { aspect-ratio: 3 / 2; border-radius: clamp(8px, 1vw, 14px); }
@media (max-width: 960px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* admin: finished-photo previews with a focus dot */
.thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.thumbs li { position: relative; }
.thumbs .thumb { all: unset; display: block; position: relative; width: 100%; aspect-ratio: 3 / 2; background: var(--divider); cursor: crosshair; border-radius: 6px; overflow: hidden; }
.thumbs .thumb:focus-visible { outline: 3px solid var(--blue); }
.thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); pointer-events: none; }
.thumbs .tag { display: inline-block; margin-top: 6px; background: var(--blue); color: #fff; font: 500 var(--t-xs) var(--accent); padding: 2px 8px; }
.thumbs .mk { margin-top: 6px; background: none; border: 1px solid var(--divider); padding: 2px 8px; font-size: var(--t-xs); cursor: pointer; }
.thumbs .mk:hover { border-color: var(--blue); color: var(--blue); }
.thumbs .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(23,23,23,.85); color: #fff; cursor: pointer; line-height: 1; }

/* ------------------------------------------------------------ footer
   Structure and water background ported from np-tech.com's footer (same author), recoloured in Archive Blue.
   Brand column left, contact form / links / copyright stacked right. The wash settles at --f-night. */
.site-footer { --f-sky: #8fb4f6; --f-blue: #2468e8; --f-dark: #1b52c4; --f-deep: #123a94; --f-night: #0a1f52; }
main::after { content: ""; display: block; height: 150px; background: var(--footer-lead, var(--paper)); }
/* --- Footer ---------------------------------------------------------------
   Structure from communityfiber.net's footer (the family of companies as a
   column of white logos behind a hairline, contact and legal to the right),
   so the parent and its operating companies close the same way.
   The ground is weighted water: lighter swells drift along the top edge and
   the blue deepens downward until it always settles at --blue-night. The
   light layers are masked to the empty band above the content; over the
   text the wash only ever darkens, so the worst case is --blue at 5.6:1. */
.site-footer {
    /* Width of one wave curve: wide, so only a few long swells show. */
    --shore-w: clamp(1800px, 220vw, 3200px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Pulled up into the last section's bottom padding, so the soft top of
       the footer rises out of that section's own surface. */
    margin-top: -140px;
    /* The shoreline tilts down to the left, so on wide screens the content
       starts lower to keep the left column in the water. */
    padding: max(260px, calc(150px + 4.4vw)) 5% 40px;
    /* Clear over the 140px overlap (the section above shows through), then
       the last section's own colour, set by main.js as --footer-lead, so
       the space above the tilted shoreline continues that section's
       surface instead of showing a band of body colour. */
    background: linear-gradient(180deg, transparent 140px, var(--footer-lead, transparent) 140px);
    color: var(--paper);
    text-align: left;
}

/* Two irregular shoreline shapes drifting in opposite directions, each
   frosted by a blur on their shared parent (a blur on the masked element
   itself runs before the mask and gets cut back to a hard edge). The back wave runs to the bottom of the footer and is its body —
   sky at the crest, settling at --blue-night — so nothing else draws a
   line. The wash overhangs the footer's sides and bottom, so the blur never
   feathers the box edges. The curves are 100px tall and the footer overlaps
   the section above by 140px, so the troughs stay over that section's own
   surface and the crests stay clear of its content. Each shape is a mask tiled three times
   across a strip that slides one tile width: a seamless loop on transform. */
.footer-wash {
    position: absolute;
    inset: 0 -60px -60px;
    z-index: -2;
    filter: blur(16px);
    pointer-events: none;
}

.footer-wash::before,
.footer-wash::after {
    content: '';
    position: absolute;
    left: 0;
    width: calc(var(--shore-w) * 3);
    will-change: translate, top;
}

.footer-wash::before {
    /* The shoreline tilts gently (-2.5 degrees), the opposite way to the corner wave:
       pinned at its current height on the right edge and dropping to the
       left. The strip pivots on the footer's right edge and drifts along
       its own tilt. */
    left: calc(100% - 2 * var(--shore-w));
    top: 60px;
    width: calc(var(--shore-w) * 3 + 200px);
    height: calc(100% + 700px);
    transform-origin: calc(2 * var(--shore-w) - 60px) 0;
    will-change: transform, top;
    background: linear-gradient(180deg, var(--f-sky) 20px, var(--f-blue) 85px, var(--f-dark) 150px, var(--f-deep) 380px, var(--f-night) 700px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 96C120 96 220 46 380 50C560 54 640 118 820 116C1000 114 1080 62 1240 70C1340 75 1380 96 1440 96V160H0Z'/%3E%3C/svg%3E") 0 0 / var(--shore-w) 100px repeat-x, linear-gradient(#000, #000) 0 99px / 100% calc(100% - 99px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 96C120 96 220 46 380 50C560 54 640 118 820 116C1000 114 1080 62 1240 70C1340 75 1380 96 1440 96V160H0Z'/%3E%3C/svg%3E") 0 0 / var(--shore-w) 100px repeat-x, linear-gradient(#000, #000) 0 99px / 100% calc(100% - 99px) no-repeat;
    animation: footer-shore-tilt 60s linear infinite, footer-breathe-a 8s ease-in-out infinite alternate;
}

.footer-wash::after {
    /* The second wave rises from the bottom-left at 15 degrees: its crest
       meets the left edge ~300px above the bottom (200px on phones) and
       runs almost the full width before meeting the bottom, so its water
       fills most of the lower footer.
       It drifts along its own diagonal (transform), and breathes in and out
       of the corner (translate). The crest is kept soft (~40% sky) because
       the logos and links sit on it; over the darkest water that keeps
       footer text well above 4.5:1. */
    left: -400px;
    top: calc(100% - 519px);
    height: 360px;
    transform-origin: 0 0;
    will-change: transform, translate;
    background: linear-gradient(180deg, rgba(143, 180, 246, .4) 30px, rgba(36, 104, 232, .75) 110px, rgba(27, 82, 196, .55) 230px, rgba(27, 82, 196, 0) 360px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 70C150 70 260 122 450 112C640 102 720 56 900 60C1080 64 1180 118 1320 104C1390 97 1420 70 1440 70V160H0Z'/%3E%3C/svg%3E") 0 0 / var(--shore-w) 100px repeat-x, linear-gradient(#000, #000) 0 99px / 100% calc(100% - 99px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 70C150 70 260 122 450 112C640 102 720 56 900 60C1080 64 1180 118 1320 104C1390 97 1420 70 1440 70V160H0Z'/%3E%3C/svg%3E") 0 0 / var(--shore-w) 100px repeat-x, linear-gradient(#000, #000) 0 99px / 100% calc(100% - 99px) no-repeat;
    animation: footer-shore-diag 44s linear infinite, footer-breathe-b 9s ease-in-out -4s infinite alternate;
}

/* The deep water under the text: brand-blue and near-navy pools trading
   places, so the motion reads as light and shade moving. Masked in from
   below the shoreline. */
.site-footer::before {
    content: '';
    position: absolute;
    top: max(210px, calc(60px + 4.4vw));
    left: -30%;
    right: -30%;
    bottom: -25%;
    z-index: -1;
    background:
        radial-gradient(22% 30% at 20% 24%, var(--f-blue), transparent),
        radial-gradient(30% 38% at 52% 40%, var(--f-night), transparent),
        radial-gradient(22% 30% at 80% 26%, var(--f-blue), transparent),
        radial-gradient(26% 34% at 36% 72%, var(--f-night), transparent),
        radial-gradient(20% 28% at 66% 70%, rgba(36, 104, 232, .7), transparent),
        radial-gradient(28% 36% at 92% 62%, var(--f-night), transparent);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 220px);
    mask: linear-gradient(180deg, transparent 0, #000 220px);
    filter: blur(24px);
    animation: footer-current 24s ease-in-out infinite alternate, footer-pulse 8s ease-in-out infinite alternate;
    pointer-events: none;
}

/* The shoreline drifts along its tilt on `transform` and breathes on `top`,
   so the two motions layer instead of overwriting each other; it rises only 12px so it
   stays clear of the section above. The corner wave drifts along its own
   diagonal (`transform`) and breathes in and out of the corner on
   `translate`, out of phase with the shoreline and the pulsing pools. */
@keyframes footer-shore-tilt {
    from { transform: rotate(-2.5deg) translateX(0); }
    to { transform: rotate(-2.5deg) translateX(calc(-1 * var(--shore-w))); }
}

@keyframes footer-shore-diag {
    from { transform: rotate(15deg) translateX(calc(-1 * var(--shore-w))); }
    to { transform: rotate(15deg) translateX(0); }
}

@keyframes footer-breathe-a {
    from { top: 60px; }
    to { top: 48px; }
}

@keyframes footer-breathe-b {
    from { translate: 0 0; }
    to { translate: 6px -21px; }
}

/* Phones end sections on 64px of padding, so the swell is shallower. */
@media (max-width: 700px) {
    @keyframes footer-breathe-a {
        from { top: 60px; }
        to { top: 54px; }
    }
    .footer-wash::after { top: calc(100% - 419px); }
    @keyframes footer-breathe-b {
        from { translate: 0 0; }
        to { translate: 4px -14px; }
    }
}

@keyframes footer-pulse {
    from { opacity: .6; }
    to { opacity: 1; }
}

@keyframes footer-current {
    0% { transform: translate(11%, 0) rotate(0deg); }
    50% { transform: translate(-12%, -8%) rotate(-3deg); }
    100% { transform: translate(9%, 6%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer::before, .footer-wash::before, .footer-wash::after { animation: none; }
}

.footer-content { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); grid-template-areas: "brand contact" "brand links" "brand base"; grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 7vw, 96px); width: min(1240px, 90%); margin-inline: auto; }
.footer-brand { grid-area: brand; padding-right: clamp(32px, 5vw, 64px); border-right: 1px solid rgba(246, 244, 239, .22); }
.footer-brand img { display: block; width: min(100%, 260px); height: auto; margin-bottom: 18px; }
.footer-brand p { color: rgba(246, 244, 239, .85); max-width: 26ch; }

.footer-contact { grid-area: contact; margin: 0 0 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(246, 244, 239, .22); }
.footer-title { font: 400 var(--fs-3)/1.08 var(--serif); letter-spacing: -0.012em; color: #fff; margin-bottom: 10px; max-width: 24ch; }
.footer-lede { color: rgba(246, 244, 239, .88); max-width: 56ch; margin-bottom: 20px; }
.footer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; max-width: 780px; }
.footer-form .full { grid-column: 1 / -1; }
.footer-form label { display: block; margin-bottom: 5px; font-weight: 600; font-size: var(--t-s); color: #fff; }
.footer-form .hint { display: block; font-weight: 400; color: rgba(246, 244, 239, .78); }
.footer-form input:not([type="checkbox"]), .footer-form select, .footer-form textarea { width: 100%; background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px; padding: 11px 13px; font-size: var(--t-m); }
.footer-form select option { color: var(--ink); background: #fff; }
.footer-form ::placeholder { color: rgba(255, 255, 255, .62); }
.footer-form textarea { min-height: 78px; resize: vertical; }
.footer-form :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.footer-send { display: flex; align-items: center; gap: 16px; }
.footer-form button[type="submit"] { background: #fff; color: var(--blue); border: 0; border-radius: 999px; padding: 12px 28px; font-weight: 600; font-size: var(--t-m); cursor: pointer; min-height: 44px; }
.footer-form button[type="submit"]:hover { background: var(--ink); color: #fff; }
.footer-form .ok, .footer-form .warn { margin: 0; padding: 10px 14px; background: rgba(255, 255, 255, .95); color: var(--ink); border-left: 4px solid var(--blue); border-radius: 0 8px 8px 0; }

.footer-links { grid-area: links; display: grid; grid-template-columns: repeat(2, max-content); gap: 0 56px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(246, 244, 239, .22); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: var(--t-m); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-base { grid-area: base; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.footer-copy { margin: 0 0 6px; color: rgba(246, 244, 239, .85); font-size: var(--t-s); max-width: 78ch; }
.footer-fine { color: rgba(246, 244, 239, .72); }
.footer-mark { flex: none; width: 96px; aspect-ratio: 859 / 469; background: var(--paper); opacity: .9; -webkit-mask: url("../assets/logo-rect.png") center / contain no-repeat; mask: url("../assets/logo-rect.png") center / contain no-repeat; }
.site-footer a:focus-visible { outline-color: #fff; }

@media (max-width: 700px) {
  .footer-content { display: block; }
  .footer-brand { margin-bottom: 32px; padding: 0 0 28px; border-right: 0; border-bottom: 1px solid rgba(246, 244, 239, .22); }
  .footer-form { grid-template-columns: 1fr; }
  .footer-links { gap: 0 32px; }
  .footer-base { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
}

/* honeypot: present in the page, invisible to people, tempting to bots */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* the logo stands in for the word "cool" inside a headline */
/* letters sit 87.4% down the image, so the image hangs 0.147em below the baseline to put the word on the text's baseline */
.inline-logo { display: inline-block; height: 1.17em; width: auto; vertical-align: -0.147em; margin: -0.3em 0 0 0.1em; }

/* ------------------------------------------------------------ about */
.about-intro { max-width: 46rem; padding: clamp(8px, 2vw, 24px) 0 clamp(36px, 5vw, 72px); }
.about-lede { font: 400 clamp(1.5rem, 2.5vw, 2.15rem)/1.35 var(--serif); letter-spacing: -0.01em; margin: 0 0 1.1em; max-width: none; }
.about-body { font: 400 clamp(1.2rem, 1.6vw, 1.4rem)/1.6 var(--serif); color: var(--graphite); margin: 0; max-width: 38em; }

.about-test { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); padding: clamp(32px, 4.5vw, 64px) 0; border-top: 1px solid var(--ink); }
.test-head h2 { font-size: var(--fs-2); margin-bottom: clamp(14px, 1.6vw, 22px); }
.test-head p { font: 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.45 var(--serif); margin: 0; max-width: 24em; }
.test-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.test-list li { position: relative; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--divider); font-size: var(--t-b); line-height: 1.45; }
.test-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 20px; height: 20px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.test-never { margin: 22px 0 0; color: var(--graphite); font-size: var(--t-m); max-width: 44ch; }
@media (max-width: 860px) { .about-test { grid-template-columns: minmax(0, 1fr); } }

/* room for the logo's blue shape to clear the line above */
.has-inline-logo { line-height: 1.17; }

/* ------------------------------------------------------------ admin ergonomics */
.actionbar { grid-column: 1 / -1; position: sticky; top: var(--hdr, 59px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--divider); }
.ab-left select { background: var(--white); border: 1px solid var(--divider); padding: 9px 12px; min-width: 220px; max-width: 360px; border-radius: 0; }
.ab-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
#a-msg { color: var(--graphite); font-size: var(--t-m); max-width: 36ch; }
.actionbar .btn { padding: 10px 18px; }
.actionbar .btn:disabled { opacity: .55; cursor: progress; }
@media (max-width: 620px) { :root { --hdr: 85px; } }

.posts { position: sticky; top: 92px; align-self: start; }
.step { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--divider); }
.step h2 { font: 600 var(--t-m) var(--sans); letter-spacing: 0; margin-bottom: 12px; }
.hint { color: var(--graphite); font-size: var(--t-s); margin: 8px 0 0; }
.drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 26px 16px; border: 2px dashed var(--ink); border-radius: 14px; background: var(--white); cursor: pointer; transition: border-color .15s, background .15s; }
.drop strong { font-size: var(--t-b); }
.drop span { color: var(--graphite); font-size: var(--t-m); }
.drop:hover, .drop.over { border-color: var(--blue); background: #eef3fe; }
.drop:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.quick-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.fold { border: 1px solid var(--divider); background: var(--white); border-radius: 10px; padding: 0 16px 4px; margin-bottom: 14px; }
.fold summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: var(--t-m); }
.fold[open] summary { border-bottom: 1px solid var(--divider); margin-bottom: 16px; }
.fold input:not([type="checkbox"]), .fold textarea, .fold select { background: var(--paper); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { border: 1px solid var(--divider); background: var(--white); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: var(--t-m); }
.tabs button:hover { border-color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chk { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--t-m); }
.chk input { accent-color: var(--blue); width: 16px; height: 16px; }
.post-tools select { background: var(--white); border: 1px solid var(--divider); padding: 7px 10px; border-radius: 0; max-width: 170px; }
.post { display: none; margin: 0; }
.post.on { display: block; }
.post canvas { max-height: 66vh; width: auto; max-width: 100%; margin: 0 auto; }
.pkg { margin-top: 18px; padding: 14px 16px; background: var(--white); border: 1px solid var(--divider); border-radius: 10px; }
.pkg .hint { margin-top: 6px; }
@keyframes filled { from { background-color: #cfe0ff; } to { background-color: transparent; } }
.filled { animation: filled 1.6s ease-out; }
input.filled, select.filled, textarea.filled { animation-name: filledfield; }
@keyframes filledfield { from { background-color: #cfe0ff; } to { background-color: var(--white); } }

/* admin: a tool page, so a compact header */
.gate-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: var(--t-m); }
body[data-page="admin"] .page-top { padding-block: clamp(14px, 2vw, 26px) 4px; }
body[data-page="admin"] .page-top h1 { font-size: var(--fs-3); }
body[data-page="admin"] .page-top .lede { font-size: var(--t-m); margin-top: 6px; max-width: 60ch; }
body[data-page="admin"] .gate { padding-bottom: 8px; }