/* Rafter Lane — child theme stylesheet, ported from prototype/rafter-lane.css.
   Warm editorial shell; data modules drawn as construction-drawing sheets.
   The prototype stays the design source: change it there first, then here. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/playfair-display-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/lora-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lora-italic-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format("woff2");
}

/* Metric-matched fallbacks: until the webfonts arrive, Georgia and Arial are scaled
   to the same average width and line box, so the swap does not reflow the page.
   Values measured with fontTools against Georgia/Arial (1 Oct 2026). */
@font-face {
  font-family: "Playfair Display Fallback";
  src: local("Georgia");
  size-adjust: 102.36%;
  ascent-override: 105.71%;
  descent-override: 24.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lora Fallback";
  src: local("Georgia");
  size-adjust: 106.11%;
  ascent-override: 94.81%;
  descent-override: 25.82%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 109.71%;
  ascent-override: 88.3%;
  descent-override: 21.99%;
  line-gap-override: 0%;
}

:root {
  --paper: #fcfaf6;
  --paper-deep: #f5f1e9;
  --ink: #1f1d1a;
  --ink-2: #534e46;
  --rule: #1f1d1a;
  --rule-faint: #e2dbce;
  --ochre: #a37352;
  --ochre-tint: #e3c3a4;
  --ochre-wash: #f7ede3;
  --slot: #f1ece3;
  --focus: #1f1d1a;
  --on-ochre: #1f1d1a;

  --serif: "Lora", "Lora Fallback", Georgia, serif;
  --display: "Playfair Display", "Playfair Display Fallback", Georgia, serif;
  --label: "Inter", "Inter Fallback", Arial, sans-serif;

  --measure: 42rem;
  --gutter: 16px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Light only, by decision (ADR-0022): no dark theme, and browsers asked not to auto-darken. */
  color-scheme: only light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
.has-anchor-ad { padding-bottom: 76px; } /* mobile anchor ad */
@media (min-width: 1024px) {
  body { font-size: 1.1875rem; }
  .has-anchor-ad { padding-bottom: 0; }
}

::selection { background: var(--ochre-tint); color: var(--ink); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ochre);
  text-underline-offset: 0.22em;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.375rem); letter-spacing: -0.018em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; letter-spacing: -0.005em; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

.label {
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
}

.num { font-variant-numeric: tabular-nums lining-nums; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--ink); color: var(--paper);
  padding: var(--space-2) var(--space-3);
  font-family: var(--label); font-weight: 600;
  z-index: 10;
}
.skip:focus { top: var(--space-2); }

/* ---------- Site header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-decoration: none;
 
  margin-right: auto;
  white-space: nowrap;
}

.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--ochre); }
.site-nav .label { font-size: 0.8125rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink);
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(18rem, calc(100vw - 2 * var(--gutter)));
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--space-4);
  z-index: 5;
}
.menu__panel ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.menu__panel li + li { border-top: 1px solid var(--rule-faint); }
.menu__panel a { display: block; padding: var(--space-3) 0; text-decoration: none; }

.searchbox { display: flex; border: 1px solid var(--rule); }
.searchbox input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1rem;
  background: transparent; color: var(--ink);
  border: 0; padding: var(--space-2) var(--space-3);
}
.searchbox input::placeholder { color: var(--ink-2); }
.searchbox button { border-left: 1px solid var(--rule); }

.header-search { display: none; }

@media (min-width: 960px) {
  .site-nav { display: block; }
  .menu { display: none; }
  .header-search { display: flex; width: 13rem; }
}

/* ---------- Page layout ---------- */

.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 1024px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
    align-items: start;
  }
}

.article { min-width: 0; max-width: 46rem; }
.prose { max-width: var(--measure); }

.crumbs {
  margin: var(--space-5) 0 var(--space-5);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-2); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--rule-faint); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.byline {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.byline strong { color: var(--ink); font-weight: 600; }

.article h2 { margin: var(--space-8) 0 var(--space-4); }
.article h3 { margin: var(--space-6) 0 var(--space-3); }

.lede { font-size: 1.1875rem; }
@media (min-width: 1024px) { .lede { font-size: 1.3125rem; line-height: 1.55; } }

.contents {
  margin: var(--space-6) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-faint);
  padding: var(--space-3) 0 var(--space-4);
}
.contents h2 { margin: 0; font-size: 0.75rem; color: var(--ink-2); }
.contents ol { margin: var(--space-2) 0 0; padding-left: 1.4em; }
.contents li { padding: 2px 0; }
.contents li::marker { font-family: var(--label); font-size: 0.8em; color: var(--ink-2); }

/* ---------- Reserved slots (ads, calculator, email) ---------- */

.slot {
  display: grid; place-items: center;
  background: var(--slot);
  color: var(--ink-2);
  font-family: var(--label);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: var(--space-3);
  margin: var(--space-7) 0;
  contain: layout size;
}
.slot--incontent { min-height: 280px; }
.slot--tall { min-height: 200px; }
.slot--sidebar { min-height: 600px; margin: 0; }

.sidebar { display: none; }
@media (min-width: 1024px) {
  .sidebar { display: block; position: sticky; top: var(--space-5); margin-top: var(--space-7); }
}

.anchor-ad {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 68px;
  background: var(--slot);
  border-top: 1px solid var(--rule-faint);
  display: grid; place-items: center;
  color: var(--ink-2);
  font-family: var(--label); font-size: 0.8125rem; letter-spacing: 0.02em;
  z-index: 4;
}
@media (min-width: 1024px) { .anchor-ad { display: none; } }

/* ---------- Sheet: the drawing-sheet frame for data modules ---------- */

.sheet {
  margin: var(--space-6) 0;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.5;
}
.sheet__head {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--rule);
}
.sheet__title {
  padding: var(--space-3) var(--space-4);
}
.sheet__title h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.sheet__title p { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: 0.9375rem; }
.sheet__no {
  border-left: 1px solid var(--rule);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 4.5rem;
}
.sheet__no b {
  font-family: var(--label); font-weight: 700;
  font-size: 1.375rem; letter-spacing: 0.02em; line-height: 1;
}
.sheet__no .label { color: var(--ink-2); font-size: 0.6875rem; margin-bottom: 4px; }

.sheet__body { padding: var(--space-4); }
@media (min-width: 640px) { .sheet__body { padding: var(--space-5); } }

/* Title block = Yöntem Notu. Part of the sheet, never detached.
   Cells sit on a 1px hairline grid (gap shows the rule colour). */
.titleblock {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-faint);
  margin: 0;
}
.titleblock > div {
  background: var(--paper);
  padding: var(--space-2) var(--space-3) var(--space-3);
  min-width: 0;
}
.titleblock dt { color: var(--ink-2); margin-bottom: 2px; }
.titleblock dd { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.titleblock .tb-2 { grid-column: 1 / -1; }
.tb-h {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-top: 1px solid var(--rule);
  font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.3;
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
}
.tb-h + .titleblock { border-top: 1px solid var(--rule-faint); }
.stamp {
  font-family: var(--label); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ochre);
  background: var(--ochre-wash);
  padding: 1px 6px;
  white-space: nowrap;
}
@media (min-width: 720px) {
  .titleblock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .titleblock .tb-2 { grid-column: span 2; }
}

/* ---------- Answer Box ---------- */

.answer {
  margin: 4px 0 var(--space-6);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
}
.answer__body { padding: var(--space-4) var(--space-4) var(--space-5); }
@media (min-width: 640px) { .answer__body { padding: var(--space-5) var(--space-6) var(--space-6); } }
.answer__lead {
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
 
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
@media (min-width: 640px) { .answer__lead { font-size: 2.125rem; } }
.answer__range {
  display: inline;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  background: linear-gradient(transparent 62%, var(--ochre-tint) 62%, var(--ochre-tint) 92%, transparent 92%);
}
.answer__why { margin: 0; max-width: 38rem; }
.answer .titleblock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer .titleblock a { font-weight: 600; }
.answer h2 { font-size: 1.125rem; margin: 0; }
.sheet__date { font-size: 1rem !important; }
@media (max-width: 420px) {
  .answer .titleblock { grid-template-columns: 1fr 1fr; }
  .answer .titleblock > div:last-child { grid-column: 1 / -1; }
}

/* ---------- Dot strip ---------- */

.strip { margin: 0 0 var(--space-5); }
.strip svg { display: block; width: 100%; height: 114px; overflow: visible; }
.strip .axis { stroke: var(--rule); stroke-width: 1; }
.strip .tick { stroke: var(--rule); stroke-width: 1; }
.strip .tick-l { fill: var(--ink-2); font-family: var(--label); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.strip .band { fill: var(--ochre); }
.strip .q-local { fill: var(--ink); }
.strip .q-nat { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.strip .note { fill: var(--ink-2); font-family: var(--serif); font-size: 12.5px; font-style: italic; }
.strip .leader { stroke: var(--ink-2); stroke-width: 0.75; fill: none; }

.legend {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: 0.875rem; color: var(--ink-2);
}
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend svg { width: 14px; height: 14px; flex: none; }
.legend .lg-local { fill: var(--ink); }
.legend .lg-nat { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.legend .sw-band { width: 22px; height: 5px; background: var(--ochre); display: inline-block; }

/* ---------- Tables ---------- */

.table-wrap { margin: 0; }
table.cost {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}
table.cost caption { text-align: left; }
table.cost th, table.cost td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--rule-faint);
}
table.cost th:last-child, table.cost td:last-child { padding-right: 0; }
table.cost thead th {
  border-bottom: 1px solid var(--rule);
  padding-top: 0;
  color: var(--ink-2);
}
table.cost tbody th { font-weight: 600; }
table.cost tbody th small { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.875rem; margin-top: 2px; }
table.cost tbody tr:last-child > * { border-bottom: 0; }
.cost .v { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; font-weight: 600; }
.cost .n { display: block; color: var(--ink-2); font-size: 0.8125rem; font-family: var(--label); letter-spacing: 0.02em; }
.cost .thin .v { font-weight: 400; }
.cost .none { color: var(--ink-2); font-style: italic; }

.mark-thin {
  display: inline-block;
  font-family: var(--label); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px dashed var(--ink);
  padding: 0 4px; margin-left: 2px;
  vertical-align: 1px;
}
.marks-key {
  margin: var(--space-4) 0 0;
  font-size: 0.8125rem; color: var(--ink-2);
}

/* Keynote circle, used in section drawings and tables */
.key {
  display: inline-grid; place-items: center;
  width: 1.625rem; height: 1.625rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--label); font-weight: 700; font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  flex: none;
  background: var(--paper);
}
.key--changed { border-color: var(--ochre); box-shadow: inset 0 0 0 1px var(--ochre); }

.layer { display: flex; gap: var(--space-3); align-items: flex-start; }
.layer a.back {
  display: inline-block; margin-top: 4px;
  font-family: var(--label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
}

/* Signature moment: a keynote jump lands on its row and the row takes the ochre wash */
table.cost tbody tr { scroll-margin-top: 5rem; }
table.cost tbody tr:target > * {
  background: var(--ochre-wash);
  animation: land 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
table.cost tbody tr:target .key { background: var(--ochre); border-color: var(--ochre); color: var(--on-ochre); box-shadow: none; }
@keyframes land {
  from { background: var(--ochre-tint); }
  to { background: var(--ochre-wash); }
}
@media (prefers-reduced-motion: reduce) {
  table.cost tbody tr:target > * { animation: none; }
}

/* Narrow screens: 3-column tables stay tables; the upgrade table stacks */
@media (max-width: 559px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid var(--rule-faint); padding: var(--space-3) 0; }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack th, table.stack td { border: 0; padding: 0 0 var(--space-2); }
  table.stack td[data-h]::before {
    content: attr(data-h);
    display: block;
    font-family: var(--label); font-weight: 600;
    font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-2);
    font-style: normal;
    margin-bottom: 1px;
  }
  table.stack td { padding-left: calc(1.625rem + var(--space-3)); }
}

/* ---------- Section drawing ---------- */

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}
.section-head p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.keyplan { width: 112px; }
@media (min-width: 640px) { .keyplan { width: 150px; } }
.keyplan svg { display: block; width: 100%; height: auto; }
.keyplan figcaption { text-align: center; color: var(--ink-2); margin-top: 2px; font-size: 0.6875rem; }

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 560px) {
  .panels { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.panel { margin: 0; }
.panel figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}
.panel figcaption b { font-weight: 600; font-size: 0.9375rem; }
.panel svg { display: block; width: 100%; height: auto; max-width: 340px; margin: 0 auto; }

/* drawing strokes, all themeable */
.dw { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.dw-thin { fill: none; stroke: var(--ink); stroke-width: 0.6; }
.dw-cut { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dw-conc { fill: url(#p-conc); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dw-earth { fill: url(#p-earth); stroke: none; }
.dw-glass { stroke: var(--ink); stroke-width: 1; fill: none; }
.dw-new { fill: var(--ochre-tint); stroke: var(--ochre); stroke-width: 2; stroke-linejoin: round; }
.dw-new-line { fill: none; stroke: var(--ochre); stroke-width: 2; }
.dw-batt { fill: none; stroke: var(--ochre); stroke-width: 1; }
.dw-break { fill: none; stroke: var(--ink); stroke-width: 0.9; }
.dw-lead { fill: none; stroke: var(--ink); stroke-width: 0.75; }
.dw-key circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.dw-key text { fill: var(--ink); font-family: var(--label); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.dw-key .hit { fill: transparent !important; stroke: none !important; }
.dw-key:hover circle:not(.hit), .dw-key:focus circle:not(.hit) { fill: var(--ochre); stroke: var(--ochre); }
.dw-key:hover text, .dw-key:focus text { fill: var(--on-ochre); }
.dw-key:focus { outline: none; }
.dw-key:focus-visible circle:not(.hit) { stroke: var(--focus); stroke-width: 2.5; }
.dw-txt { fill: var(--ink-2); font-family: var(--label); font-size: 11px; letter-spacing: 0.05em; }
.dw-ital { fill: var(--ink-2); font-family: var(--serif); font-style: italic; font-size: 12.5px; }
.kp-house { fill: url(#p-hatch); stroke: var(--ink); stroke-width: 1; }
.kp-room { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.kp-cut { stroke: var(--ochre); stroke-width: 1.4; stroke-dasharray: 5 2 1 2; fill: none; }
.kp-arrow { fill: var(--ochre); }
.kp-t { fill: var(--ink); font-family: var(--label); font-size: 12px; font-weight: 700; text-anchor: middle; }

.pattern-stroke { stroke: var(--ink); stroke-width: 0.5; fill: none; }
.pattern-dot { fill: var(--ink); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--rule); margin-top: var(--space-4); }
.faq details { border-bottom: 1px solid var(--rule-faint); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) 2rem var(--space-4) 0;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > :not(summary) { margin: 0; padding: 0 0 var(--space-4); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- Author ---------- */

.author-box {
  margin: var(--space-8) 0 var(--space-6);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
}
.author-box .label { color: var(--ink-2); padding-top: 4px; }
.author-box p { margin: 0; font-size: 1rem; }
.author-box strong { font-weight: 600; }

.related { margin: var(--space-7) 0 var(--space-8); }
.related h2 { margin: 0 0 var(--space-4); font-size: 1.375rem; }
.related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.related li { border-bottom: 1px solid var(--rule-faint); }
.related a { display: block; padding: var(--space-3) 0; text-decoration: none; }
.related a:hover b { text-decoration: underline; text-decoration-color: var(--ochre); }
.related b { font-weight: 600; display: block; }
.related span { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-8);
}
.site-footer__inner {
  max-width: 72rem; margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
  display: grid; gap: var(--space-4);
}
.site-footer p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; max-width: 36rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 0.9375rem; }

/* Revision triangle */
.rev { width: 18px; height: 16px; vertical-align: -3px; margin-right: 6px; overflow: visible; }
.rev path { fill: var(--paper); stroke: var(--ochre); stroke-width: 1.3; stroke-linejoin: round; }
.rev text { fill: var(--ink); font-family: var(--label); font-size: 8px; font-weight: 700; text-anchor: middle; }
.panel figcaption .label { display: inline-flex; align-items: center; }

/* Row -> drawing: land on the layer's own keynote */
.dw-key:target circle:not(.hit) { fill: var(--ochre); stroke: var(--ochre); }
.dw-key:target text { fill: var(--on-ochre); }
.back .up { width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Narrow strip: smaller marks so every quote stays countable */
@media (max-width: 639px) {
  .strip .q-local { r: 3.9px; }
  .strip .q-nat { r: 3.3px; stroke-width: 1.25; }
}
.panel figcaption svg.rev { width: 18px; height: 16px; max-width: none; margin: 0 6px 0 0; display: inline-block; }

/* =====================================================================
   İlham Sayfası (inspiration page)
   Same world. Every idea is the same plate: 2:3 concept image, its künye
   (what the room is built with) on an ink rule, then the text.
   ===================================================================== */

/* ---------- Top: crumbs, headline, first image, intro ---------- */

.top-wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); }
.top .byline { margin: var(--space-4) 0 var(--space-5); }
.top .intro { max-width: var(--measure); margin-top: var(--space-5); }

/* First image: full bleed on phones, fills what is left of the screen */
.hero { margin: 0 calc(-1 * var(--gutter)); }
.hero .ph, .hero img { aspect-ratio: 2 / 3; width: 100%; height: auto; }
.hero img { display: block; }
.hero figcaption {
  margin: 0 var(--gutter);
  border-top: 2px solid var(--rule);
  padding-top: var(--space-2);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-2) var(--space-4);
}
.hero__cap { margin: 0; flex: 1 1 14rem; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.hero__disc { display: block; margin-top: 2px; font-size: 0.875rem; }
.hero__disc a { color: var(--ink-2); }

@media (min-width: 560px) {
  .hero { margin: 0; max-width: 28rem; }
  .hero figcaption { margin: 0; }
}

@media (min-width: 1024px) {
  .top {
    --hero-w: min(50%, calc((100vh - 13rem) * 2 / 3));
    display: grid;
    grid-template-columns: var(--hero-w) minmax(0, 1fr);
    grid-template-areas:
      "crumbs crumbs"
      "fig    title"
      "fig    byline"
      "fig    intro"
      "fig    index"
      "fig    .";
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: var(--space-7);
  }
  @supports (height: 100svh) {
    .top { --hero-w: min(50%, calc((100svh - 13rem) * 2 / 3)); }
  }
  .top .crumbs { grid-area: crumbs; }
  .top h1 { grid-area: title; }
  .top .byline { grid-area: byline; }
  .top .hero { grid-area: fig; max-width: none; }
  .top .intro { grid-area: intro; margin-top: 0; }
  .top .ideas-index { grid-area: index; }
}

/* ---------- Idea list: folded, text only ---------- */

.ideas-index {
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-faint);
  max-width: var(--measure);
}
.ideas-index summary {
  cursor: pointer; list-style: none;
  padding: var(--space-3) 2rem var(--space-3) 0;
  position: relative;
  font-weight: 600;
}
.ideas-index summary::-webkit-details-marker { display: none; }
.ideas-index summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ideas-index[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .ideas-index summary::after { transition: none; } }
.ideas-index ol { list-style: none; margin: 0; padding: 0 0 var(--space-3); }
.ideas-index li + li { border-top: 1px solid var(--rule-faint); }
.ideas-index a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  text-decoration: none;
  font-size: 1rem; line-height: 1.35;
}
.ideas-index a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--ochre); }
.ideas-index .key { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

/* ---------- Page body: wider than the Para Sayfası so plate + text + sidebar fit ---------- */

.layout--ilham { max-width: 80rem; }
.page-ilham .site-header__inner, .page-ilham .site-footer__inner { max-width: 80rem; }
@media (min-width: 1024px) {
  .layout--ilham { gap: var(--space-7); }
}
.article--ilham { max-width: none; container-type: inline-size; }
.article--ilham .entry > h2 { margin: var(--space-8) 0 0; }
.group-lede { max-width: var(--measure); margin: var(--space-3) 0 0; color: var(--ink-2); }

/* ---------- Price bridge: the Answer Box's small sibling ---------- */

.bridge {
  margin: var(--space-6) 4px;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
}
.bridge .sheet__title h2 { font-size: 1.125rem; margin: 0; line-height: 1.3; }
.bridge .sheet__title .stamp { display: inline-block; margin-top: var(--space-2); }
.bridge__body { padding: var(--space-4) var(--space-4) var(--space-5); }
@media (min-width: 640px) { .bridge__body { padding: var(--space-5) var(--space-6); } }
.bridge__lead {
  font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.005em;
 
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
@media (min-width: 640px) { .bridge__lead { font-size: 1.625rem; } }
.bridge__go { margin: 0; font-weight: 600; }
.bridge .titleblock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 420px) {
  .bridge .titleblock { grid-template-columns: 1fr 1fr; }
  .bridge .titleblock > div:last-child { grid-column: 1 / -1; }
}

.arrow { width: 0.8em; height: 0.8em; margin-left: 0.25em; vertical-align: -0.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Levha: the idea plate ---------- */

/* The image is as large as fits on the screen whole: never taller than the viewport, at most
   35rem wide (decided 2 Oct 2026; competitors show 730-760px but the reader has to scroll it) */
.levha {
  --plate-w: min(35rem, calc((100vh - 4rem) * 2 / 3));
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-faint);
  scroll-margin-top: var(--space-4);
}
.article--ilham .entry > h2 + .group-lede + .levha,
.article--ilham .entry > h2 + .levha { margin-top: var(--space-5); }

.levha__h {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
 
}
.article .levha__h { margin: 0 0 var(--space-4); }
@media (max-width: 559px) { .levha__h { font-size: 1.25rem; } }
.key--lv { width: 2rem; height: 2rem; font-size: 0.875rem; margin-top: 0.05em; }

.plate { margin: 0 calc(-1 * var(--gutter)); }
.plate .ph, .plate img { aspect-ratio: 2 / 3; width: 100%; height: auto; }
.plate img { display: block; }
.kunye { margin: 0 var(--gutter); }
@supports (height: 100svh) {
  .levha { --plate-w: min(35rem, calc((100svh - 4rem) * 2 / 3)); }
}
@media (min-width: 560px) {
  .plate { margin: 0; max-width: var(--plate-w); }
  .kunye { margin: 0; }
}

/* Künye: a title-block strip of four fields in a 2×2 hairline grid (four cells in one row would
   wrap every value at plate width), joined to the image by a 2px cut line */
.kunye__f {
  margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-faint);
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule-faint);
}
.kunye__f > div { background: var(--paper); padding: var(--space-2) var(--space-3) var(--space-2) 0; min-width: 0; }
.kunye__f > div:nth-child(even) { padding-left: var(--space-3); }
.kunye__f dt { color: var(--ink-2); font-size: 0.6875rem; margin-bottom: 1px; }
.kunye__f dd { margin: 0; font-size: 0.9375rem; line-height: 1.35; }
.to-cost .arrow { width: 0.75em; height: 0.75em; }

.kunye__foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0 0;
}
.kunye__foot .label, .hero .label { color: var(--ink-2); font-size: 0.6875rem; }
.kunye__foot .save { margin-left: auto; }

/* Save: one per image, a plain link to Pinterest (no script) */
.save {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--space-3);
  border: 1px solid var(--rule);
  font-family: var(--label); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.save svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.save:hover { background: var(--ochre-wash); }

.levha__text { margin-top: var(--space-4); max-width: var(--measure); }
.levha__text p:last-child { margin-bottom: 0; }

/* Once the article is wide enough: heading, then the image with its künye beside it (one column
   of fields), then the text at reading width underneath */
@container (min-width: 50rem) {
  .levha .plate {
    display: grid;
    grid-template-columns: min(var(--plate-w), calc(100% - 15rem)) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
    max-width: none;
  }
  .levha .kunye__f { grid-template-columns: 1fr; }
  .levha .kunye__f > div:nth-child(even) { padding-left: 0; }
  .levha .kunye__foot { flex-wrap: wrap; }
  .levha__text { margin-top: var(--space-5); font-size: 1.125rem; }
  .closing { grid-template-columns: 20rem minmax(0, 1fr); }
}

/* Landing: an idea-list jump or a saved pin's #idea link lands on its plate */
.levha:target .key--lv {
  background: var(--ochre); border-color: var(--ochre); color: var(--on-ochre);
  animation: key-land 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes key-land {
  from { box-shadow: 0 0 0 10px var(--ochre-tint); }
  to { box-shadow: 0 0 0 0 var(--ochre-tint); }
}
@media (prefers-reduced-motion: reduce) { .levha:target .key--lv { animation: none; } }

/* ---------- Image placeholder (prototype): drawn as an opening, not as an ad slot ---------- */

.ph {
  position: relative;
  background: var(--paper-deep);
  display: grid; place-items: center;
  overflow: hidden;
}
.ph > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph line { stroke: var(--rule-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ph__txt {
  position: relative;
  margin: 0;
  line-height: 1.4;
  max-width: 15rem;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-deep);
  text-align: center;
}
.ph__txt .label { display: block; color: var(--ink-2); font-size: 0.6875rem; margin-bottom: var(--space-1); }
.ph__txt span:last-child { font-style: italic; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }

/* ---------- Data sheet on the inspiration page ---------- */

.article--ilham .sheet { margin: var(--space-6) 4px; }
.sheet-lede { max-width: var(--measure); margin: var(--space-8) 0 0; }

/* ---------- Questions people ask (inc/seo.php) ---------- */

.faq { max-width: var(--measure); margin-top: var(--space-8); }
.article .faq h2 { margin: 0; }
.article .faq h3 { margin: var(--space-6) 0 var(--space-2); line-height: 1.25; }
.faq p { margin: 0 0 var(--space-3); }

/* ---------- Closing: collage pin + save, then the link on to the cost page ---------- */

.closing {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  display: grid; gap: var(--space-5);
  column-gap: var(--space-6);
  align-items: start;
}
.closing .plate { margin: 0; max-width: 20rem; }
.closing h2 { margin: 0 0 var(--space-3); }
.closing p { max-width: 30rem; }

.next {
  margin: var(--space-7) 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-faint);
}
.next a { display: block; padding: var(--space-4) 0; text-decoration: none; }
.next b { display: block; font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.next a:hover b { text-decoration: underline; text-decoration-color: var(--ochre); }
.next span { color: var(--ink-2); font-size: 0.9375rem; }

/* =====================================================================
   Hub Sayfası (topic hub)
   Same world. The topic is a slice of one site-wide ladder: a single
   cumulative section numbers each layer by the step that adds it; this
   hub's steps are ochre. Each step is the same locked unit.
   ===================================================================== */

.page-hub .site-header__inner, .page-hub .site-footer__inner { max-width: 80rem; }
.layout--hub { max-width: 80rem; }
@media (min-width: 1024px) { .layout--hub { gap: var(--space-7); } }
.article--hub { max-width: none; container-type: inline-size; }

/* ---------- Top ---------- */

.hub-top h1 { max-width: 52rem; }
.nw { white-space: nowrap; }
.hub-top .byline { margin: var(--space-4) 0 var(--space-4); }
.hub-intro { max-width: var(--measure); margin: 0; }

/* ---------- Ladder sheet (L-1) ---------- */

.ladder { margin: var(--space-6) 4px 0; }
.ladder .sheet__title h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.005em; }
.ladder__body { display: grid; gap: var(--space-5); }
.ladder__draw svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: 0 auto; overflow: visible; }
.ladder__draw .marks-key { margin-top: var(--space-3); }
.ld-legend { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ld-legend svg { width: 22px; height: 10px; flex: none; }
.ld-legend rect { fill: var(--ochre-tint); stroke: var(--ochre); stroke-width: 1.5; }

.ld-key circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.ld-key text {
  fill: var(--ink); font-family: var(--label); font-size: 13px; font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
}
.ld-key--here circle { stroke: var(--ochre); stroke-width: 2.25; }
.dw-stud { stroke-width: 0.9; }

@media (min-width: 900px) {
  .ladder__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
}

/* Step table: key + name + what it adds, then the from-scratch range */
.ladder__steps tbody th { font-weight: 400; }
.step-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-row .key { margin-top: 1px; }
.step-row a { font-weight: 600; }
.step-row small { display: block; color: var(--ink-2); font-size: 0.875rem; margin-top: 2px; }
.ladder__steps td { white-space: nowrap; }
.ladder__steps tr.here a { text-decoration-thickness: 2px; }

/* ---------- The two questions ---------- */

.questions { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@container (min-width: 44rem) {
  .questions { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
}
.article .question h2 { margin: 0 0 var(--space-3); font-size: 1.375rem; line-height: 1.2; }
.answers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.answers li { border-bottom: 1px solid var(--rule-faint); }
.answers a {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  text-decoration: none;
  font-size: 1rem; line-height: 1.35;
}
.answers a > span:first-child { font-weight: 600; }
.answers a:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--ochre); }
.answers__to { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-size: 0.9375rem; }
.answers__to .key { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; color: var(--ink); }
.answers__to .arrow { margin: 0; }

/* ---------- Ladder edges: the neighbouring steps, one line each ---------- */

.ladder-edge {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3);
  align-items: baseline;
  margin: var(--space-7) 0 0;
  max-width: var(--measure);
  color: var(--ink-2); font-size: 0.9375rem;
}
.ladder-edge a { color: var(--ink); }

/* ---------- Basamak: the step unit ---------- */

.basamak {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--space-4);
}
.article .basamak__h {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.key--step { width: 2rem; height: 2rem; font-size: 0.875rem; margin-top: 0.1em; border-color: var(--ochre); box-shadow: inset 0 0 0 1px var(--ochre); }

.basamak__fig { margin: 0; max-width: 24rem; }
.basamak__fig svg { display: block; width: 100%; height: auto; }
.kunye--step { margin: var(--space-2) 0 0; }
.kunye__f .kunye__wide { grid-column: 1 / -1; }
.kunye__f .v { display: block; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.kunye__f .n { display: block; color: var(--ink-2); font-family: var(--label); font-size: 0.8125rem; letter-spacing: 0.02em; }
.kunye__f .n a { color: var(--ink-2); }
.kunye__f .stamp { display: inline-block; margin-top: var(--space-2); }

/* Detail reference: the step's drawing is a detail of sheet L-1 (split bubble: step over sheet) */
.kunye--step .kunye__foot { margin: 0; }
.detail-ref {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink-2); font-size: 0.875rem; text-decoration: none;
}
.detail-ref:hover > span:last-child { text-decoration: underline; text-decoration-color: var(--ochre); }
.detail-ref__b {
  display: inline-grid; grid-template-rows: 1fr 1fr;
  width: 2.25rem; height: 2.25rem; flex: none;
  border: 1px solid var(--ink); border-radius: 50%;
  overflow: hidden;
  font-family: var(--label); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink); text-align: center;
}
.detail-ref__b b { font-size: 0.8125rem; line-height: 1; align-self: end; padding-bottom: 2px; border-bottom: 1px solid var(--ink); font-weight: 700; }
.detail-ref__b i { font-style: normal; font-size: 0.6875rem; line-height: 1; padding-top: 3px; }

.basamak__text { margin-top: var(--space-5); max-width: var(--measure); }
.basamak__go {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.basamak__go li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule-faint);
}
.basamak__go .label { color: var(--ink-2); }
.basamak__go a { font-weight: 600; }

@container (min-width: 50rem) {
  .basamak {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    grid-template-areas: "fig head" "fig text";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
  }
  .basamak__h { grid-area: head; }
  .basamak__fig { grid-area: fig; align-self: start; position: sticky; top: var(--space-5); }
  .basamak__text { grid-area: text; margin-top: 0; max-width: 34rem; font-size: 1.125rem; }
}

/* ---------- Upgrade row: the price of climbing one step ---------- */

.upgrade {
  margin: 0;
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--space-4);
}
.upgrade p { margin: 0; }
.upgrade__keys { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-2); vertical-align: 0.12em; }
.upgrade__keys .key { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
.upgrade .upgrade__lead {
  max-width: 38rem;
  font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.005em;
 
  text-wrap: pretty;
}
@media (min-width: 640px) { .upgrade .upgrade__lead { font-size: 1.625rem; } }
.upgrade .upgrade__n { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.upgrade__n .n { color: var(--ink-2); font-family: var(--label); font-size: 0.8125rem; letter-spacing: 0.02em; }
.upgrade .upgrade__go { margin-top: var(--space-3); font-weight: 600; }
.upgrade + .basamak { margin-top: 0; }
.basamak + .upgrade { margin-top: var(--space-5); } /* same gap as between steps; the Hub has no ad row here (ADR-0019) */

/* Landing: an answer or a ladder row lands on its step (same grammar as plates and cost rows) */
.basamak:target .key--step,
.upgrade:target .upgrade__keys .key {
  background: var(--ochre); border-color: var(--ochre); color: var(--on-ochre); box-shadow: none;
  animation: key-land 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .basamak:target .key--step, .upgrade:target .upgrade__keys .key { animation: none; }
}

/* ---------- Full list of the topic ---------- */

.article .hub-index h2 { margin: var(--space-8) 0 var(--space-4); }
.hub-index__groups { display: grid; gap: var(--space-6); }
@container (min-width: 44rem) {
  .hub-index__groups { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); align-items: start; }
}
.article .hub-index h3 { margin: 0 0 var(--space-3); font-size: 1.125rem; }
.hub-index ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.hub-index li { border-bottom: 1px solid var(--rule-faint); }
.hub-index a { display: block; padding: var(--space-3) 0; text-decoration: none; }
.hub-index a:hover b { text-decoration: underline; text-decoration-color: var(--ochre); }
.hub-index b { display: block; font-weight: 600; line-height: 1.35; }
.hub-index span { color: var(--ink-2); font-size: 0.9375rem; }

/* =====================================================================
   Ana sayfa (home)
   Same world. The whole site is one ladder read against the calendar:
   sheet L-0 pairs the ink section with the steps, each step carrying a
   four-season bar, and ochre brackets group the steps into the topics.
   ===================================================================== */

.page-home .site-header__inner, .page-home .site-footer__inner { max-width: 80rem; }
.layout--home { max-width: 80rem; }
@media (min-width: 1024px) { .layout--home { gap: var(--space-7); } }
.article--home { max-width: none; container-type: inline-size; }

/* ---------- Top: the definition ---------- */

.home-top { padding-top: var(--space-6); }
.home-h1 {
  max-width: 72rem;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.875rem);
  line-height: 1.12;
}
.home-h1 { font-weight: 700; }
.home-h1__rest { font-weight: 400; }
.home-lede {
  max-width: 48rem;
  margin: var(--space-4) 0 0;
  color: var(--ink-2);
  font-size: 1rem; line-height: 1.5;
}
@media (min-width: 1024px) { .home-lede { font-size: 1.0625rem; } }

/* ---------- Sheet L-0 ---------- */

.l0 { margin-top: var(--space-5); }
.l0__body { display: grid; gap: var(--space-5); }
.l0__draw svg { display: block; width: 100%; height: auto; max-width: 30rem; margin: 0 auto; overflow: visible; }
.l0__draw .marks-key { margin-top: var(--space-3); max-width: 30rem; margin-inline: auto; }
.hover-only { display: none; }
@media (hover: hover) { .hover-only { display: inline; } }

@media (min-width: 960px) {
  .l0__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: start; }
  .l0__draw { position: sticky; top: var(--space-5); }
}

/* Drawing layers: ink until their topic is pointed at, then ochre */
.ly { transition: fill 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ly-shape { fill: var(--lf, var(--paper)); stroke: var(--ls, var(--ink)); stroke-width: 1.5; stroke-linejoin: round; }
.ly-cut { fill: var(--lf, var(--paper-deep)); stroke: var(--ls, var(--ink)); stroke-width: 2; stroke-linejoin: round; }
.ly-line { fill: none; stroke: var(--ls, var(--ink)); stroke-width: var(--lw, 1.25); }
.ly-batt { fill: none; stroke: var(--ls, var(--ink-2)); stroke-width: 0.75; }
.l0 .ld-key circle, .l0 .ld-key text { transition: fill 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.l0:has(.grp--patio:is(:hover, :focus-within)) .s1,
.l0:has(.grp--porch:is(:hover, :focus-within)) .op,
.l0:has(.grp--four:is(:hover, :focus-within)) :is(.op, .s4, .s5) {
  --lf: var(--ochre-tint); --ls: var(--ochre); --lw: 2;
}
.l0:has(.grp--patio:is(:hover, :focus-within)) .k1 circle,
.l0:has(.grp--porch:is(:hover, :focus-within)) :is(.k2, .k3) circle,
.l0:has(.grp--four:is(:hover, :focus-within)) :is(.k4, .k5) circle { fill: var(--ochre); stroke: var(--ochre); }
.l0:has(.grp--patio:is(:hover, :focus-within)) .k1 text,
.l0:has(.grp--porch:is(:hover, :focus-within)) :is(.k2, .k3) text,
.l0:has(.grp--four:is(:hover, :focus-within)) :is(.k4, .k5) text { fill: var(--on-ochre); }

@media (prefers-reduced-motion: reduce) {
  .ly, .l0 .ld-key circle, .l0 .ld-key text { transition: none; }
}

/* ---------- The ladder: bracketed topics, steps with season bars ---------- */

.l0__ladder { --cell: 1.125rem; --use-w: 5.5rem; min-width: 0; }
@media (min-width: 560px) { .l0__ladder { --cell: 1.625rem; --use-w: 7.5rem; } }

.l0__cols {
  display: flex; justify-content: space-between; align-items: end;
  padding: 0 0 var(--space-2) 1.25rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.l0__cols .sbar { width: var(--use-w); justify-content: end; }

/* Season bar: four cells, spring to winter */
.sbar { display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--cell, 1.125rem); gap: 2px; }
.sbar i {
  display: block; height: 0.625rem;
  border: 1px solid var(--ink-2);
}
.sbar i.on { background: var(--ochre); border-color: var(--ochre); }
.sbar i.p {
  border-color: var(--ochre);
  background: repeating-linear-gradient(135deg, var(--ochre) 0 1.5px, transparent 1.5px 4.5px);
}
.sbar--head i {
  height: auto; border: 0;
  font-style: normal; text-align: center;
  font-size: 0.6875rem; letter-spacing: 0.04em;
}

/* Topic group: an ochre bracket spans its head and steps */
.grp { position: relative; margin-top: var(--space-5); padding-left: 1.25rem; }
@media (min-width: 960px) { .grp { margin-top: var(--space-4); } }
.grp::before {
  content: "";
  position: absolute; left: 0; top: 0.4rem; bottom: 0.25rem;
  width: 0.5rem;
  border: 1.5px solid var(--ochre); border-right: 0;
}
.grp__head h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.grp__head h3 a { text-decoration: none; }
.grp__head h3 a:hover, .grp:focus-within .grp__head h3 a { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; }
.grp__head p { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); }
.grp__head .grp__range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-top: var(--space-1); color: var(--ink-2); font-size: 0.875rem; }
.grp__range .v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.grp__range .stamp { font-size: 0.6875rem; padding: 0 5px; align-self: center; }
@media (min-width: 1200px) {
  .grp__head { display: flex; flex-wrap: wrap; column-gap: var(--space-4); align-items: baseline; }
  .grp__head h3 { flex-basis: 100%; }
}

.steps { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { border-bottom: 1px solid var(--rule-faint); }
.st {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr) var(--use-w);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  text-decoration: none;
}
.st .key { margin-top: 1px; }
.st__name b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.st__name small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.35; }
.st:hover b { text-decoration: underline; text-decoration-color: var(--ochre); }
.st__use { display: grid; justify-items: end; gap: 5px; padding-top: 5px; }
.st__use-t {
  font-family: var(--label); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.25;
  color: var(--ink-2); text-align: right;
}

/* The branch: sunrooms are built new, not a step up from a porch */
.branch {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) 0 0 1.25rem;
  border-top: 1px dashed var(--ink);
  font-size: 0.875rem; line-height: 1.4; color: var(--ink-2);
}
.branch b { color: var(--ink); font-weight: 600; }
.branch + .grp { margin-top: var(--space-4); }
.st__tick { align-self: center; width: 1.625rem; border-top: 1px dashed var(--ink); }

.sbar-key {
  list-style: none; margin: var(--space-5) 0 0; padding: 0 0 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: 0.8125rem; color: var(--ink-2);
}
.sbar-key li { display: inline-flex; align-items: center; gap: var(--space-2); }
.sbar-key .sbar { --cell: 1.125rem; }

/* ---------- New ideas: the posts' own 2:3 first images ---------- */

.article--home .latest h2, .article--home .method h2 { margin: var(--space-8) 0 var(--space-4); }
.article--home > .slot:first-child + .latest h2 { margin-top: 0; }
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}
@container (min-width: 36rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
.tile { display: block; text-decoration: none; }
.tile .ph { aspect-ratio: 2 / 3; }
.tile .ph__txt { padding: var(--space-2); max-width: 90%; font-size: 0.8125rem; }
.tile .ph__txt span:last-child { font-size: 0.8125rem; }
.tile__t { display: block; border-top: 2px solid var(--rule); padding-top: var(--space-2); }
.tile__m { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.35; }
.tile__t b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
@container (min-width: 36rem) { .tile__t b { font-size: 1.0625rem; } }
.tile:hover b { text-decoration: underline; text-decoration-color: var(--ochre); }
.tiles__disc { margin: var(--space-5) 0 0; font-size: 0.875rem; color: var(--ink-2); }
.tiles__disc .label { color: var(--ink); margin-right: var(--space-2); }

.article--home .latest-costs h2 { margin: var(--space-8) 0 var(--space-4); }
.latest-costs ul { max-width: var(--measure); }

.method p { max-width: var(--measure); }

/* Under each recent list: the way on to every topic, in the fixed label column */
.by-topic {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3);
  align-items: baseline;
  margin: var(--space-5) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5;
}
.by-topic .label, .hub-index .by-topic .label { color: var(--ink-2); font-size: 0.75rem; }
.by-topic a,
.hub-index .by-topic a { display: inline; padding: 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ochre); }
.hub-index .by-topic span:not(.label) { font-size: inherit; }
.method__go { font-weight: 600; }

/* =====================================================================
   WordPress
   What the prototype wrote as hand markup arrives here as blocks. The
   body's blocks are direct children of .entry (.journey-content), so the
   prototype's .prose measure is applied to them one by one (ADR-0019).
   ===================================================================== */

.entry > :where(p, ul, ol, blockquote, h2, h3, h4, .wp-block-image) { max-width: var(--measure); }
.entry > :where(ul, ol) { margin: 0 0 var(--space-4); padding-left: 1.4em; }
.entry li + li { margin-top: var(--space-1); }
.entry li::marker { color: var(--ink-2); }
.entry blockquote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 1px solid var(--rule); font-style: italic; }
.entry hr { border: 0; border-top: 1px solid var(--rule-faint); margin: var(--space-7) 0; }
.entry img { max-width: 100%; height: auto; }
.entry .wp-block-image { margin: var(--space-6) 0; }
.entry .wp-block-image img { display: block; }
.entry .wp-block-image figcaption { margin-top: var(--space-2); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.entry > h3 { font-size: 1.25rem; }
.entry > h4 { font-size: 1.0625rem; margin: var(--space-5) 0 var(--space-2); }
.entry .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.faq summary + * { margin-top: 0; }

/* A levha is one element; paragraphs inside keep the plate's rhythm */
.levha__text > :where(ul, ol) { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.levha__text > :last-child { margin-bottom: 0; }

/* Real images take the placeholders' 2:3 frame */
.hero img, .plate img, .tile img { aspect-ratio: 2 / 3; width: 100%; height: auto; object-fit: cover; display: block; background: var(--paper-deep); }
.tile img { margin: 0; }

/* The İlham intro above the More block */
.top .intro > :last-child { margin-bottom: 0; }

/* Plain pages and lists */
.article--page .entry h2 { margin: var(--space-7) 0 var(--space-3); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
/* A plain table in page text (the Privacy cookie list) takes the cost table's lines */
.entry > table { width: 100%; max-width: var(--measure); border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; margin: 0 0 var(--space-4); }
.entry > table :where(th, td) { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--rule-faint); }
.entry > table :where(th, td):last-child { padding-right: 0; }
.entry > table thead th { border-bottom: 1px solid var(--rule); padding-top: 0; color: var(--ink-2); }
.entry > table tbody tr:last-child > * { border-bottom: 0; }
.list-h1 { margin: var(--space-6) 0 var(--space-5); }
.list-h1 span { font-weight: 400; }
.searchbox--page { max-width: 28rem; margin: 0 0 var(--space-6); }
.list-empty { max-width: var(--measure); color: var(--ink-2); }
.list-topics { list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-top: 1px solid var(--rule); }
.list-topics li { border-bottom: 1px solid var(--rule-faint); }
.list-topics a { display: block; padding: var(--space-3) 0; font-weight: 600; text-decoration: none; }
.list-topics a:hover { text-decoration: underline; text-decoration-color: var(--ochre); }
.list-results ul { max-width: var(--measure); }
.pager { margin: var(--space-6) 0 0; }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--label); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.pager .current { color: var(--ink-2); }

/* Logged-in admin bar: sticky pieces clear it */
.admin-bar .sidebar, .admin-bar .basamak__fig, .admin-bar .l0__draw { top: calc(var(--space-5) + 32px); }

/* A title block with three cells (sheet L-0 before the cost pages exist) */
.titleblock--3 > div:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .titleblock--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .titleblock--3 > div:last-child { grid-column: auto; }
}

/* ---------- Display face (1 Oct 2026) ----------
   Playfair Display on headings and the wordmark; Lora carries text and tables,
   Inter the labels. Kept last so class rules above still win where they set a face. */

h1, h2, h3, .wordmark {
  font-family: var(--display);
  font-weight: 400;
}
h1 { letter-spacing: -0.02em; }
.label, .site-nav a { letter-spacing: 0.12em; }