/* Self-hosted from Fontsource 5.3.0 (woff2). Generated by _working/tools (see HANDOFF). */
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/old-standard-tt-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/old-standard-tt-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/old-standard-tt-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Old Standard TT';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/old-standard-tt-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/old-standard-tt-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/old-standard-tt-cyrillic-400-italic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/old-standard-tt-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/old-standard-tt-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/old-standard-tt-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-condensed-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   Lord's Residence — "the survey drawing"
   One light theme (limestone) plus one dark night section (contact).
   ========================================================================== */

:root {
  --limestone: #EFE4C8;
  --paper: #F8F2E4;
  --ink: #221915;
  --ink-2: #4A3F38;          /* secondary text on limestone/paper (AA) */
  --maroon: #6B1E2A;
  --maroon-d: #5E1A25;       /* maroon darkened ~8% for hover */
  --brass: #B08A3E;          /* decorative only */
  --brass-text: #7A5A1E;     /* brass as text (AA on limestone/paper) */
  --night: #101C24;
  --line: rgba(34, 25, 21, .28);

  --f-display: 'Old Standard TT', 'Times New Roman', Georgia, serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Plex Sans Condensed has no basic Cyrillic on Fontsource: Russian labels use Plex Sans 500. */
  --f-label: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', system-ui, sans-serif;

  --ease-draw: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-reveal: cubic-bezier(.77, 0, .18, 1);

  --frame: 0px;              /* sheet margin; 16px from 768px up */
  --bar-h: 64px;             /* top bar height */
  --tb-w: 300px; --tb-h: 88px;
  --gutter: 20px;
  --sec-pad: clamp(96px, 12vw, 180px);
  --bottom-safe: 0px;        /* space kept free for the title block / bottom bar */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; border-radius: 2px; }
.contact :focus-visible, .footer :focus-visible { outline-color: var(--paper); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 24px; top: -60px; z-index: 200; padding: 10px 16px;
  background: var(--ink); color: var(--paper); font: 500 13px/1 var(--f-label); text-decoration: none;
}
.skip:focus { top: 24px; }

/* ---------- type ---------- */
.h1 {
  font: 400 clamp(44px, 6.2vw, 104px)/.98 var(--f-display);
  letter-spacing: -.01em;
  margin: 0;
}
.h1 em, .h2 em { font-style: italic; }
/* Russian words are longer ("Исторический"): one step smaller so no word is wider than the column. */
html[lang="ru"] .h1 { font-size: clamp(40px, 4.9vw, 84px); }
.w { white-space: nowrap; }
.h2 { font: 400 clamp(34px, 4vw, 64px)/1.05 var(--f-display); letter-spacing: -.005em; }
.h3 { font: 700 clamp(22px, 1.9vw, 26px)/1.2 var(--f-display); }
.body { font-size: 17px; line-height: 1.6; max-width: 62ch; color: var(--ink); }
.label { font: 500 13px/1.35 var(--f-label); letter-spacing: .04em; }
.sheet-label { color: var(--brass-text); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.sheet-label::before { content: ""; width: 32px; height: 1px; background: currentColor; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(1240px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec-pad); position: relative; }

/* ---------- drawing-sheet frame ---------- */
.sheet { display: none; }
@media (min-width: 768px) {
  :root { --frame: 16px; --gutter: 48px; --tb-w: 260px; --tb-h: 80px; }
  .sheet {
    display: block; position: fixed; inset: 0; z-index: 60; pointer-events: none;
    border: var(--frame) solid var(--limestone);
  }
  .sheet-line { position: absolute; background: var(--ink); opacity: .55; }
  .s-top { top: -1px; left: -1px; right: -1px; height: 1px; transform-origin: 0 50%; }
  .s-right { top: -1px; bottom: -1px; right: -1px; width: 1px; transform-origin: 50% 0; }
  .s-bottom { bottom: -1px; left: -1px; right: -1px; height: 1px; transform-origin: 100% 50%; }
  .s-left { top: -1px; bottom: -1px; left: -1px; width: 1px; transform-origin: 50% 100%; }
  .reg { position: absolute; width: 15px; height: 15px; }
  .reg::before, .reg::after { content: ""; position: absolute; background: var(--ink); }
  .reg::before { left: 7px; top: 0; width: 1px; height: 15px; }
  .reg::after { top: 7px; left: 0; height: 1px; width: 15px; }
  .r-tl { top: -8px; left: -8px; } .r-tr { top: -8px; right: -8px; }
  .r-bl { bottom: -8px; left: -8px; } .r-br { bottom: -8px; right: -8px; }
}
@media (min-width: 1100px) { :root { --tb-w: 300px; --tb-h: 88px; --gutter: 64px; } }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; z-index: 70; top: var(--frame); left: var(--frame); right: var(--frame);
  height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: calc(var(--gutter) - var(--frame) + 0px);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.topbar.scrolled { background: var(--paper); border-bottom-color: var(--line); }
.wordmark { text-decoration: none; display: grid; line-height: 1; }
.wm-name { font: 400 22px/1 var(--f-display); letter-spacing: -.005em; }
.wm-sub { font: 500 12px/1.2 var(--f-label); letter-spacing: .04em; color: var(--ink-2); margin-top: 4px; }
.topbar-right { display: flex; align-items: center; gap: 24px; }
.lang { display: flex; align-items: center; gap: 2px; }
.lang button {
  background: none; border: 0; padding: 8px 6px; min-width: 32px; min-height: 40px;
  font: 500 13px/1 var(--f-label); letter-spacing: .06em; color: var(--ink-2);
  position: relative;
}
.lang button::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 8px; height: 1.5px;
  background: var(--maroon); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease-out);
}
.lang button[aria-pressed="true"] { color: var(--ink); }
.lang button[aria-pressed="true"]::after { transform: scaleX(1); }
.lang button:hover { color: var(--ink); }
.lang-dot { color: var(--ink-2); font-size: 12px; }
.topbar .lang { display: none; }
@media (min-width: 768px) { .topbar .lang { display: flex; } }

/* text links with growing underline */
.tlink {
  font: 500 14px/1.2 var(--f-label); letter-spacing: .04em; text-decoration: none; color: var(--maroon);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-block: 6px; transition: background-size .3s var(--ease-out);
}
.tlink:hover, .tlink:focus-visible { background-size: 100% 1px; }
.tlink.arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.tlink.arrow svg { width: 20px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .3s var(--ease-out); }
.tlink.arrow:hover svg { transform: translateX(4px); }
.wa-top { font-size: 14px; }

/* buttons */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border: 1px solid var(--maroon); border-radius: 0;
  background: var(--maroon); color: var(--paper); text-decoration: none;
  font: 500 15px/1.2 var(--f-body); letter-spacing: .01em;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); background: var(--maroon-d); box-shadow: 0 6px 18px -10px rgba(34, 25, 21, .5); }
.btn:active { transform: translateY(0); }
.btn > span { position: relative; z-index: 1; }
.btn-blot::before {
  content: ""; position: absolute; z-index: 0; left: var(--x, 50%); top: var(--y, 50%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink);
  transform: scale(0); transition: transform .6s var(--ease-out);
}
.btn-blot:hover::before { transform: scale(60); }

/* ---------- title block (tablet / desktop) ---------- */
.titleblock {
  display: none;
}
@media (min-width: 768px) {
  .titleblock {
    position: fixed; z-index: 70; right: calc(var(--frame) + 12px); bottom: calc(var(--frame) + 12px);
    width: var(--tb-w); height: var(--tb-h); padding: 0;
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr;
    background: var(--paper); border: 1px solid var(--ink); text-align: left;
    transition: transform .4s var(--ease-out), box-shadow .3s var(--ease-out);
  }
  .titleblock:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -14px rgba(34, 25, 21, .6); }
  /* tucked away while a button / link / field would sit underneath it */
  .titleblock.tuck { transform: translateY(calc(100% + var(--frame) + 14px)); }
  .tb-cell {
    display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; min-width: 0;
    font: 500 11.5px/1.2 var(--f-label); letter-spacing: .03em; color: var(--ink);
  }
  .tb-name { font: 400 15px/1 var(--f-display); letter-spacing: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .tb-addr { border-bottom: 1px solid var(--ink); color: var(--ink-2); }
  .tb-num { border-right: 1px solid var(--ink); }
  .tb-sec { font: 400 15px/1 var(--f-display); letter-spacing: 0; }
  :root { --bottom-safe: calc(var(--tb-h) + var(--frame) + 28px); }
}
@media (min-width: 1100px) { .tb-cell { font-size: 13px; padding: 0 12px; } .tb-name { font-size: 17px; } .tb-sec { font-size: 17px; } }
.tb-swap { display: block; position: relative; overflow: hidden; width: 100%; }
.tb-t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- phone bottom bar ---------- */
.bottombar { display: none; }
@media (max-width: 767.98px) {
  :root { --bottom-safe: calc(56px + env(safe-area-inset-bottom)); }
  .bottombar {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    height: calc(56px + env(safe-area-inset-bottom)); padding: 0 8px env(safe-area-inset-bottom) 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--paper); border-top: 1px solid var(--ink);
  }
  .bb-sheet { flex: 1; min-width: 0; font: 400 17px/1.1 var(--f-display); }
  .bb-sheet .tb-n { font: 500 13px/1 var(--f-label); color: var(--brass-text); margin-right: 6px; letter-spacing: .04em; }
  .bb-menu { width: 48px; height: 48px; background: none; border: 0; border-left: 1px solid var(--line); display: grid; place-items: center; }
  .bb-menu svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
}

/* ---------- menu (sheet index) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 120; background: rgba(34, 25, 21, .35);
  display: flex; justify-content: flex-end; opacity: 0; transition: opacity .3s var(--ease-out);
}
.menu[hidden] { display: none; }
.menu.open { opacity: 1; }
.menu-panel {
  position: relative; width: min(480px, 100%); height: 100%; background: var(--paper);
  border-left: 1px solid var(--ink); padding: 96px 40px 40px; overflow: auto;
  transform: translateX(24px); transition: transform .45s var(--ease-out);
}
.menu.open .menu-panel { transform: none; }
.menu-close { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border: 1px solid var(--ink); background: none; display: grid; place-items: center; }
.menu-close svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.menu-list { border-top: 1px solid var(--ink); }
.menu-list li { border-bottom: 1px solid var(--line); }
.menu-list a { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; text-decoration: none; }
.m-n { font: 500 13px/1 var(--f-label); color: var(--brass-text); letter-spacing: .04em; min-width: 22px; }
.m-t { font: 400 clamp(28px, 4vw, 38px)/1.1 var(--f-display); transition: color .25s, transform .3s var(--ease-out); }
.menu-list a:hover .m-t, .menu-list a:focus-visible .m-t { color: var(--maroon); transform: translateX(6px); }

/* ==========================================================================
   01 · Hero / Elevation
   ========================================================================== */
.hero { padding-top: calc(var(--frame) + var(--bar-h) + 16px); padding-bottom: 72px; }
.hero-grid { display: grid; gap: 32px; }
.hero-visual { order: -1; }
.hero-figure {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--ink);
  background: var(--paper); overflow: hidden;
}
.hero-plate { position: absolute; inset: 0; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.hero-drawing { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none; }
.hero-drawing svg { width: 100%; height: 100%; opacity: .22; }
.hero-drawing path { stroke: var(--ink); stroke-width: 1.1; fill: none; vector-effect: non-scaling-stroke; }
.dim { position: relative; height: 34px; margin-top: 10px; }
.dim-line { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--ink); }
.dim-tick { position: absolute; top: 3px; width: 1px; height: 11px; background: var(--ink); }
.dim-tick.t0 { left: 0; } .dim-tick.t1 { left: 25%; height: 6px; top: 5.5px; } .dim-tick.t2 { left: 50%; }
.dim-tick.t3 { left: 75%; height: 6px; top: 5.5px; } .dim-tick.t4 { right: 0; }
.dim-label {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font: 500 13px/1.3 var(--f-label); letter-spacing: .04em; background: var(--limestone); padding: 0 8px; white-space: nowrap;
}
.hero-label { color: var(--brass-text); margin-bottom: 20px; }
.hero-sub { margin-top: 24px; max-width: 46ch; font-size: 17px; color: var(--ink); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

@media (min-width: 768px) {
  .hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--frame) + var(--bar-h) + 24px); padding-bottom: calc(var(--bottom-safe) + 8px); }
  .hero-grid { grid-template-columns: repeat(12, 1fr); align-items: center; gap: 24px; }
  .hero-text { grid-column: 1 / 7; }
  .hero-visual { order: 0; grid-column: 7 / 13; width: 100%; }
  .hero-figure { width: 100%; height: auto; }
}
@media (min-width: 1100px) {
  .hero-text { grid-column: 1 / 6; }
  .hero-visual { grid-column: 6 / 13; justify-self: center; width: fit-content; }
  /* The hero source is 368x460, so the frame is capped to keep the photo near its real size. */
  .hero-figure { width: auto; height: min(82vh, 640px, calc(100svh - var(--bar-h) - 2 * var(--frame) - 110px)); }
}

/* ==========================================================================
   02 · The house
   ========================================================================== */
.frame { position: relative; border: 1px solid var(--ink); overflow: hidden; background: var(--paper); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.house-grid { display: grid; gap: 40px; }
.house-text .body { margin-top: 28px; }
.arch-fig { position: relative; }
.arch-fig .frame { aspect-ratio: 4 / 3; }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.co-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.co-path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.co-halo { stroke: var(--paper); stroke-width: 3.5; opacity: .85; }
.co-dot {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 0 0 1px rgba(248, 242, 228, .7);
}
.co-label {
  position: absolute; transform: translate(0, -50%); display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--ink); padding: 5px 10px 5px 6px; white-space: nowrap;
  font: 500 13px/1.2 var(--f-label); letter-spacing: .04em;
}
.co-l2 { transform: translate(-100%, -50%); }
.co-n {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--ink); font-size: 11px; line-height: 1;
}
.house-row { display: grid; gap: 28px; margin-top: 56px; }
.cap-fig .frame { aspect-ratio: 4 / 5; }
.cap-fig figcaption { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.cap-fig figcaption::before { content: ""; width: 18px; height: 1px; background: var(--ink); }
@media (min-width: 768px) {
  .house-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .house-row { grid-template-columns: repeat(3, 1fr); margin-top: 96px; }
  .house-row .cap-fig:nth-child(2) { margin-top: 56px; }
}
@media (min-width: 1100px) {
  .house-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .house-text { grid-column: 1 / 6; }
  .arch-fig { grid-column: 6 / 13; }
  .house-row { gap: 40px; }
}

/* ==========================================================================
   03 · Rooms — brass key tags
   ========================================================================== */
.rooms-intro { max-width: 900px; }
.rooms-intro .body { margin-top: 28px; }
.rooms-grid { display: grid; gap: 28px; margin-top: 56px; }
.tags {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: 14px var(--gutter) 18px calc(var(--gutter) + 18px);
  scrollbar-width: thin; scrollbar-color: var(--brass) transparent; scroll-padding-inline: calc(var(--gutter) + 18px);
}
.tag {
  position: relative; flex: none; scroll-snap-align: start;
  display: grid; align-content: center; gap: 2px; text-align: left;
  min-width: 220px; min-height: 64px; padding: 9px 26px 9px 44px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--brass); border-radius: 999px;
  transform-origin: 20px 50%;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.tag-ring {
  position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  border: 1.5px solid var(--brass); background: var(--limestone);
}
.tag-ring::before { /* the key ring passing through the hole */
  content: ""; position: absolute; left: -22px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border: 1.5px solid var(--brass); border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.tag-name { font: 400 22px/1.1 var(--f-display); white-space: nowrap; }
.tag-meta { font: 500 13px/1.25 var(--f-label); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.tag[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--maroon); }
.tag[aria-selected="true"] .tag-meta { color: rgba(248, 242, 228, .82); }
.tag[aria-selected="true"] .tag-ring { border-color: var(--brass); }
@keyframes tag-swing { 0% { rotate: 0deg; } 45% { rotate: -5deg; } 100% { rotate: -2deg; } }
.tag:hover, .tag:focus-visible { animation: tag-swing .5s var(--ease-spring) forwards; }
.room-sticky { display: grid; gap: 24px; }
.room-photo { aspect-ratio: 4 / 3; width: 100%; max-width: 720px; }
.room-photo .rp-img { position: absolute; inset: 0; }
.rp-detail {
  position: absolute; right: 14px; bottom: 14px; width: 26%; aspect-ratio: 4 / 5; border: 1px solid var(--paper);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); overflow: hidden; z-index: 3;
}
.rp-detail[hidden] { display: none; }
.rp-detail img { width: 100%; height: 100%; object-fit: cover; }
.room-text { display: grid; gap: 10px; justify-items: start; }
.room-meta { color: var(--brass-text); }
.room-text .body { margin-top: 4px; }
.room-text .btn { margin-top: 14px; }
@media (min-width: 768px) {
  .rooms-grid { grid-template-columns: minmax(250px, 4fr) 8fr; gap: 40px; margin-top: 72px; align-items: start; }
  .tags { flex-direction: column; overflow: visible; margin: 0; padding: 0 0 0 18px; gap: 12px; }
  .tag { width: fit-content; max-width: 100%; }
  .room-sticky { position: sticky; top: calc(var(--frame) + var(--bar-h) + 24px); }
}
@media (min-width: 1100px) {
  .rooms-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .tags { grid-column: 1 / 5; }
  .room-panel { grid-column: 5 / 13; }
  .room-sticky { grid-template-columns: 1fr; }
}

/* ==========================================================================
   04 · Café & terrace — collage
   ========================================================================== */
.cafe-intro { max-width: 820px; }
.cafe-intro .body { margin-top: 28px; }
.collage { margin-top: 56px; display: grid; }
.cf figcaption { margin-top: 10px; }
.fig-sep { color: var(--brass-text); }
.cf-1 .frame { aspect-ratio: 1000 / 708; }
.cf-2 .frame { aspect-ratio: 4 / 5; }
.cf-3 .frame { aspect-ratio: 16 / 10; }
.cf { position: relative; }
.cf-2 { width: 60%; justify-self: end; margin-top: -40px; z-index: 2; }
.cf-2 figcaption { text-align: right; }
.cf-3 { width: 84%; margin-top: -28px; z-index: 3; }
.cf-2 .frame, .cf-3 .frame { box-shadow: 0 0 0 6px var(--limestone); }
@media (min-width: 768px) {
  .collage { grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 80px; }
  .cf-1 { grid-column: 1 / 9; grid-row: 1; }
  .cf-2 { grid-column: 9 / 13; grid-row: 1; width: auto; margin: 72px 0 0 -72px; align-self: start; }
  .cf-3 { grid-column: 4 / 10; grid-row: 2; width: auto; margin-top: -64px; }
}

/* ==========================================================================
   05 · Kyrenia — harbour, scale bar
   ========================================================================== */
.harbour { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .harbour { aspect-ratio: 21 / 9; } }
.kyr-head { margin-top: 56px; max-width: 820px; }

.scale { position: relative; margin-top: 64px; --bar-y: 168px; height: 344px; }
.scale-track { position: absolute; left: 0; right: 0; top: var(--bar-y); height: 10px; }
.bar { position: absolute; inset: 0; }
.seg, .brk { position: absolute; top: 0; height: 10px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); }
.seg { border: 1px solid var(--ink); background: var(--paper); transform-origin: 0 50%; }
.seg.ink { background: var(--ink); }
.seg + .seg { border-left: 0; }
.brk { display: grid; place-items: center; }
.brk span { font: 400 22px/1 var(--f-display); color: var(--ink); transform: translateY(-1px); }
.tick { position: absolute; top: 10px; left: calc(var(--p) * 1%); width: 1px; height: 9px; background: var(--ink); transform-origin: 50% 0; }
.tick.minor { height: 5px; }
.tick b {
  position: absolute; top: 12px; left: 0; transform: translateX(-50%); white-space: nowrap;
  font: 500 13px/1 var(--f-label); letter-spacing: .04em; color: var(--ink-2);
}
.tick b i { font-style: normal; }
.tick:first-of-type b { transform: none; }
.tick:last-of-type b { transform: translateX(-100%); }
.places { position: absolute; inset: 0; }
.mk { position: absolute; left: calc(var(--p) * 1%); top: var(--bar-y); width: 0; height: 10px; --len: 52px; }
.mk.l2 { --len: 108px; }
.mk::before { /* leader from the bar */
  content: ""; position: absolute; left: 0; width: 1px; height: var(--len); background: var(--ink);
}
.mk::after { /* marker dot on the bar */
  content: ""; position: absolute; left: -4px; top: 1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--maroon); border: 1.5px solid var(--paper); box-sizing: border-box;
}
.mk.up::before { bottom: 10px; }
.mk.dn::before { top: 10px; }
.mk-label { position: absolute; left: 8px; display: grid; gap: 3px; white-space: nowrap; }
.mk-name { font: 400 18px/1.15 var(--f-display); }
.mk-dist { font: 500 13px/1.2 var(--f-label); letter-spacing: .04em; color: var(--ink-2); }
.mk.up .mk-label { bottom: calc(var(--len) + 12px); }
.mk.dn .mk-label { top: calc(var(--len) + 14px); }
.mk.end .mk-label { left: auto; right: 8px; text-align: right; justify-items: end; }
.scale-leaders { display: none; }

/* phone and tablet: vertical bar, labels on the right (positions laid out by site.js) */
@media (max-width: 1099.98px) {
  .scale { height: 720px; margin-top: 48px; --bar-x: 64px; }
  .scale-track { top: 0; bottom: 0; left: var(--bar-x); right: auto; width: 10px; height: auto; }
  .seg, .brk { left: 0; top: calc(var(--a) * 1%); height: calc((var(--b) - var(--a)) * 1%); width: 10px; transform-origin: 50% 0; }
  .seg + .seg { border-left: 1px solid var(--ink); border-top: 0; }
  .brk span { transform: rotate(90deg); }
  .tick { top: calc(var(--p) * 1%); left: auto; right: 10px; width: 9px; height: 1px; transform-origin: 100% 50%; }
  .tick.minor { width: 5px; height: 1px; }
  .tick b, .tick:first-of-type b, .tick:last-of-type b { top: 0; left: auto; right: 13px; transform: translateY(-50%); }
  .tick:first-of-type b { transform: translateY(0); }
  .tick:last-of-type b { transform: translateY(-100%); }
  .mk { left: calc(var(--bar-x) + 10px); top: calc(var(--p) * 1%); width: auto; right: 0; height: 0; }
  .mk::before { display: none; }
  .mk::after { left: -14.5px; top: -4.5px; }
  .mk .mk-label, .mk.up .mk-label, .mk.dn .mk-label, .mk.end .mk-label {
    left: 56px; right: 0; top: var(--dy, 0px); bottom: auto; transform: translateY(-50%);
    text-align: left; justify-items: start; white-space: normal;
  }
  .scale-leaders { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .scale-leaders path { fill: none; stroke: var(--ink); stroke-width: 1; }
}

.kyr-more { margin-top: 72px; display: grid; gap: 32px; }
.kyr-body { font-size: 17px; }
.kyr-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kp-castle, .kp-aerial { grid-column: span 2; aspect-ratio: 16 / 10; }
.kp-boat, .kp-deck { aspect-ratio: 1 / 1; }
@media (min-width: 768px) {
  .kyr-more { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
  .kyr-body { grid-column: 1 / 5; padding-top: 8px; }
  .kyr-photos { grid-column: 5 / 13; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .kp-castle { grid-column: 1 / 3; aspect-ratio: 4 / 3; }
  .kp-aerial { grid-column: 3 / 5; aspect-ratio: 4 / 3; margin-top: 48px; }
  .kp-boat { grid-column: 1 / 2; }
  .kp-deck { grid-column: 2 / 3; }
}
.facts {
  margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px;
  border-top: 1px solid var(--line); padding-top: 32px;
}
.facts li { display: flex; align-items: center; gap: 12px; }
.facts svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.facts .label { font-size: 14px; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, 1fr); margin-top: 96px; } }

/* ==========================================================================
   06 · Register (guest ledger)
   ========================================================================== */
.ledger {
  position: relative; background: var(--paper); border: 1px solid var(--ink);
  padding: 48px 20px 48px 44px; overflow: hidden;
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -48px rgba(34, 25, 21, .55);
}
.ledger::before { /* the vertical maroon margin rule (double) */
  content: ""; position: absolute; top: 0; bottom: 0; left: 24px; width: 4px;
  border-left: 1px solid var(--maroon); border-right: 1px solid var(--maroon); opacity: .75;
}
.ledger-rules { position: absolute; inset: 0; pointer-events: none; }
.ledger-rules .rule { position: absolute; left: 0; right: 0; height: 1px; background: rgba(34, 25, 21, .1); transform-origin: 0 50%; }
.no-js .ledger-rules { background: repeating-linear-gradient(to bottom, transparent 0 47px, rgba(34, 25, 21, .1) 47px 48px); }
.ledger-inner { position: relative; }
.ledger-head .body { margin-top: 24px; }
.reg-form { margin-top: 40px; display: grid; gap: 8px 32px; }
.field { display: grid; gap: 2px; }
.field label { font: 500 13px/1.3 var(--f-label); letter-spacing: .04em; color: var(--ink-2); }
.field input, .field select {
  width: 100%; height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ink);
  background: transparent; border-radius: 0; appearance: none; -webkit-appearance: none;
  font: 400 21px/1 var(--f-display); color: var(--ink);
  background-image: linear-gradient(var(--maroon), var(--maroon)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 2px; transition: background-size .3s var(--ease-out);
}
.field input:focus, .field select:focus { outline: none; background-size: 100% 2px; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.field.has-value input, .field.has-value select { background-size: 100% 2px; border-bottom-color: var(--maroon); }
.field input[type="date"] { min-height: 48px; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.field select {
  padding-right: 28px;
  background-image: linear-gradient(var(--maroon), var(--maroon)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23221915' stroke-width='1.4'/%3E%3C/svg%3E");
  background-position: 0 100%, right 4px center; background-size: 0 2px, 12px 8px;
}
.field.has-value select, .field select:focus { background-size: 100% 2px, 12px 8px; }
.stepper { display: flex; align-items: center; border-bottom: 1px solid var(--ink); height: 48px; }
.stepper input { border: 0; text-align: center; width: 56px; flex: none; -moz-appearance: textfield; background: none; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step {
  width: 44px; height: 44px; flex: none; border: 1px solid var(--line); background: none; border-radius: 50%;
  font: 400 22px/1 var(--f-display); display: grid; place-items: center;
  transition: border-color .2s, background-color .2s;
}
.step:hover { border-color: var(--maroon); background: rgba(107, 30, 42, .06); }
.step:disabled { opacity: .35; cursor: default; }
.field-err { color: var(--maroon); font: 500 14px/1.4 var(--f-label); letter-spacing: .02em; }
.field-err[hidden] { display: none; }
.reg-send { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.reg-note { color: var(--ink-2); }
@media (min-width: 768px) {
  .ledger { padding: 72px 56px 64px 104px; }
  .ledger::before { left: 64px; }
  .reg-form { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .ledger { padding: 88px 88px 80px 140px; }
  .ledger::before { left: 88px; }
  .ledger-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .reg-form { margin-top: 8px; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
  .field-err, .reg-send { grid-column: 1 / -1; }
}

/* ==========================================================================
   07 · Contact — night facade and brass bell plate
   ========================================================================== */
.contact {
  position: relative; background: var(--night); color: var(--paper); overflow: hidden;
  padding-block: var(--sec-pad) calc(var(--sec-pad) * .8);
}
.contact-bg { position: absolute; inset: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.contact-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 28, 36, .62) 0%, rgba(16, 28, 36, .8) 55%, var(--night) 100%);
}
.contact-grid { position: relative; display: grid; gap: 56px; justify-items: center; }
.contact-text { max-width: 520px; }
.contact .sheet-label { color: #D8BC7E; }
.contact .h2 { color: var(--paper); }
.contact .body { color: var(--paper); margin-top: 24px; }
.contact-links { margin-top: 32px; display: grid; gap: 6px; }
.contact-links .tlink { color: var(--paper); font-size: 16px; display: inline-block; }

.plate-wrap { perspective: 900px; }
.plate {
  position: relative; width: 240px; height: 360px; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 48px 24px 28px;
  background:
    linear-gradient(118deg, rgba(255, 244, 210, .0) 30%, rgba(255, 244, 210, .28) 44%, rgba(255, 244, 210, 0) 58%),
    linear-gradient(160deg, #C9A45A 0%, #B48D45 45%, #8E6B2C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .55), inset 0 -2px 3px rgba(60, 40, 10, .45),
    inset 0 0 0 1px rgba(90, 64, 20, .55), 0 24px 50px -20px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
}
.plate-sheen {
  position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 248, 225, .5) 50%, transparent 62%);
  transform: translateX(-110%);
}
.plate:hover .plate-sheen { transition: transform 1.2s var(--ease-out); transform: translateX(110%); }
.screw {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E9CF92, #9A7633 60%, #6E5220);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 240, 200, .4);
}
.screw::before { content: ""; position: absolute; left: 2px; right: 2px; top: 6.5px; height: 1.4px; background: rgba(60, 40, 12, .75); transform: rotate(35deg); }
.sc-tl { top: 14px; left: 14px; } .sc-tr { top: 14px; right: 14px; } .sc-tr::before { transform: rotate(-20deg); }
.sc-bl { bottom: 14px; left: 14px; } .sc-bl::before { transform: rotate(80deg); } .sc-br { bottom: 14px; right: 14px; }
.engr {
  position: relative; text-align: center; color: #3A2908;
  text-shadow: 0 1px 0 rgba(255, 236, 190, .55), 0 -1px 0 rgba(40, 26, 4, .35);
}
.engr-name { font: 400 26px/1.05 var(--f-display); letter-spacing: .01em; }
.engr-addr { font: 400 17px/1.35 var(--f-display); margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(58, 41, 8, .45); box-shadow: 0 -1px 0 rgba(255, 236, 190, .35); width: 80%; }
.engr-bell { font: 500 13px/1.3 var(--f-label); letter-spacing: .05em; margin-top: 14px; }
.bell { position: relative; display: block; width: 96px; height: 96px; margin-top: auto; border-radius: 50%; flex: none; }
.bell-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #E2C47F, #A07C35 60%, #7A5B22);
  box-shadow: inset 0 2px 2px rgba(255, 238, 196, .6), inset 0 -3px 4px rgba(50, 32, 6, .5), 0 3px 6px rgba(40, 26, 4, .45);
}
.bell-push {
  position: absolute; inset: 18px; border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #FFFDF6 0%, #F3EBDA 45%, #D9CDB5 100%);
  box-shadow: inset 0 -3px 5px rgba(120, 100, 70, .35), inset 0 2px 2px #fff, 0 1px 0 rgba(255, 240, 210, .5), 0 0 0 2px rgba(80, 58, 18, .55);
  transition: transform .12s var(--ease-out);
}
.bell.pressed .bell-push, .bell:active .bell-push { transform: scale(.92); }
.bell-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #D8B66A; opacity: 0; pointer-events: none; }
.bell.ringing .bell-wave { animation: bell-wave .8s var(--ease-out) forwards; }
.bell.ringing .bell-wave.w2 { animation-delay: .15s; }
@keyframes bell-wave { from { transform: scale(1); opacity: .6; } to { transform: scale(2.4); opacity: 0; } }
.bell:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }

@media (min-width: 768px) {
  .contact { min-height: 92vh; display: flex; align-items: center; }
  .contact .wrap { width: 100%; }
  .contact-bg { left: 38%; }
  .contact-bg::after {
    background: linear-gradient(90deg, var(--night) 0%, rgba(16, 28, 36, .8) 30%, rgba(16, 28, 36, .62) 70%, rgba(16, 28, 36, .55) 100%);
  }
  .contact-grid { grid-template-columns: auto 1fr; gap: 72px; align-items: center; justify-items: start; }
  .plate { width: 280px; height: 420px; padding: 56px 28px 34px; }
  .engr-name { font-size: 30px; }
}
@media (min-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .plate-wrap { grid-column: 2 / 6; justify-self: center; }
  .contact-text { grid-column: 7 / 12; }
}

/* ---------- footer ---------- */
.footer {
  background: var(--night); color: rgba(248, 242, 228, .78);
  padding: 28px var(--gutter) calc(28px + var(--bottom-safe));
  border-top: 1px solid rgba(248, 242, 228, .14);
}
.footer .label { max-width: 1240px; margin-inline: auto; }
.f-sep { margin-inline: 8px; }
@media (min-width: 768px) { .footer { padding-inline: calc(var(--frame) + var(--gutter)); padding-right: calc(var(--frame) + var(--tb-w) + 40px); padding-bottom: calc(var(--frame) + 32px); } }

/* ==========================================================================
   Motion. Hidden-for-animation states exist only under html.js.
   ========================================================================== */

/* --- split lines (H1/H2): mask rise --- */
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln-in { display: block; }
.js [data-split].is-split .ln-in { transform: translateY(130%); transition: transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * .08s); }
.js [data-split].is-split.in .ln-in { transform: none; }
.js .h1.is-split .ln-in { transition-duration: .9s; transition-delay: calc(var(--i, 0) * .09s); }

/* --- generic reveal --- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--rd, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* The wipe clips the photo inside the frame (never the observed element itself, so the
   IntersectionObserver still sees it); the thin frame border shows first. */
.js .wipe > img, .js .wipe > picture { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-draw); transition-delay: calc(var(--rd, 0s) + .1s); }
.js .wipe.in > img, .js .in .wipe > img, .js .wipe.in > picture, .js .in .wipe > picture { clip-path: inset(0); }
.wipe > picture { display: block; width: 100%; height: 100%; }
.wipe > picture img { width: 100%; height: 100%; object-fit: cover; }

/* --- load sequence --- */
.js .sheet-line { transform: scaleX(0); }
.js .s-right, .js .s-left { transform: scaleY(0); }
.js .reg { opacity: 0; }
.js .titleblock { opacity: 0; translate: 0 8px; }
.js .hero-drawing svg { opacity: 1; }
.js .hero-drawing path { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.js .hero-photo { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
.js .intro-fade { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * .08s); }
.js .intro-fade.in { opacity: 1; transform: none; }

.intro-run .s-top, .intro-run .s-bottom { animation: lr-grow-x .7s var(--ease-draw) forwards; }
.intro-run .s-right, .intro-run .s-left { animation: lr-grow-y .7s var(--ease-draw) forwards; }
.intro-run .reg { animation: lr-fade .4s .45s ease forwards; }
.intro-run .titleblock { animation: lr-tb .5s .4s var(--ease-out) forwards; }
.intro-run .hero-drawing path { animation: lr-draw var(--pd, 1.1s) var(--ease-draw) var(--d, .3s) forwards; }
.intro-run .hero-photo { animation: lr-photo 1.1s var(--ease-reveal) 2.2s forwards; }
.intro-run .hero-drawing svg { animation: lr-settle .6s 3s ease forwards; }
.intro-short.intro-run .s-top, .intro-short.intro-run .s-bottom, .intro-short.intro-run .s-right, .intro-short.intro-run .s-left { animation-duration: .4s; }
.intro-short.intro-run .reg, .intro-short.intro-run .titleblock { animation-delay: .1s; }
.intro-short.intro-run .hero-photo { animation-duration: .5s; animation-delay: .45s; }
.intro-short.intro-run .hero-drawing svg { animation-duration: .3s; animation-delay: .8s; }

@keyframes lr-grow-x { to { transform: scaleX(1); } }
@keyframes lr-grow-y { to { transform: scaleY(1); } }
@keyframes lr-fade { to { opacity: 1; } }
@keyframes lr-tb { to { opacity: 1; translate: 0 0; } }
@keyframes lr-draw { to { stroke-dashoffset: 0; } }
@keyframes lr-photo { to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes lr-settle { to { opacity: .22; } }

/* --- title block crossfade --- */
.tb-t.out { animation: tb-out .35s var(--ease-out) forwards; position: absolute; inset: 0; }
.tb-t.enter { animation: tb-in .35s var(--ease-out) both; }
@keyframes tb-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes tb-in { from { opacity: 0; transform: translateY(8px); } }

/* --- house callouts --- */
.js .co-path { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease-draw); transition-delay: calc(var(--ci, 0) * .2s); }
.js .co-dot { transform: scale(0); transition: transform .3s var(--ease-spring); transition-delay: calc(var(--ci, 0) * .2s + .7s); }
.js .co-label { opacity: 0; transition: opacity .3s ease; transition-delay: calc(var(--ci, 0) * .2s + .9s); }
.js .callouts.in .co-path { stroke-dashoffset: 0; }
.js .callouts.in .co-dot { transform: scale(1); }
.js .callouts.in .co-label { opacity: 1; }

/* --- key tags enter --- */
.js .tags .tag { opacity: 0; translate: -12px 0; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out); transition-delay: calc(var(--ti, 0) * .06s), calc(var(--ti, 0) * .06s), 0s, 0s, 0s; }
.js .tags.in .tag { opacity: 1; translate: 0 0; }
.room-text.swap { animation: room-text .3s ease; }
@keyframes room-text { from { opacity: .0; } }

/* --- scale bar --- */
.js .scale .seg { transform: scaleX(0); transition: transform .9s var(--ease-draw); transition-delay: calc(var(--a) * .009s); }
.js .scale .brk { opacity: 0; transition: opacity .4s ease .5s; }
.js .scale .tick { transform: scaleY(0); transition: transform .4s var(--ease-out); transition-delay: calc(var(--ti, 0) * .03s + .2s); }
.js .scale .tick b { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--ti, 0) * .03s + .4s); }
.js .scale .mk { opacity: 0; translate: 0 -12px; transition: opacity .5s ease, translate .5s var(--ease-spring); transition-delay: calc(var(--mi, 0) * .08s + .6s); }
.js .scale.in .seg { transform: none; }
.js .scale.in .brk, .js .scale.in .tick b, .js .scale.in .mk { opacity: 1; }
.js .scale.in .tick { transform: none; }
.js .scale.in .mk { translate: 0 0; }
@media (max-width: 1099.98px) {
  .js .scale .seg { transform: scaleY(0); }
  .js .scale .tick { transform: scaleX(0); }
}

/* --- register rules --- */
.js .ledger-rules .rule { transform: scaleX(0); transition: transform .6s var(--ease-out); transition-delay: calc(var(--ri, 0) * .05s); }
.js .ledger.in .ledger-rules .rule { transform: none; }

/* --- bell plate --- */
.js .plate-wrap { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .plate-wrap.in { opacity: 1; transform: none; }

/* ==========================================================================
   Reduced motion: no animation, everything visible, drawing static at 0.22.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .intro-fade, .js .plate-wrap, .js .tags .tag, .js .scale .mk { opacity: 1 !important; transform: none !important; translate: none !important; }
  .js .wipe > img, .js .wipe > picture, .js .hero-photo { clip-path: none !important; transform: none !important; }
  .js [data-split].is-split .ln-in { transform: none !important; }
  .js .sheet-line { transform: none !important; }
  .js .reg, .js .titleblock { opacity: 1 !important; translate: none !important; }
  .js .hero-drawing path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .hero-drawing svg { opacity: .22 !important; }
  .js .co-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .co-dot { transform: none !important; } .js .co-label { opacity: 1 !important; }
  .js .scale .seg, .js .scale .tick { transform: none !important; }
  .js .scale .brk, .js .scale .tick b { opacity: 1 !important; }
  .js .ledger-rules .rule { transform: none !important; }
  .tag:hover, .tag:focus-visible { rotate: 0deg; }
}