/* ============================================================
   STUDIO KILN — THE CARD (bio.studiokiln.io)
   The structural stylesheet of a THEMED page. Every color, face,
   radius and shadow reads a custom property; the published page
   carries a small <style> block (written by the renderer from the
   theme in the database) that sets them. The defaults below ARE
   the KILN preset, so a page with no theme block prints the house
   card exactly.

   No JavaScript anywhere behind this file. The resting state is
   the design; motion is an enhancement gated on reduced-motion.
   ============================================================ */

:root {
  /* --- Inks (KILN defaults; the look block overrides) --- */
  --bg-paper: #FAF6F0;      /* the page ground when solid; also the night's text */
  --ink:      #14110F;      /* primary text */
  --muted:    #5C2A1F;      /* secondary text */
  --accent:   #BD4B1F;      /* the attention color: arrows, tags, hovers */
  --accent-lit: #D55523;    /* the accent as text on the inverted band */
  --line:     #2B2621;      /* hairlines */
  --vermilion: #D0342C;     /* the KILN mark's own ink; used nowhere else */

  /* --- Type --- */
  --f-head:  "Switzer", system-ui, sans-serif;
  --f-body:  "Switzer", system-ui, sans-serif;
  --f-label: "Fragment Mono", ui-monospace, monospace;

  /* --- Link buttons (only read when the look says buttons) --- */
  --btn-bg:  #111111;
  --btn-ink: #FFFFFF;
  --btn-radius: 0px;

  /* --- Rhythm --- */
  --dz: 1; /* density multiplier: compact .7 · regular 1 · airy 1.45 */
  --trim: clamp(18px, 5.5vw, 36px);
  --ms: clamp(10px, 2.9vw, 13px);
  --ms-act: max(var(--ms), 12px);
  --measure: 640px;

  --hover: 380ms;
  --ease-hover: cubic-bezier(0.35, 0.05, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- KILN's own faces, self-hosted; other pairs come from the look block --- */
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("fonts/fragment-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-paper); /* replaced by the look block's own background */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

::selection { background: var(--accent); color: var(--bg-paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; }

/* --- The label register: the small tracked voice --- */
.mono {
  font-family: var(--f-label);
  font-size: var(--ms);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ============================================================
   THE RUNNING HEAD
   ============================================================ */
.head {
  max-width: calc(var(--measure) + 2 * var(--trim));
  margin-inline: auto;
  padding: calc(var(--trim) * 0.8) var(--trim) 0;
}
.head .rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  opacity: 0.72;
}
.head .rule span { white-space: nowrap; }

/* ============================================================
   THE SHEET
   ============================================================ */
.sheet {
  max-width: calc(var(--measure) + 2 * var(--trim));
  margin-inline: auto;
  padding: 0 var(--trim);
}

section { padding-block: calc(clamp(34px, 7vh, 64px) * var(--dz)); }

.label {
  margin: 0 0 18px;
  font-weight: 400;
  opacity: 0.72;
  color: inherit;
}

[data-align="center"] .sheet { text-align: center; }
[data-align="center"] .label { text-align: inherit; }

/* ============================================================
   HEADER — mark or avatar, the name, the blurb
   ============================================================ */
.header { padding-top: calc(clamp(40px, 9vh, 88px) * var(--dz)); }

.mark {
  display: block;
  width: clamp(52px, 14vw, 72px);
  height: auto;
  color: var(--ink);
  margin-bottom: clamp(20px, 4vh, 32px);
}
.mark[data-ink="vermilion"] { color: var(--vermilion); }
[data-align="center"] .mark { margin-inline: auto; }

.avatar {
  display: block;
  width: clamp(84px, 24vw, 112px);
  height: clamp(84px, 24vw, 112px);
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: clamp(20px, 4vh, 32px);
}
.avatar[data-shape="circle"] { border-radius: 50%; }
[data-align="center"] .avatar { margin-inline: auto; }

.wordmark {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(40px, 11.5vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
/* A softer head for the non-shouting pairs: the look block can set
   --wordmark-case and --wordmark-size when a theme wants a name, not a mark. */
[data-case="none"] .wordmark { text-transform: none; letter-spacing: -0.015em; font-size: clamp(32px, 9vw, 56px); }

.blurb {
  margin: clamp(14px, 3vh, 22px) 0 0;
  max-width: 34ch;
  font-size: clamp(17px, 4.6vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--muted);
}
[data-align="center"] .blurb { margin-inline: auto; }

/* ============================================================
   LINKS — two settings of the same rows.
   ROWS: the ledger — a link sits ON a 1px rule.
   BUTTONS: the plate — each link its own shaped block.
   ============================================================ */
.links { padding-block: calc(clamp(22px, 5vh, 44px) * var(--dz)); }

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(12px, 3.2vw, 20px);
  padding-block: calc(clamp(16px, 3.6vw, 22px) * var(--dz));
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  min-height: 44px;
}
.row:first-of-type { border-top: 1px solid var(--line); }

.row .ord { opacity: 0.72; transition: color var(--hover) var(--ease-hover), opacity var(--hover) var(--ease-hover); }
.row .body { min-width: 0; text-align: left; }
.row .tag { display: block; font-size: var(--ms); color: var(--accent); margin-bottom: 6px; }
.row .lab {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(20px, 5.8vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  transition: color var(--hover) var(--ease-hover);
}
.row .note { display: block; margin-top: 7px; font-size: var(--ms); color: var(--muted); }
.row .way {
  color: var(--accent);
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1;
  transition: transform var(--hover) var(--ease-hover);
}
.row:hover .lab, .row:focus-visible .lab { color: var(--accent); }
.row:hover .ord, .row:focus-visible .ord { color: var(--accent); opacity: 1; }
.row:hover .way, .row:focus-visible .way { transform: translateX(6px); }

/* A link's own thumbnail, either setting; the row grows a track for it */
.row:has(.thumb) { grid-template-columns: auto auto 1fr auto; }
[data-links="buttons"] .row:has(.thumb) { grid-template-columns: auto 1fr auto; }
.row .thumb {
  width: clamp(40px, 11vw, 52px);
  height: clamp(40px, 11vw, 52px);
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: calc(var(--btn-radius) * 0.6);
}

/* Display scale (rows only): the labels at the sentence's own step */
.links[data-scale="display"] .row .lab { font-size: clamp(26px, 7.4vw, 44px); font-weight: 900; line-height: 0.98; }
.links[data-scale="display"] .row { padding-block: calc(clamp(20px, 4.6vw, 30px) * var(--dz)); }
.links[data-scale="display"] .row .way { font-size: clamp(22px, 6vw, 34px); }

/* --- BUTTONS setting --- */
[data-links="buttons"] .row {
  grid-template-columns: auto 1fr auto;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: var(--btn-radius);
  padding: calc(14px * var(--dz)) clamp(16px, 4vw, 22px);
  margin-block: calc(clamp(7px, 1.8vw, 11px) * var(--dz));
  min-height: 56px;
  transition: transform var(--hover) var(--ease-hover), filter var(--hover) var(--ease-hover);
}
[data-links="buttons"] .row:first-of-type { border-top: none; }
[data-links="buttons"] .row .ord { display: none; }
[data-links="buttons"] .row .way { display: none; }
[data-links="buttons"] .row .body { text-align: center; }
[data-links="buttons"][data-align="left"] .row .body { text-align: left; }
[data-links="buttons"] .row:has(.thumb) .body { padding-right: clamp(40px, 11vw, 52px); }
[data-links="buttons"][data-align="left"] .row:has(.thumb) .body { padding-right: 0; }
[data-links="buttons"] .row .lab { font-size: clamp(16px, 4.4vw, 19px); font-weight: 700; letter-spacing: -0.01em; }
[data-links="buttons"] .row .note { color: inherit; opacity: 0.75; }
[data-links="buttons"] .row .tag { color: inherit; opacity: 0.8; }
[data-links="buttons"] .row:hover .lab, [data-links="buttons"] .row:focus-visible .lab { color: inherit; }
[data-links="buttons"] .row:hover { transform: translateY(-2px); }
[data-links="buttons"] .row .thumb { border-color: transparent; }

/* shapes */
[data-links="buttons"][data-shape="outline"] .row {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
[data-links="buttons"][data-shape="soft"] .row {
  background: color-mix(in srgb, var(--btn-bg) 14%, transparent);
  color: var(--ink);
}
/* shadows */
[data-links="buttons"][data-shadow="soft"] .row { box-shadow: 0 8px 24px rgb(0 0 0 / 0.14); }
[data-links="buttons"][data-shadow="hard"] .row {
  box-shadow: 5px 5px 0 0 var(--ink);
  margin-block: calc(clamp(12px, 3vw, 16px) * var(--dz)); /* the shadow needs its own air */
}
[data-links="buttons"][data-shadow="hard"] .row:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--ink); }
[data-links="buttons"][data-shape="outline"][data-shadow="hard"] .row { background: var(--bg-paper); }

/* Night variant (rows setting): the block pulled as a full-bleed inverted band */
[data-register="void"] {
  background: var(--ink);
  color: var(--bg-paper);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--trim), calc(50vw - var(--measure) / 2));
}
[data-register="void"] .row,
[data-register="void"] .row:first-of-type { border-color: color-mix(in srgb, var(--bg-paper) 22%, transparent); }
[data-register="void"] .row .note { color: var(--bg-paper); opacity: 0.75; }
[data-register="void"] .row .way,
[data-register="void"] .row .tag { color: var(--accent-lit); }
[data-register="void"] .row:hover .lab,
[data-register="void"] .row:focus-visible .lab,
[data-register="void"] .row:hover .ord,
[data-register="void"] .row:focus-visible .ord { color: var(--accent-lit); }

/* ============================================================
   SOCIALS — the icon row, or the type case
   ============================================================ */
.case { display: flex; flex-wrap: wrap; gap: 10px; }
[data-align="center"] .case { justify-content: center; }

.sort {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-family: var(--f-label);
  font-size: var(--ms-act);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--hover) var(--ease-hover), border-color var(--hover) var(--ease-hover), transform var(--hover) var(--ease-hover);
}
.sort:hover, .sort:focus-visible { color: var(--accent); border-color: var(--ink); }

/* icons: the glyph carries currentColor; the tile is quiet until the hand */
.sort[data-icon] { border-color: transparent; }
.sort svg { width: 26px; height: 26px; fill: currentColor; }
.sort[data-icon]:hover, .sort[data-icon]:focus-visible { color: var(--accent); transform: translateY(-2px); }

/* ============================================================
   TEXT
   ============================================================ */
.text .title {
  margin: 0 0 14px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.text p { margin: 0; max-width: 62ch; }
[data-align="center"] .text p { margin-inline: auto; }
.text[data-register="void"] { padding-block: calc(clamp(34px, 7vh, 64px) * var(--dz)); }
.text[data-register="void"] p { color: var(--bg-paper); opacity: 0.9; }

/* ============================================================
   IMAGE — a plate
   ============================================================ */
.plate img:not(.thumb) {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
}
.plate figure { margin: 0; }
.plate figcaption { margin-top: 10px; opacity: 0.72; }

/* ============================================================
   STRAND
   ============================================================ */
.strand { padding-block: calc(clamp(18px, 4vh, 30px) * var(--dz)); opacity: 0.72; }

/* ============================================================
   THE ENDING — two closes.
   FLOOD: the house material — dither down into the inverted band.
   PLAIN: a quiet centered foot.
   ============================================================ */
.flood { display: grid; height: clamp(120px, 20vh, 220px); }
.flood i {
  background-color: var(--ink);
  -webkit-mask-size: 32px 32px; mask-size: 32px 32px;
  -webkit-mask-repeat: repeat;  mask-repeat: repeat;
}
.flood i:nth-child(1) { -webkit-mask-image: var(--kiln-dither-1); mask-image: var(--kiln-dither-1); }
.flood i:nth-child(2) { -webkit-mask-image: var(--kiln-dither-2); mask-image: var(--kiln-dither-2); }
.flood i:nth-child(3) { -webkit-mask-image: var(--kiln-dither-3); mask-image: var(--kiln-dither-3); }
.flood i:nth-child(4) { -webkit-mask-image: var(--kiln-dither-4); mask-image: var(--kiln-dither-4); }
.flood i:nth-child(5) { -webkit-mask-image: var(--kiln-dither-5); mask-image: var(--kiln-dither-5); }
.flood i:nth-child(6) { -webkit-mask-image: var(--kiln-dither-6); mask-image: var(--kiln-dither-6); }
.flood i:nth-child(7) { -webkit-mask-image: var(--kiln-dither-7); mask-image: var(--kiln-dither-7); }
.flood i:nth-child(8) { -webkit-mask-image: var(--kiln-dither-8); mask-image: var(--kiln-dither-8); }

.night {
  background: var(--ink);
  color: var(--bg-paper);
  padding: calc(clamp(44px, 9vh, 88px) * var(--dz)) var(--trim) calc(clamp(28px, 5vh, 44px) * var(--dz));
}
.night .inner { max-width: var(--measure); margin-inline: auto; }
[data-align="center"] .night .inner { text-align: center; }

.ask {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(30px, 8.6vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.support { margin: 16px 0 0; max-width: 44ch; opacity: 0.85; }
[data-align="center"] .support { margin-inline: auto; }

.action {
  display: inline-block;
  margin-top: calc(clamp(24px, 5vh, 40px) * var(--dz));
  font-family: var(--f-label);
  font-size: var(--ms-act);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-block: 12px;
  transition: color var(--hover) var(--ease-hover), opacity var(--hover) var(--ease-hover);
}
.night .action .arrow { color: var(--accent-lit); }
.action:hover, .action:focus-visible { opacity: 0.75; }

.imprint {
  max-width: var(--measure);
  margin: calc(clamp(36px, 7vh, 64px) * var(--dz)) auto 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--bg-paper) 22%, transparent);
  opacity: 0.75;
}

/* the plain close */
.foot {
  max-width: calc(var(--measure) + 2 * var(--trim));
  margin-inline: auto;
  padding: calc(clamp(30px, 6vh, 56px) * var(--dz)) var(--trim) calc(clamp(24px, 5vh, 40px) * var(--dz));
  text-align: center;
}
[data-align="left"] .foot { text-align: left; }
.foot .ask { font-size: clamp(22px, 6vw, 34px); }
.foot .support { opacity: 0.8; }
.foot .action { color: var(--accent); }
.foot .imprint { border-top-color: var(--line); margin-top: calc(clamp(24px, 5vh, 40px) * var(--dz)); }

/* ============================================================
   THE DESK AROUND THE SLIP — the press-bed ticks, KILN's own
   chrome; they follow the KILN preset only.
   ============================================================ */
@media (min-width: 1024px) {
  [data-preset="KILN"] body, body[data-preset="KILN"] {
    background-image:
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 9px),
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 9px);
    background-size: 8px 100%, 8px 100%;
    background-position: calc(50% - var(--measure) / 2 - 96px) 0,
                         calc(50% + var(--measure) / 2 + 96px) 0;
    background-repeat: no-repeat;
  }
}

/* ============================================================
   ARRIVALS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .arrive {
    animation: card-rise 400ms var(--ease-enter) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  @keyframes card-rise {
    from { opacity: 0.5; transform: translateY(10px); }
    to   { opacity: 1;   transform: translateY(0); }
  }
  .mark {
    animation: card-develop 520ms steps(1, end) both;
    -webkit-mask-size: 32px 32px; mask-size: 32px 32px;
    -webkit-mask-repeat: repeat;  mask-repeat: repeat;
  }
  @keyframes card-develop {
    0%     { -webkit-mask-image: var(--kiln-dither-1); mask-image: var(--kiln-dither-1); }
    14.28% { -webkit-mask-image: var(--kiln-dither-2); mask-image: var(--kiln-dither-2); }
    28.57% { -webkit-mask-image: var(--kiln-dither-3); mask-image: var(--kiln-dither-3); }
    42.85% { -webkit-mask-image: var(--kiln-dither-4); mask-image: var(--kiln-dither-4); }
    57.14% { -webkit-mask-image: var(--kiln-dither-5); mask-image: var(--kiln-dither-5); }
    71.42% { -webkit-mask-image: var(--kiln-dither-6); mask-image: var(--kiln-dither-6); }
    85.71% { -webkit-mask-image: var(--kiln-dither-7); mask-image: var(--kiln-dither-7); }
    100%   { -webkit-mask-image: none;                 mask-image: none; }
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body { background: #fff !important; color: #000; }
  .flood { display: none; }
  .night { background: #fff; color: #000; }
  .row .way, .action .arrow { color: #000; }
}