/* Pellow & Vane, bespoke tailors, Savile Row. Since 1921.
   Paper, pencil, chalk and cloth. Phone first. No script required. */

:root {
  --paper: #f2eadb;      /* the page: pale brown paper */
  --paper-2: #e8dfcc;    /* a shade darker, for ruled panels */
  --kraft: #d9c3a0;      /* pattern paper */
  --kraft-2: #c3a87c;    /* pattern paper, worn edge */
  --ink: #1c1915;        /* ledger ink */
  --pencil: #5b554b;     /* pencil labels */
  --rule: #b9ad97;       /* ledger ruling */
  --thread: #7a2a1e;     /* one spool of dark red thread: links and numbers */
  --chalk: #f7f1e6;      /* tailor's chalk, basting thread */
  --chalk-dim: #c9c2b3;  /* chalk, brushed off */
  --cloth: #2a2d31;      /* dark grey flannel */
  --cloth-rule: #4a4f55;
  --serif: "Libre Caslon Text", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --measure: 60ch;
}

*, *::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: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 3.6rem; /* room for the telephone bar on a phone */
}

svg { max-width: 100%; height: auto; }

a { color: var(--thread); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--thread); outline-offset: 3px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--chalk);
  padding: .6rem 1rem; font-family: var(--mono); z-index: 30;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.1rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.65rem); line-height: 1.2; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

.eyebrow {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0 0 1.25em;
  max-width: none;
}
.lede {
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.45;
}
.mono { font-family: var(--mono); }
.small { font-size: .95rem; }

/* ---------- Masthead: the sign over the door ---------- */

.mast { border-bottom: 1px solid var(--ink); }
.mast-in {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 1.1rem 0 .9rem;
}
.sign { color: var(--ink); text-decoration: none; display: block; }
.sign-name { display: block; font-size: 1.7rem; line-height: 1; letter-spacing: .01em; }
.sign-name .amp { font-style: italic; }
.sign-sub {
  display: block; margin-top: .45rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pencil);
}
.mast-tel {
  font-family: var(--mono); font-size: 1.05rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid var(--thread); padding-bottom: .1rem;
}
.mast-tel small {
  display: block; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pencil); border: 0;
}
.mast-tel:hover { color: var(--thread); }

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.35rem;
  font-family: var(--mono); font-size: .9rem;
  border-top: 1px solid var(--rule);
}
.nav li { padding: .65rem 0 .55rem; }
.nav a {
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: .12rem;
}
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav a:hover { border-bottom-color: var(--thread); }
.nav span { color: var(--pencil); }
.nav span::after { content: " *"; }
.nav-note { font-family: var(--mono); font-size: .72rem; color: var(--pencil); padding: 0 0 .6rem; margin: 0; }

/* ---------- Sections and the tape-measure rule ---------- */

.section { padding: 3rem 0; }
.section-tight { padding: 2rem 0; }
@media (min-width: 900px) {
  .section { padding: 4.5rem 0; }
}

.tape {
  height: 14px;
  border-top: 1px solid var(--ink);
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 8px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 40px) 0 0 / 100% 10px no-repeat;
}
.cloth .tape {
  border-top-color: var(--chalk-dim);
  background:
    repeating-linear-gradient(to right, var(--chalk-dim) 0 1px, transparent 1px 8px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(to right, var(--chalk-dim) 0 1px, transparent 1px 40px) 0 0 / 100% 10px no-repeat;
}

/* ---------- Opening ---------- */

.open { padding: 2.5rem 0 3rem; }
.open-grid { display: grid; gap: 2.25rem; }
@media (min-width: 900px) {
  .open { padding: 4rem 0 4.5rem; }
  .open-grid { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: end; }
}

/* ---------- Photograph frames: brown paper, basted in white thread ---------- */

.photo {
  position: relative; margin: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 7px),
    var(--kraft);
  border: 3px dashed var(--chalk);
  box-shadow: 0 0 0 1px var(--kraft-2);
  padding: 1rem;
  display: flex; align-items: flex-end;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.photo-tall { aspect-ratio: 4 / 5; }
.photo-wide { aspect-ratio: 16 / 9; }
.photo-square { aspect-ratio: 1; }
.photo span {
  font-family: var(--mono); font-size: .82rem; line-height: 1.35;
  background: var(--chalk); color: var(--ink);
  border: 1px solid var(--kraft-2);
  padding: .4rem .65rem;
  max-width: 100%;
}
.photo span::before { content: "Photograph: "; color: var(--pencil); }

/* ---------- The telephone, said plainly ---------- */

.ring { margin: 2rem 0 0; }
.ring .num {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 1rem + 3.2vw, 3rem);
  line-height: 1.15;
  color: var(--ink); text-decoration: none;
  display: inline-block;
  border-bottom: 3px solid var(--thread);
}
.ring .num:hover { color: var(--thread); }
.ring .after {
  display: block; margin-top: .7rem;
  font-family: var(--mono); font-size: .88rem; color: var(--pencil);
  max-width: 34rem;
}
.cloth .ring .num { color: var(--chalk); border-bottom-color: var(--chalk-dim); }
.cloth .ring .num:hover { border-bottom-color: var(--chalk); }
.cloth .ring .after { color: var(--chalk-dim); }

/* ---------- Ledger lines with dotted leaders ---------- */

.ledger {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  max-width: 44rem;
  border-top: 1px solid var(--ink);
}
.ledger li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger .item { flex: 0 1 auto; }
.ledger .lead {
  flex: 1 1 1.5rem; min-width: 1.5rem;
  border-bottom: 2px dotted var(--pencil);
  transform: translateY(-.35em);
}
.ledger .amt { font-family: var(--mono); white-space: nowrap; text-align: right; }
.ledger .amt small { display: block; font-size: .72rem; color: var(--pencil); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.remarks {
  font-family: var(--mono); font-size: .9rem; line-height: 1.55;
  color: var(--pencil); max-width: 44rem;
}
.remarks b {
  color: var(--ink); font-weight: 700; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; margin-right: .5rem;
}

.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---------- Something Ruth said ---------- */

.said {
  margin: 2.5rem 0; padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--thread);
  max-width: 40rem;
}
.said p {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.3; font-style: italic;
  margin: 0 0 .6em; max-width: none;
}
.said cite {
  font-style: normal; font-family: var(--mono);
  font-size: .85rem; color: var(--pencil);
}
.cloth .said { border-left-color: var(--chalk-dim); }
.cloth .said cite { color: var(--chalk-dim); }

/* ---------- Questions you are too polite to ask ---------- */

.qa { margin: 0; max-width: var(--measure); }
.qa dt {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  line-height: 1.25; font-style: italic;
  margin: 2.25rem 0 .6rem;
}
.qa dt:first-child { margin-top: 0; }
.qa dt::before {
  content: "Q. "; font-style: normal; font-family: var(--mono);
  color: var(--thread); font-size: .8em;
}
.qa dd { margin: 0; }
.qa dd p:first-child::before {
  content: "A. "; font-family: var(--mono);
  color: var(--thread); font-size: .85em;
}

/* ---------- From the ledgers (dark cloth) ---------- */

.cloth { background: var(--cloth); color: var(--chalk); }
.cloth a { color: var(--chalk); }
.cloth .eyebrow { color: var(--chalk-dim); }
.cloth p { color: var(--chalk); }

.entries { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cloth-rule); }
.entry {
  display: grid; grid-template-columns: 1fr; gap: .3rem 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--cloth-rule);
}
.entry-year {
  font-family: var(--mono); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim);
}
.entry h3 { margin: 0 0 .45em; }
.entry-body p { max-width: 52ch; }
.entry-remark {
  font-family: var(--mono); font-size: .9rem; line-height: 1.5;
  color: var(--chalk-dim); margin-top: .5rem;
}
.entry-remark::before { content: "Remarks: "; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
@media (min-width: 800px) {
  .entry { grid-template-columns: 9rem 1fr 15rem; }
  .entry-year { padding-top: .35rem; }
  .entry-remark { margin-top: .3rem; }
  .entry-remark::before { display: block; margin-bottom: .2rem; }
}

/* ---------- Steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-bottom: 1px solid var(--rule); }
.step {
  counter-increment: step;
  position: relative;
  padding: 1.75rem 0 1.75rem 3.25rem;
  border-top: 1px solid var(--rule);
}
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: 1.65rem;
  font-family: var(--mono); font-size: 1.7rem; line-height: 1;
  color: var(--thread);
}
.step h3 { margin-top: 0; }
.step-meta {
  font-family: var(--mono); font-size: .85rem; letter-spacing: .05em;
  color: var(--pencil); margin: 0 0 .7em;
}
@media (min-width: 800px) {
  .step { display: grid; grid-template-columns: 5rem minmax(0, 46rem) 1fr; gap: 0 2rem; padding: 2.25rem 0; }
  .step::before { position: static; font-size: 2.4rem; grid-row: 1 / span 3; }
  .step h3, .step .step-meta, .step-body { grid-column: 2; }
  .step-body p { max-width: none; }
}

/* ---------- Pattern tag panel (kraft) ---------- */

.tag {
  background: var(--kraft);
  border: 3px dashed var(--chalk);
  box-shadow: 0 0 0 1px var(--kraft-2);
  padding: 1.6rem 1.25rem;
  margin: 2rem 0;
  max-width: 52rem;
}
.tag .eyebrow { color: var(--ink); }
.tag a { color: var(--ink); }
.tag .ring { margin-top: 1.25rem; }
.tag .ring .after { color: var(--ink); }
@media (min-width: 800px) { .tag { padding: 2.25rem 2.25rem; } }

/* ---------- The rule on the cellar door ---------- */

.door {
  background: var(--cloth); color: var(--chalk);
  border: 6px double var(--chalk-dim);
  padding: 2rem 1.25rem;
  text-align: center;
  max-width: 30rem;
  margin: 2rem 0;
}
.door p {
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  line-height: 1.3; font-style: italic;
  margin: 0; max-width: none; color: var(--chalk);
}
.door small {
  display: block; margin-top: 1.1rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim);
}

/* ---------- People ---------- */

.people { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.person {
  display: grid; gap: 1.25rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.person h3 { margin-bottom: .25em; }
.person .role {
  font-family: var(--mono); font-size: .85rem; letter-spacing: .05em;
  color: var(--pencil); margin-bottom: 1em;
}
.person .photo { max-width: 22rem; }
@media (min-width: 800px) {
  .person { grid-template-columns: 18rem 1fr; gap: 2.5rem; align-items: start; padding: 2.75rem 0; }
}

/* Brief roll-call on the home page */
.rollcall { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 44rem; border-top: 1px solid var(--ink); }
.rollcall li { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.rollcall .who { display: block; font-size: 1.15rem; }
.rollcall .what { font-family: var(--mono); font-size: .88rem; color: var(--pencil); }
@media (min-width: 700px) {
  .rollcall li { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; }
}

/* ---------- Objects list on the house page ---------- */

.objects { display: grid; gap: 2rem; margin: 0; }
.objects > div { max-width: 40rem; }
@media (min-width: 800px) { .objects { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; } }

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

.foot { background: var(--cloth); color: var(--chalk); padding: 3rem 0 2.5rem; margin-top: 3rem; }
.foot-grid { display: grid; gap: 2.25rem; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
.foot h2 { font-size: 1.35rem; margin-bottom: .5em; }
.foot p { margin-bottom: .55em; color: var(--chalk); }
.foot .mono { color: var(--chalk-dim); font-size: .9rem; }
.foot a { color: var(--chalk); }
.foot-tel {
  font-family: var(--mono); font-size: 1.5rem; text-decoration: none;
  border-bottom: 2px solid var(--chalk-dim); display: inline-block; line-height: 1.2;
}
.foot-tel:hover { border-bottom-color: var(--chalk); }
.foot-note {
  margin-top: 2.25rem; padding-top: 1rem;
  border-top: 1px solid var(--cloth-rule);
  font-family: var(--mono); font-size: .8rem; color: var(--chalk-dim);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.mark { display: block; margin-bottom: 1rem; }

/* ---------- The telephone bar, phones only ---------- */

.ringbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--ink); color: var(--chalk);
  font-family: var(--mono); font-size: 1rem;
  text-align: center; padding: .85rem 1rem;
  text-decoration: none;
  border-top: 1px solid var(--chalk-dim);
}
.ringbar b { font-weight: 400; color: var(--chalk-dim); margin-right: .6rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 800px) {
  .ringbar { display: none; }
  body { padding-bottom: 0; }
}

@media print {
  .ringbar, .skip { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Asides beside the questions and the closing call ---------- */

.qa-grid { display: grid; gap: 2.5rem; }
.close-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .qa-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem; align-items: start; }
  .qa-aside { position: sticky; top: 2rem; }
  .close-grid { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: end; }
}

/* On a phone the number lives in the bar at the foot of the screen, so the masthead stays short */
@media (max-width: 799px) {
  .mast-tel { display: none; }
  .nav li { padding: .5rem 0 .45rem; }
  .nav ul { gap: 0 1.1rem; font-size: .86rem; }
}

/* ---- Bench photographs: added AFTER the build, identically on every site. ----
   Each picture fills the frame the design drew, cropped from the centre; the frame keeps
   the size the design gave it (its label is hidden, not removed). */
[data-bench-frame="static"] { position: relative; }
[data-bench-frame] { isolation: isolate; overflow: clip; }  /* clip, not hidden: hidden makes a grid item a scroll container and changes its automatic minimum size, which re-lays out some designs */
[data-bench-frame] > .bench-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; z-index: -1; margin: 0; border: 0; }
[data-bench-frame]:not([data-bench-over]) .bench-label { visibility: hidden; }
[data-bench-frame][data-bench-frame]:not([data-bench-over])::before,
[data-bench-frame][data-bench-frame]:not([data-bench-over])::after { visibility: hidden; }  /* hidden, not removed: some designs size the frame with a pseudo-element */
[data-bench-over] .bench-label { display: none; }
[data-bench-over] > .bench-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--bench-scrim) 0%, color-mix(in srgb, var(--bench-scrim) 88%, transparent) 42%, color-mix(in srgb, var(--bench-scrim) 35%, transparent) 72%, transparent 100%); }
@media (max-width: 700px) { [data-bench-over] > .bench-scrim { background: color-mix(in srgb, var(--bench-scrim) 82%, transparent); } }