/* Ramaa Living — the estate plan
   Ink on drafting paper. Line weights, hatches and a key, because on a plan the
   question "whose job is this?" is answered by the key rather than by prose. */

/* ---------------------------------------------------------------- tokens */
:root {
  --paper:      #F5F4EF;
  --paper-2:    #EFEDE7;
  --paper-3:    #E7E4DB;
  --ink:        #241E23;
  --ink-2:      #5B525A;
  --plum:       #563250;
  --plum-deep:  #3A2137;
  --plum-pale:  #EDE5EC;
  --line:       #C8C2BB;
  --line-2:     #A59D98;
  --mark-red:   #A5341C;   /* emergency only */
  --mark-blue:  #2C5670;   /* routine and scheduled */

  --sans: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tech: "Archivo", var(--sans);

  /* The ramp from DESIGN.md. Nothing sets a font-size outside it. */
  --t-mark:  0.6875rem;
  --t-small: 0.875rem;
  --t-body:  1.0625rem;
  --t-lede:  1.3125rem;
  --t-h3:    1.375rem;
  --t-h2:    clamp(1.75rem, 3.2vw, 2.5rem);
  --t-h1:    clamp(2.25rem, 6vw, 4rem);
  --t-plate: clamp(3rem, 9vw, 7rem);

  /* the drawing grid, which the layout actually obeys */
  --u: 1.5rem;
  --measure: 34rem;
  --wrap: 72rem;
}

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

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

body {
  margin: 0;
  background-color: var(--paper);
  /* drafting paper: a faint 1.5rem grid, drawn, not decorative */
  background-image:
    linear-gradient(to right, rgba(86, 50, 80, .045) 0 1px, transparent 1px),
    linear-gradient(to bottom, rgba(86, 50, 80, .045) 0 1px, transparent 1px);
  background-size: var(--u) var(--u);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Inline icons size from the text around them and never from the container. */
.ico { width: .9em; height: .9em; flex: none; display: inline-block; vertical-align: -0.08em; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: var(--u); top: -4rem; z-index: 60;
  background: var(--plum); color: #fff; padding: .6rem 1rem;
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: top .18s;
}
.skip:focus { top: var(--u); }

/* The sheet frame that used to live here was a fixed overlay inset from the
   viewport edge. Its top border and corner tick cut straight across the header
   and through the logo. Removed rather than nudged below the header: anything
   floating over the whole page eventually collides with something, and the grid
   paper already carries the drafting-sheet idea on its own. */
@media (min-width: 60rem) { body { padding: 0 var(--u); } }

/* --------------------------------------------------------------- the header */
.head {
  position: relative; z-index: 40;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper);
}
.head__in {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: var(--u);
  padding: calc(var(--u) * .75) 0;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.brand__mark { height: 2.5rem; width: auto; flex: none; }
.brand__word { display: grid; line-height: 1; }
.brand__word b {
  font: 600 1.0625rem/1 var(--tech); letter-spacing: .28em; text-transform: uppercase;
  color: var(--plum);
}
.brand__word i {
  font: 400 var(--t-mark)/1 var(--tech); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-2); font-style: normal; margin-top: .3rem;
}

.nav { margin-left: auto; display: none; gap: 1.5rem; align-items: center; }
@media (min-width: 62rem) { .nav { display: flex; } }
.nav a {
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--plum); border-bottom-color: var(--line-2); }
.nav a[aria-current] { color: var(--plum); border-bottom-color: var(--plum); }

.burger {
  margin-left: auto; display: grid; place-items: center; gap: 4px;
  width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--line-2);
  cursor: pointer; color: var(--ink);
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger span { display: block; width: 1.1rem; height: 1px; background: currentColor; }

.drawer {
  position: fixed; inset: 0; z-index: 55; background: var(--paper);
  padding: var(--u); overflow-y: auto;
  opacity: 0; transition: opacity .22s;
}
.drawer[data-open] { opacity: 1; }
.drawer__top { display: flex; justify-content: flex-end; }
.drawer__x {
  width: 2.75rem; height: 2.75rem; background: none; border: 1px solid var(--line-2);
  cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--ink);
}
.drawer nav { display: grid; margin-top: var(--u); border-top: 1px solid var(--line); }
.drawer nav a {
  padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font: 600 1.125rem/1.2 var(--tech); display: flex; justify-content: space-between;
}
.drawer nav a span { font: 400 var(--t-mark)/1 var(--tech); color: var(--plum); letter-spacing: .1em; align-self: center; }

/* ---------------------------------------------------------------- the bands */
.band { padding: calc(var(--u) * 2.5) 0; border-bottom: 1px solid var(--line); }
.band--2 { background: var(--paper-2); }
.band--tight { padding: calc(var(--u) * 1.5) 0; }
.band--dark {
  background: var(--plum-deep); color: #F3EEF2; border-bottom-color: var(--plum-deep);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 0 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px);
  background-size: var(--u) var(--u);
}
.band--dark .eyebrow { color: #C9A8C3; }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #F6F0F5; }
.band--dark a { color: #F3EEF2; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--u); }
@media (min-width: 60rem) { .wrap { padding: 0; } }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 { font-family: var(--tech); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: var(--t-h1); letter-spacing: -0.02em; max-width: 22ch; color: var(--plum); }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; max-width: 26ch; color: var(--plum); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-body); }
p  { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum); display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
}
.eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 5rem; background: var(--line-2); }

.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink); max-width: 36rem; }
.small { font-size: var(--t-small); color: var(--ink-2); }

a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--plum-deep); }

/* reference number, printed not hidden */
.ref {
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .1em;
  color: var(--plum); font-variant-numeric: tabular-nums; flex: none;
}

.head__row { display: grid; gap: 1rem; margin-bottom: calc(var(--u) * 1.5); }

/* ------------------------------------------------------- the hero site plan */
.hero { display: grid; gap: calc(var(--u) * 1.5); align-items: start; }
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(var(--u) * 2); }
}
.hero h1 { margin-bottom: 1.25rem; }

.plan {
  border: 1px solid var(--line-2); background: var(--paper);
  padding: var(--u); position: relative;
}
.plan figcaption {
  font: 400 var(--t-small)/1.5 var(--sans); color: var(--ink-2);
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line);
}
.plan__corner {
  position: absolute; top: .5rem; right: .75rem;
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .14em; color: var(--ink-2);
  text-transform: uppercase;
}

/* the drawn lines. Visible by default; JS only animates them in. */
.plan svg .ln { stroke: var(--plum); fill: none; stroke-width: 1.3; }
.plan svg .ln--light { stroke: var(--line-2); }
.plan svg .unit { fill: #DCC8D8; stroke: var(--plum); stroke-width: .7; }
.plan svg text { font: 600 10px/1 var(--tech); letter-spacing: .1em; fill: var(--ink-2); }
.plan svg .big { font-size: 17px; fill: var(--plum); letter-spacing: .02em; }
.plan svg .tot { font-size: 12px; fill: var(--plum); letter-spacing: .08em; }
.plan svg .sub { font-size: 8.5px; fill: var(--ink-2); }
/* The drawing shrinks with its column, so on a phone its lettering has to grow
   to stay readable at the size it is actually rendered. */
@media (max-width: 48rem) {
  .plan svg text { font-size: 15px; }
  .plan svg .big { font-size: 24px; }
  .plan svg .tot { font-size: 17px; }
  .plan svg .sub { font-size: 12px; }
}

/* ------------------------------------------------------------ photographs */
/* Mounted like a plate on a drawing sheet: a ruled border, the image inside it. */
.shot { margin: 0; border: 1px solid var(--line-2); background: var(--paper); padding: .5rem; }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.shot figcaption {
  font: 400 var(--t-small)/1.5 var(--sans); color: var(--ink-2);
  margin-top: .7rem; padding: 0 .25rem .25rem; border-top: 1px solid var(--line);
  padding-top: .6rem;
}
.shot--hero { padding: var(--u); }

/* ---------------------------------------------------------------- the doors */
/* Four things a tenant came here to do. Nothing else competes with them. */
.doors { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 42rem) { .doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .doors { grid-template-columns: repeat(4, 1fr); } }
.door {
  background: var(--paper); padding: calc(var(--u) * 1.15) var(--u);
  text-decoration: none; color: inherit; display: grid; align-content: start; gap: .6rem;
  transition: background .2s, transform .2s;
}
.door:hover { background: var(--plum-pale); }
.door__ref { font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .16em; color: var(--plum); text-transform: uppercase; }
.door h2 { font-size: var(--t-h3); color: var(--ink); max-width: none; letter-spacing: 0; }
.card h2, .step h3, .val h3, .panel__head h2 { color: var(--ink); max-width: none; letter-spacing: 0; }
.door p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
.door__go { font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .12em; color: var(--plum); text-transform: uppercase; margin-top: .4rem; }
.door:hover .door__go { color: var(--plum-deep); }

/* ------------------------------------------------------------------ the key */
/* The centrepiece. On a plan, the key is what makes the marks mean something. */
.key { display: grid; gap: calc(var(--u) * 1.5); }
@media (min-width: 60rem) { .key { grid-template-columns: 1fr 1fr; gap: var(--u); } }

.panel { border: 1px solid var(--line-2); background: var(--paper); }
.panel__head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: var(--u); border-bottom: 1px solid var(--line-2);
}
.panel__head h2 { font-size: var(--t-h3); }
.panel--ours .panel__head { background: var(--plum-pale); }
.panel--yours .panel__head { background: var(--paper-3); }
.panel__swatch { width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-2); flex: none; align-self: center; }
/* landlord items: diagonal hatch. tenant items: stipple. The two conventions a
   plan uses to separate one parcel from another. */
.sw--ours  { background-image: repeating-linear-gradient(45deg, var(--plum) 0 1px, transparent 1px 5px); }
.sw--yours { background-image: radial-gradient(var(--ink-2) .8px, transparent .8px); background-size: 5px 5px; }

.keylist { list-style: none; margin: 0; padding: 0; }
.keylist li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .85rem var(--u); border-bottom: 1px solid var(--line);
}
.keylist li:last-child { border-bottom: 0; }
.keylist span { max-width: 46ch; }
.panel--ours  .keylist li { border-left: 3px solid var(--plum); }
.panel--yours .keylist li { border-left: 3px dotted var(--line-2); }

/* ------------------------------------------------------- the capsule control */
/* The one borrowed gesture: a chip that crosses over when the state changes. */
.toggle {
  display: inline-flex; padding: 3px; gap: 3px; position: relative;
  border: 1px solid var(--line-2); background: var(--paper-3); border-radius: 999px;
}
.toggle button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .13em; text-transform: uppercase;
  padding: .7rem 1.1rem; border-radius: 999px; color: var(--ink-2);
}
.toggle button[aria-pressed="true"] { color: #fff; }
.toggle__chip {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
  background: var(--plum); border-radius: 999px;
  transition: transform .34s cubic-bezier(.22,.9,.26,1), width .34s cubic-bezier(.22,.9,.26,1);
}
@media (prefers-reduced-motion: reduce) { .toggle__chip { transition: none; } }

/* ------------------------------------------------------------- timescales */
.scale { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 52rem) { .scale { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--paper); padding: calc(var(--u) * 1.15) var(--u); display: grid; gap: .5rem; align-content: start; }
.step__ref { font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .16em; text-transform: uppercase; }
.step h3 { font-size: var(--t-h3); }
.step__when { font: 700 1.5rem/1.1 var(--tech); font-variant-numeric: tabular-nums; }
.step p { font-size: var(--t-small); color: var(--ink-2); margin: .25rem 0 0; }
.step--red   { border-top: 3px solid var(--mark-red); }
.step--red .step__ref, .step--red .step__when { color: var(--mark-red); }
.step--blue  { border-top: 3px solid var(--mark-blue); }
.step--blue .step__ref, .step--blue .step__when { color: var(--mark-blue); }
.step--plain { border-top: 3px solid var(--line-2); }
.step--plain .step__ref, .step--plain .step__when { color: var(--plum); }

/* --------------------------------------------------------------- the notes */
.note {
  border-left: 3px solid var(--line-2); padding: .25rem 0 .25rem var(--u);
  max-width: 40rem; font-size: var(--t-small); color: var(--ink-2);
}
.note--red { border-left-color: var(--mark-red); }
.note--red strong { color: var(--mark-red); }
.note p { font-size: inherit; }

.urgent {
  border: 1px solid var(--mark-red); border-left-width: 4px;
  background: var(--paper); padding: var(--u); max-width: 42rem;
}
.urgent .eyebrow { color: var(--mark-red); }
.urgent .eyebrow::after { background: var(--mark-red); opacity: .4; }

/* ----------------------------------------------------------------- lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-width: var(--measure); }
.ticks li { display: flex; gap: .85rem; align-items: baseline; }
/* A real tick needs unequal sides. Equal borders rotated 45 degrees give a
   symmetric V, which reads as a dropdown chevron rather than a check. */
.ticks li::before {
  content: ""; width: .34rem; height: .62rem; flex: none; margin-top: .3rem;
  border-right: 1.5px solid var(--plum); border-bottom: 1.5px solid var(--plum);
  transform: rotate(45deg);
}
.ticks--plain li::before { border: 0; background: var(--line-2); width: .35rem; height: .35rem;
  border-radius: 50%; transform: none; margin-top: .55rem; }

.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rules li {
  counter-increment: r; display: flex; gap: 1rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.rules li::before {
  content: counter(r, decimal-leading-zero);
  font: 600 var(--t-mark)/1.4 var(--tech); letter-spacing: .08em; color: var(--plum);
  font-variant-numeric: tabular-nums; flex: none;
}
.rules li span { max-width: 48ch; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts li { background: var(--paper); padding: .85rem var(--u); font-size: var(--t-small); }

/* ------------------------------------------------------------------- cards */
.cards { display: grid; gap: var(--u); }
@media (min-width: 54rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  border: 1px solid var(--line-2); background: var(--paper); padding: calc(var(--u) * 1.25) var(--u);
  display: grid; gap: .75rem; align-content: start; text-decoration: none; color: inherit;
}
.card--link:hover { background: var(--plum-pale); }
.card--shot { padding-top: var(--u); }
.card--shot .shot { border-color: var(--line); padding: 0; }
.card--shot .shot img { aspect-ratio: 3 / 2; }
.card h2 { font-size: var(--t-h3); }
.card p { font-size: var(--t-small); color: var(--ink-2); }

.plate { font: 700 var(--t-plate)/.9 var(--tech); color: var(--plum); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plate--light { color: #E8D4E4; }

.spread { display: grid; gap: var(--u); }
@media (min-width: 58rem) { .spread { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); } }
.spread--wide { grid-template-columns: 1fr; }
@media (min-width: 58rem) { .spread--wide { grid-template-columns: 1fr 1.4fr; } }

.vals { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 46rem) { .vals { grid-template-columns: 1fr 1fr; } }
.val { background: var(--paper); padding: calc(var(--u) * 1.1) var(--u); display: grid; gap: .5rem; align-content: start; }
.val b { font: 700 1.5rem/1 var(--tech); color: var(--plum); font-variant-numeric: tabular-nums; }
.val h3 { font-size: var(--t-body); }
.val p { font-size: var(--t-small); color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------------------- forms */
.form { display: grid; gap: var(--u); max-width: 40rem; }
.field { display: grid; gap: .45rem; }
.field label { font: 600 var(--t-mark)/1.3 var(--tech); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field .req { color: var(--mark-red); }
.field input, .field textarea {
  font: 400 var(--t-body)/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 0;
  padding: .7rem .8rem; width: 100%;
}
.field input:hover, .field textarea:hover { border-color: var(--ink-2); }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input[type="file"] { padding: .5rem; font-size: var(--t-small); }
.field [aria-invalid="true"] { border-color: var(--mark-red); border-width: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.act {
  justify-self: start; display: inline-flex; align-items: center; gap: .7rem;
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .14em; text-transform: uppercase;
  background: var(--plum); color: #fff; border: 1px solid var(--plum);
  padding: 1rem 1.6rem; cursor: pointer; text-decoration: none;
  transition: background .18s, transform .18s;
}
.act:hover { background: var(--plum-deep); border-color: var(--plum-deep); color: #fff; }
.act:active { transform: translateY(1px); }
.act[disabled] { opacity: .55; cursor: progress; }

.act--ghost { background: none; color: var(--plum); border-color: var(--line-2); }
.act--ghost:hover { background: var(--plum-pale); color: var(--plum-deep); border-color: var(--plum); }
.act--red { background: var(--mark-red); border-color: var(--mark-red); }
.act--red:hover { background: #87290F; border-color: #87290F; }
.act__after { font-size: var(--t-small); color: var(--ink-2); max-width: var(--measure); }

.form__status { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
.form__status[data-error] { color: var(--mark-red); font-weight: 700; }

/* ------------------------------------------------------------------ a TBC */
/* A fact that is not known yet is shown as missing, never invented. */
.tbc {
  font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper-3); border: 1px dashed var(--line-2);
  padding: .3rem .5rem; display: inline-block;
}

/* ----------------------------------------------------------------- footer */
.foot { background: var(--paper-2); padding: calc(var(--u) * 2) 0 var(--u); }
.foot__in { display: grid; gap: calc(var(--u) * 1.5); }
@media (min-width: 58rem) { .foot__in { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot h2 { max-width: none; letter-spacing: .18em; font: 600 var(--t-mark)/1 var(--tech); letter-spacing: .18em; text-transform: uppercase; color: var(--plum); margin-bottom: 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot a { color: var(--ink); text-decoration: none; font-size: var(--t-small); }
.foot a:hover { color: var(--plum); text-decoration: underline; }
.foot__legal {
  margin-top: calc(var(--u) * 1.5); padding-top: var(--u); border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--ink-2); display: grid; gap: .5rem;
}
.foot__legal strong { color: var(--ink); font-weight: 700; }
.foot__legal p { max-width: 52rem; }

/* ------------------------------------------------- motion: the drawn state */
/* Nothing here hides content. The hero plan is drawn in by JS; with JS off the
   lines are already complete, which is why no stroke-dashoffset lives in CSS. */
.settle { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .door, .act, .toggle__chip { transition: none !important; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .head, .foot, .sheet-frame, .burger, .drawer, .toggle, .skip { display: none !important; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  .band { padding: 1rem 0; border: 0; }
  .panel, .doors, .scale { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}