/* =========================================================================
   The Whiteley Word — thewhiteleyword.com (2026-10-20)
   =========================================================================
   Its own stylesheet: the magazine is NOT on Nagged's look. Editorial and
   black-and-white, after the newspaper sites Tom pinned — a centred
   masthead, a ruled nav, serif headlines over a clean sans, thin rules
   between everything, no shadows, no rounded cards.

   Faces from Adobe kit xnk3hkj (already on Nagged): Loretta for headlines,
   Urca for everything read. The kit's allowed domains must include
   thewhiteleyword.com or both fall back to the system faces.
   ========================================================================= */

:root {
    --w-ink:    #141414;
    --w-paper:  #ffffff;
    --w-soft:   #f4f3ef;
    --w-muted:  #6b6b66;
    --w-rule:   #141414;
    --w-hair:   #dcdcd6;
    --w-head:   "loretta", Georgia, "Times New Roman", serif;
    --w-body:   "urca", system-ui, -apple-system, "Segoe UI", sans-serif;
    --w-gx:     clamp(1rem, 3vw, 2rem);
    --w-max:    1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--w-paper); color: var(--w-ink); font-family: var(--w-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--w-head); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }

.w-wrap { width: 100%; max-width: calc(var(--w-max) + var(--w-gx) * 2); margin: 0 auto; padding-inline: var(--w-gx); }

/* ── Masthead ──────────────────────────────────────────────────────── */
.w-top { border-bottom: 1px solid var(--w-hair); font-size: .8rem; color: var(--w-muted); }
.w-top .w-wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.4rem; }
.w-top a { text-decoration: none; font-weight: 700; color: var(--w-ink); }
.w-top a:hover { text-decoration: underline; }

.w-mast { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem); text-align: center; }
.w-mast a { display: inline-block; }
.w-mast img { width: clamp(220px, 34vw, 440px); margin: 0 auto; }

.w-nav { border-top: 1px solid var(--w-rule); border-bottom: 3px double var(--w-rule); }
.w-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem clamp(1rem, 3vw, 2.5rem); margin: 0; padding: .7rem 0; list-style: none; }
.w-nav a { font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.w-nav a:hover, .w-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }

/* ── Page furniture ────────────────────────────────────────────────── */
.w-main { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.w-kicker { display: block; margin-bottom: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--w-muted); }
.w-title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); }
.w-lede { margin-top: 1rem; max-width: 40rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: #333; }
.w-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; padding-top: .75rem; border-top: 1px solid var(--w-rule); }
.w-section-head h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.w-section-head a { font-size: .85rem; font-weight: 700; text-decoration: none; }
.w-rule { border: 0; border-top: 1px solid var(--w-hair); margin: 2.5rem 0; }

.w-btn { display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.3em; border: 2px solid var(--w-ink); background: var(--w-ink); color: var(--w-paper); font-family: var(--w-body); font-size: .95rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; cursor: pointer; }
.w-btn:hover { background: #000; }
.w-btn--ghost { background: transparent; color: var(--w-ink); }
.w-btn--ghost:hover { background: var(--w-soft); }
.w-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ── Home ──────────────────────────────────────────────────────────── */
.w-front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.w-front__aside { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--w-hair); }
.w-lead img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.w-lead h2 { margin-top: 1rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.w-lead h2 a, .w-card h3 a, .w-list h3 a { text-decoration: none; }
.w-lead h2 a:hover, .w-card h3 a:hover, .w-list h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.w-meta { margin-top: .5rem; font-size: .8rem; color: var(--w-muted); }
.w-excerpt { margin-top: .6rem; color: #333; }

.w-issue { padding: 1.25rem; background: var(--w-soft); border-top: 3px solid var(--w-ink); }
.w-issue h3 { font-size: 1.4rem; }
.w-issue p { margin: .5rem 0 0; font-size: .95rem; }
.w-issue .w-btn { margin-top: 1rem; }

.w-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.w-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: .75rem; }
.w-card h3 { font-size: 1.25rem; }

.w-list { list-style: none; margin: 0; padding: 0; }
.w-list li { padding: .9rem 0; border-bottom: 1px solid var(--w-hair); }
.w-list li:first-child { padding-top: 0; }
.w-list h3 { font-size: 1.1rem; }

.w-masthead-hero { padding-block: clamp(1rem, 3vw, 2rem) 0; text-align: center; }
.w-masthead-hero .w-title { max-width: 18ch; margin: 0 auto; }
.w-masthead-hero .w-lede { margin-inline: auto; }
.w-masthead-hero .w-btns { justify-content: center; }

/* ── Article ───────────────────────────────────────────────────────── */
.w-article { max-width: 46rem; margin: 0 auto; }
.w-article__img { margin: 1.75rem 0; }
.w-prose { font-size: 1.125rem; line-height: 1.75; }
.w-prose h2 { margin: 2rem 0 .75rem; font-size: 1.6rem; }
.w-prose h3 { margin: 1.5rem 0 .5rem; font-size: 1.3rem; }
.w-prose ul, .w-prose ol { padding-left: 1.4em; }
.w-prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--w-ink); font-family: var(--w-head); font-size: 1.3rem; }
.w-prose img { margin: 1.5rem 0; }

/* ── Pricing ───────────────────────────────────────────────────────── */
.w-rates { width: 100%; border-collapse: collapse; font-size: 1rem; }
.w-rates th, .w-rates td { padding: .75rem .5rem; border-bottom: 1px solid var(--w-hair); text-align: left; vertical-align: top; }
.w-rates th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--w-muted); border-bottom: 1px solid var(--w-rule); }
.w-rates td:last-child, .w-rates th:last-child { text-align: right; white-space: nowrap; }
.w-rates .w-rates__price { font-family: var(--w-head); font-size: 1.2rem; font-weight: 700; }
.w-rates small { display: block; color: var(--w-muted); font-size: .85rem; }
.w-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.w-box { padding: 1.25rem; background: var(--w-soft); }
.w-box h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.w-box ul { margin: 0; padding-left: 1.2em; }

/* "How adverts are measured": one bar per column count, drawn to scale. */
.w-cols { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.w-cols li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; font-size: .85rem; }
.w-cols__bar { display: block; height: .7rem; background: var(--w-ink); }

/* "Around the area": the row of area links. */
.w-areas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.w-areas a { padding: .4em .8em; border: 1px solid var(--w-ink); font-size: .85rem; font-weight: 700; text-decoration: none; }
.w-areas a[aria-current="page"], .w-areas a:hover { background: var(--w-ink); color: var(--w-paper); }

/* ── Directory ─────────────────────────────────────────────────────── */
.w-dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.w-dir__item { padding-top: 1rem; border-top: 1px solid var(--w-hair); }
.w-dir__item img { max-height: 56px; width: auto; margin-bottom: .75rem; }
.w-dir__item h3 { font-size: 1.2rem; }
.w-dir__item p { margin: .4rem 0 0; font-size: .95rem; }
.w-dir__item a { word-break: break-word; }

/* ── Forms (contact) ───────────────────────────────────────────────── */
.w-form { display: grid; gap: 1rem; max-width: 36rem; }
.w-form label { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 700; }
.w-form input, .w-form textarea { width: 100%; padding: .75rem .85rem; border: 1px solid var(--w-ink); border-radius: 0; background: var(--w-paper); font: inherit; color: var(--w-ink); }
.w-form input:focus, .w-form textarea:focus { outline: 2px solid var(--w-ink); outline-offset: 1px; }
.w-form .w-error { margin: .3rem 0 0; color: #b42318; font-size: .85rem; }
.w-done { padding: 1.5rem; background: var(--w-soft); border-top: 3px solid var(--w-ink); }

/* ── Payment page ──────────────────────────────────────────────────── */
.w-pay { max-width: 44rem; margin: 0 auto; }
.w-pay__summary { margin: 1.5rem 0; border-top: 1px solid var(--w-rule); border-bottom: 1px solid var(--w-rule); }
.w-pay__summary div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--w-hair); }
.w-pay__summary div:first-child { border-top: 0; }
.w-pay__summary dt { color: var(--w-muted); }
.w-pay__summary dd { margin: 0; text-align: right; font-weight: 700; }
.w-pay__total dd { font-family: var(--w-head); font-size: 1.6rem; }
.w-pay__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.w-pay__way { padding: 1.25rem; border: 1px solid var(--w-ink); }
.w-pay__way h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.w-pay__bank { margin: .75rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .95rem; }
.w-pay__bank dt { color: var(--w-muted); }
.w-pay__bank dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-notice { padding: 1rem 1.25rem; background: var(--w-soft); border-left: 3px solid var(--w-ink); margin: 1rem 0; }

/* ── Footer ────────────────────────────────────────────────────────── */
.w-foot { border-top: 3px double var(--w-rule); padding-block: 2rem 2.5rem; font-size: .9rem; }
.w-foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; }
.w-foot img { width: 180px; }
.w-foot ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.w-foot a { text-decoration: none; font-weight: 700; }
.w-foot a:hover { text-decoration: underline; }
.w-foot__legal { margin-top: 1.5rem; color: var(--w-muted); font-size: .8rem; }

.w-empty { padding: 2rem 0; color: var(--w-muted); }

@media (max-width: 900px) {
    .w-front, .w-grid2 { grid-template-columns: 1fr; }
    .w-front__aside { padding-left: 0; border-left: 0; }
    .w-cards, .w-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .w-cards, .w-dir, .w-pay__ways { grid-template-columns: 1fr; }
    .w-top__date { display: none; }
}