/*
 * The whole site's design, in one place.
 *
 * This used to live in a <style> block in index.html, so the homepage was
 * redesigned and the other eleven pages kept the blue-to-orange gradient and
 * glass cards they had before. Every page now loads this file instead, which
 * is the only way the set stays consistent the next time one page changes.
 */

/*
 * Palette taken from the hero illustration rather than picked in the
 * abstract: North Sea slate, overcast grey-white, chimney charcoal and
 * a single ochre for the one shaft of sun. The previous blue-to-orange
 * gradient put dark blue type on a mid-blue ground, which was close to
 * unreadable, and repeated the same gradient on the button.
 */
:root {
    --sky: #ECEEF0;
    --card: #FFFFFF;
    --ink: #1B2228;
    --muted: #5C6873;
    --edge: #D8DDE2;
    --slate: #4A6C85;
    --slate-deep: #2F4B60;
    --ochre: #C08A3E;
    /* Temperature is information, so it gets its own scale. */
    --t-freezing: #3D6E9C;
    --t-cold: #5885A3;
    --t-cool: #6E8FA0;
    --t-mild: #6E8B6E;
    --t-warm: #B08344;
    --t-hot: #A9583A;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sky: #14181C;
        --card: #1C2329;
        --ink: #E4E9ED;
        --muted: #93A0AB;
        --edge: #2B343C;
        --slate: #7FA5C0;
        --slate-deep: #9DBBD1;
        --ochre: #D9A863;
        --t-freezing: #6E9CC4;
        --t-cold: #7FA3BE;
        --t-cool: #8FAAB9;
        --t-mild: #8FAA8F;
        --t-warm: #C9A063;
        --t-hot: #C97E5F;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--sky);
    color: var(--ink);
}
h1, h2, h3, .display {
    font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* The hero carries the illustration; type sits below it, not on it. */
/* The illustration sits behind the search rather than above it, so the
   thing the site exists to do is the first thing on the screen. */
.hero {
    position: relative;
    background: #46637A url('/hero.jpg') center 42% / cover no-repeat;
    border-bottom: 1px solid var(--edge);
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(27,34,40,.30) 0%, rgba(27,34,40,.62) 100%);
}
.hero-inner {
    position: relative; z-index: 1;
    max-width: 640px; margin: 0 auto; padding: 56px 24px 60px; text-align: center;
}
.hero-inner h1 {
    font-size: clamp(1.9rem, 4.6vw, 2.75rem); color: #fff; margin: 0 0 8px;
    line-height: 1.12; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hero-sub { color: rgba(255,255,255,.92); font-size: 1.02rem; margin: 0 0 26px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.search-panel {
    background: var(--card); border: 1px solid var(--edge); border-radius: 8px;
    padding: 22px; text-align: left; box-shadow: 0 10px 30px rgba(15,23,30,.22);
}
.search-panel input { font-size: 1.05rem !important; }

/* Flat panels on the ground, not cards floating over a gradient. */
.card, .card-glass {
    background: var(--card) !important;
    border: 1px solid var(--edge) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: none !important;
}
.card:hover { transform: none !important; box-shadow: none !important; }
.gradient-text { color: var(--ink) !important; }

.btn-primary {
    background: var(--slate-deep) !important;
    color: #fff !important;
    transition: background .15s ease !important;
}
.btn-primary:hover { background: var(--slate) !important; transform: none !important; box-shadow: none !important; }
.btn-primary:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; box-shadow: none !important; }

/* Restores the properties the old stylesheet set and this one dropped:
   without display and padding the badge stretched full width, and
   without an explicit colour it rendered dark text on a dark ground. */
.weather-badge {
    display: inline-flex; align-items: center; gap: .45em;
    background: var(--slate-deep);
    color: #fff;
    padding: .35rem .85rem;
    border-radius: 4px;
    font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
    box-shadow: none;
    margin-bottom: 1rem;
}
.weather-badge .icon { width: 1em; height: 1em; }
.toggle-checked { background: var(--slate-deep) !important; }
input:focus { border-color: var(--slate) !important; box-shadow: 0 0 0 3px rgba(74,108,133,.18) !important; }

/* Tailwind's greys are absolute values chosen for a white page, so in dark
 * mode they put near-black text on a near-black card. Every one the site
 * actually uses is remapped onto a token that flips with the theme. Only two
 * were remapped before, which is why the postcode and toggle labels were
 * invisible on a dark screen: they use text-gray-800.
 */
.bg-sky-50 { background: color-mix(in srgb, var(--slate) 6%, var(--card)) !important; }
.border-sky-100, .border-gray-200, .border-gray-300 { border-color: var(--edge) !important; }
.text-gray-900, .text-gray-800 { color: var(--ink) !important; }
.text-gray-700, .text-gray-600, .text-gray-500 { color: var(--muted) !important; }
.bg-white { background: var(--card) !important; }
.bg-gray-200, .bg-gray-300 { background: color-mix(in srgb, var(--slate) 12%, var(--card)) !important; }

/* A temperature band is coded by its own colour, so the scale is
   readable at a glance rather than being decorative sameness. */
.band { border-left: 3px solid var(--edge); padding-left: 16px; }
.band-freezing { border-left-color: var(--t-freezing); }
.band-cold     { border-left-color: var(--t-cold); }
.band-cool     { border-left-color: var(--t-cool); }
.band-mild     { border-left-color: var(--t-mild); }
.band-warm     { border-left-color: var(--t-warm); }
.band-hot      { border-left-color: var(--t-hot); }

.icon { width: 1.15em; height: 1.15em; vertical-align: -0.18em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 2.2rem; height: 2.2rem; color: var(--slate); }

.outfit-icon { color: var(--slate); display: inline-flex; }
.outfit-icon .icon { width: 1.6rem; height: 1.6rem; }
.outfit-body { min-width: 0; }
.shop-link { font-size: .85em; color: var(--slate); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.shop-note { font-size: .8rem; color: var(--muted); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Shared page furniture ---------------------------------------------
 * The inner pages are read rather than operated, so they get a measured
 * column and a plain header band instead of the homepage's photographic hero.
 */

.page-head {
    background: var(--slate-deep);
    border-bottom: 1px solid var(--edge);
}
.page-head-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 44px 24px 40px;
}
.page-head h1 {
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1.15;
    margin: 0;
}
.page-head p {
    color: rgba(255, 255, 255, .88);
    margin: 10px 0 0;
    font-size: 1.02rem;
}

.page-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 8px;
}

/* Running text is set for reading: roughly 65 characters, generous leading,
   and headings that are clearly a level above the paragraphs under them. */
.prose { color: var(--ink); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.45rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8em; }
.prose p, .prose li { color: var(--ink); }
.prose a { color: var(--slate-deep); text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose strong { color: var(--ink); }

.site-footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px 40px;
    border-top: 1px solid var(--edge);
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}
.site-footer a { color: var(--slate-deep); font-weight: 600; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* The nav is the one element on every page, so it is defined here rather than
   assembled from utility classes that drifted page to page. */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 12px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--edge);
}
.site-nav a { text-decoration: none; }
.site-nav .brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
.site-nav .brand .icon { color: var(--slate); }
.site-nav .links { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav .links a {
    padding: 6px 14px; border-radius: 999px;
    font-weight: 600; font-size: .875rem; color: var(--slate-deep);
    transition: background .15s ease, color .15s ease;
}
.site-nav .links a:hover { background: var(--slate-deep); color: #fff; }
.site-nav .links a[aria-current="page"] { background: color-mix(in srgb, var(--slate) 14%, transparent); }
.site-nav a:focus-visible, .site-footer a:focus-visible {
    outline: 3px solid var(--ochre); outline-offset: 2px;
}

/* affiliate label */
.aff-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1em .4em;
  border: 1px solid currentColor;
  border-radius: 3px;
  vertical-align: baseline;
  opacity: .75;
}
.aff-disclosure {
  font-size: .85rem;
  opacity: .8;
  margin: 1rem 0;
}

/* book plug: start */
.book-plug {
  --bp-surface: var(--card, var(--surface, #fff));
  --bp-ink: var(--ink, var(--text, #1a1d21));
  --bp-ink-soft: var(--ink-soft, var(--text-soft, var(--ink, var(--text, #454c54))));
  --bp-muted: var(--muted, var(--text-faint, var(--ink-soft, var(--text-soft, #6b747e))));
  --bp-rule: var(--rule, var(--edge, var(--line, #e3e0da)));
  --bp-accent: var(--accent, var(--slate, var(--brand-600, #2b4c6f)));
  --bp-accent-deep: var(--accent-deep, var(--slate-deep, var(--brand-700, #1d3550)));
  /* The surface the accent was chosen to sit against, so the button reads
     correctly whichever way round the theme is. dress-for-the-weather's
     dark --slate is a text colour, and white on it measured 2.61:1. */
  --bp-accent-ink: var(--accent-ink, var(--card, var(--surface, #fff)));

  margin: 2.5rem auto;
  max-width: var(--page, 68rem);
  padding: 1.25rem 1.35rem 1rem;
  background: var(--bp-surface);
  border: 1px solid var(--bp-rule);
  border-radius: var(--radius, 10px);
  box-shadow: var(--lift, none);
}
/* Without a cover the row has one child, so the card is narrowed to the text
   rather than left with half of itself empty. */
.book-plug[data-no-cover] { max-width: 46rem; }
.book-kicker {
  margin: 0 0 .85rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bp-muted);
}
.book-plug-inner {
  display: flex;
  gap: 1.35rem;
  align-items: flex-start;
}
.book-cover {
  flex: 0 0 auto;
  width: 200px;
  height: auto;
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--lift-lg, 0 2px 10px rgba(0, 0, 0, .12));
}
.book-detail { min-width: 0; }
.book-title {
  margin: 0 0 .2rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--step-2, 1.44rem);
  line-height: 1.25;
  color: var(--bp-ink);
}
.book-subtitle {
  margin: 0 0 .9rem;
  color: var(--bp-muted);
  font-size: var(--step-0, 1rem);
}
.book-pitch {
  margin: 0 0 .7rem;
  color: var(--bp-ink);
  max-width: var(--measure, 68ch);
}
.book-blurb {
  margin: 0 0 1rem;
  color: var(--bp-ink-soft);
  font-size: .94rem;
  max-width: var(--measure, 68ch);
}
.book-actions { margin: 0; }
.book-buy {
  display: inline-block;
  padding: .55rem 1.05rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--bp-accent);
  color: var(--bp-accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.book-buy:hover,
.book-buy:focus-visible { background: var(--bp-accent-deep); }
.book-alt {
  display: inline-block;
  margin-left: .6rem;
  color: var(--bp-muted);
  font-size: .9rem;
}
.book-disclosure {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--bp-rule);
  color: var(--bp-muted);
  font-size: .82rem;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .book-plug-inner { flex-direction: column; }
  .book-cover { width: 140px; align-self: center; }
  .book-alt { display: block; margin: .6rem 0 0; }
}
/* book plug: end */