/* The walk drawing.
 *
 * Every rule the landscape SVG needs, kept apart from the rest of the site so
 * the same drawing can be rendered inside the admin — where site.css is not
 * loaded — without pulling the public site's layout and typography in with it.
 *
 * Without these rules the SVG paths fall back to fill:black and the whole
 * drawing comes out as a black rectangle.
 */

/* ---- The landscape ------------------------------------------------------
   The walk drawn as country: sky, hills receding into haze, and ground that
   turns into woodland, water or village wherever the walk passes through one.
   ------------------------------------------------------------------------- */
.landscape { margin: 0 0 2.5rem; }
.landscape__svg {
    width: 100%;
    height: auto;   /* the drawing keeps its own proportions */
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    touch-action: pan-y;
}

/* Sky */
.sky-high { stop-color: #9ec9e0; }
.sky-low  { stop-color: #e6f1f3; }
.landscape__sun { fill: #fdf3d8; opacity: .95; }
.landscape__clouds path { fill: #ffffff; }
.landscape__birds path  { fill: none; stroke: var(--ink-soft); stroke-width: 1.1; stroke-linecap: round; opacity: .5; }

/* The sea, lying beyond the land */
.sea__water   { fill: #5f97b4; }
.sea__swell   { fill: #7cb0c8; stroke: #a8cddd; stroke-width: .8; stroke-linejoin: round; opacity: .9; }
.sea__caps    { fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-linecap: round; opacity: .9; }
.sea__foam    { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.sea__glitter { fill: none; stroke: #fdf6df; stroke-width: 1.5; stroke-linecap: round; opacity: .5; }
.sea__line    { fill: none; stroke: #35708c; stroke-width: 1.2; opacity: .8; }

/* A coast at the edge of the picture */
.coast__sea     { fill: #6aa6c2; }
.coast__swell   { fill: none; stroke: #ffffff; stroke-width: 1; stroke-linecap: round; opacity: .5; }
.coast__glitter { fill: none; stroke: #fffdf2; stroke-width: 1.5; stroke-linecap: round; opacity: .6; }
.coast__line    { fill: none; stroke: #3d7490; stroke-width: 1.1; opacity: .75; }
/* Sea onto sand, sand into turf — no hard edge between water and grass. */
.coast__sand    { fill: #e3d3ac; }
.coast__wet     { fill: #c8b78e; opacity: .75; }
.coast__shingle { fill: #b7a683; opacity: .7; }

/* Chalk cliffs */
.cliff__face   { fill: #f2ede0; stroke: #b9ac93; stroke-width: .8; }
.cliff__shadow { fill: #cbbfa6; opacity: .5; stroke: none; }
.cliff__strie  { fill: none; stroke: #bdb096; stroke-width: .6; stroke-linecap: round; opacity: .7; }
.cliff__scree  { fill: #ded4bd; stroke: none; }
.cliff__surf   { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-linecap: round; opacity: .85; }

/* Landmarks — the things you navigate by */
.landmark__struct { fill: #f4efe2; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.landmark__detail { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.landmark__light  { fill: #f6d68a; stroke: var(--ink); stroke-width: .8; }
.landmark--lighthouse .landmark__detail { fill: #b5443a; stroke: none; }
.landmark--windmill  .landmark__struct  { fill: #e6dcc6; }
.landmark--monument  .landmark__struct  { fill: #ddd6c6; }
.landmark--church    .landmark__struct  { fill: #ece5d5; }
.landmark--viewpoint .landmark__struct  { fill: none; stroke: var(--lamp); stroke-width: 1.2; }

/* Beaches */
.beach__sand    { fill: #e4d5b0; }
.beach__pebbles { fill: #c4b592; opacity: .8; }

/* Hills behind, paler with distance */
.ridge          { stroke: none; }
.ridge--far     { fill: #b9cfc0; opacity: .75; }
.ridge--mid     { fill: #9dbf9a; opacity: .85; }

/* The turf of the walk itself */
.turf-high { stop-color: #b6d49a; }
.turf-low  { stop-color: #7fa96d; }
.landscape__horizon {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}
/* Where the walk runs beside water, the outline becomes the waterline. */
.landscape__horizon.is-water { stroke: #2e6f92; opacity: 1; stroke-width: 1.8; }

/* Woodland — individual trees, brown trunks, crowns in three greens */
.tree__trunk { fill: #6b4a2f; stroke: #5a3d26; stroke-width: .4; stroke-linecap: round; }
.tree__shade { fill: #4f351f; opacity: .55; stroke: none; }
.tree__dark  { fill: #3d6b40; }
.tree__mid   { fill: #558a49; }
.tree__light { fill: #86b45c; }

/* The row behind sits back in the haze. */
.wood__back  { opacity: .72; }
.wood__back .tree__dark  { fill: #45704a; }
.wood__back .tree__mid   { fill: #5d8c56; }
.wood__back .tree__light { fill: #8ab269; }

/* Rivers.
   Each river is drawn as an archetype — chalk stream, brook, weald river,
   estuary or cut — and --tone (0 clear, 1 peaty) shifts its blues, so no two
   read alike. */
.water__banks   { fill: #a08c65; opacity: .5; }
.water__body    { fill: color-mix(in srgb, #74b6d1, #47788f calc(var(--tone, .5) * 100%)); }
.water__deep    { fill: color-mix(in srgb, #43829f, #2b5570 calc(var(--tone, .5) * 100%)); opacity: .8; }
.water__bar     { fill: #b6a684; opacity: .75; }
.water__shallow { fill: none; stroke: #c3e2ee; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.water__glint   { fill: none; stroke: #f0f9fc; stroke-width: 1.3; stroke-linecap: round; opacity: .6; }
.water__rushes  { fill: none; stroke: #6d8347; stroke-width: .85; stroke-linecap: round; opacity: .9; }

/* Chalk streams run clear over gravel; estuaries are silty and flat. */
.water--chalk   .water__glint   { opacity: .8; }
.water--chalk   .water__shallow { opacity: .75; }
.water--estuary .water__glint   { opacity: .35; }
.water--estuary .water__deep    { opacity: .55; }
.water--cut     .water__shallow { opacity: .25; }

/* Villages and towns — flint and brick walls, clay tile and slate roofs */
.settlement path { stroke-linejoin: round; }
.bldg__foot    { fill: #4d7245; opacity: .3; stroke: none; }
.bldg__walls   { fill: #e8ddc8; stroke: var(--ink); stroke-width: .85; stroke-linejoin: round; }
.bldg__shade   { fill: #b9a98d; opacity: .45; stroke: none; }
.bldg__courses { fill: #b3a184; stroke: #b3a184; stroke-width: .35; opacity: .75; stroke-linecap: round; }
.bldg__chimney { fill: #c9a389; stroke: var(--ink); stroke-width: .8; }
/* Town: red brick and grey slate, against the village's flint and clay tile.
   A town on the skyline should read as a different kind of place, not as a
   longer village. */
.bldg__brick      { fill: #9d5744; stroke: var(--ink); stroke-width: .85; stroke-linejoin: round; }
.bldg__brickshade { fill: #6f3b2d; opacity: .5; stroke: none; }
.bldg__mortar     { fill: none; stroke: #d9c3b0; stroke-width: .3; opacity: .5; stroke-linecap: round; }
/* The parapet and lift housing of a block of flats: concrete, not slate. */
.bldg__parapet    { fill: #8d8b83; stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.bldg__tile    { fill: #b5613c; stroke: var(--ink); stroke-width: .9; }
.bldg__slate   { fill: #5c6670; stroke: var(--ink); stroke-width: .9; }
.bldg__rcourse { fill: none; stroke: rgba(20,24,26,.28); stroke-width: .45; }
.bldg__door    { fill: #4a3b2f; stroke: none; }
.bldg__window  { fill: #43535c; stroke: none; }
.bldg__glow    { fill: #f6d68a; stroke: none; }
/* Turf drawn in front of the buildings, so they sit in the hill. */
.bldg__apron   { stroke: none; }   /* filled by the turf gradient inline */

/* Crossings: roads, old railways, signposts */
.thing path { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ink-wood  path { stroke: var(--wood); }
.ink-built path { stroke: var(--ink-soft); }
.ink-water path { stroke: var(--sea); }
.ink-path  path { stroke: var(--lamp); }

.landscape__cursor { stroke: #ffffff; stroke-width: 1.5; opacity: 0; }
.landscape__cursor.is-visible { opacity: .85; }
.landscape__pin { fill: var(--berry); stroke: #fff; stroke-width: 1.5; opacity: 0; }
.landscape__pin.is-visible { opacity: 1; }

.landscape__caption { display: flex; justify-content: flex-end; min-height: 1.5em; margin-top: .4rem; }
.landscape__readout { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; font-style: italic; }

/* ---- Season -------------------------------------------------------------
   The same hill in February and in July should not look the same. Season
   shifts the light, the ground, and what the trees are wearing. The defaults
   are high summer; each season below overrides only what it changes.
   ------------------------------------------------------------------------- */
.landscape, .card-landscape, [data-season] {
    --sky-hi: #9ec9e0; --sky-lo: #e6f1f3; --sun: #fdf3d8;
    --turf-hi: #b6d49a; --turf-lo: #7fa96d;
    --far: #b9cfc0; --mid: #9dbf9a;
    --leaf-dark: #3d6b40; --leaf-mid: #558a49; --leaf-light: #86b45c;
    --rock: #9a978d; --snow: #f4f4ef;
}

[data-season="spring"] {
    --sky-hi: #a9d2e8; --sky-lo: #eaf4f4; --sun: #fdf6de;
    --turf-hi: #bfdc9a; --turf-lo: #7fb06a;
    --far: #c1d6c4; --mid: #a3c79c;
    --leaf-dark: #4a7d43; --leaf-mid: #6ca34f; --leaf-light: #a8cc66;
}
[data-season="autumn"] {
    --sky-hi: #a8c3d4; --sky-lo: #f0ead9; --sun: #fbeac2;
    --turf-hi: #c3c485; --turf-lo: #8e9a60;
    --far: #c3c0a6; --mid: #a9a87f;
    --leaf-dark: #8a5a22; --leaf-mid: #bf862f; --leaf-light: #dcae4b;
}
[data-season="winter"] {
    --sky-hi: #b6c6d2; --sky-lo: #eef1f2; --sun: #f6f2e4;
    --turf-hi: #a9bb96; --turf-lo: #78906c;
    --far: #c2cbc6; --mid: #a7b3a8;
    --leaf-dark: #6a5a49; --leaf-mid: #7d6c58; --leaf-light: #94836c;
    --rock: #a3a29c; --snow: #fbfbf9;
}

/* Everything reads from those variables, so a season is four lines to retune. */
.sky-high   { stop-color: var(--sky-hi); }
.sky-low    { stop-color: var(--sky-lo); }
.turf-high  { stop-color: var(--turf-hi); }
.turf-low   { stop-color: var(--turf-lo); }
.band-rock  { stop-color: var(--rock); }
.band-snow  { stop-color: var(--snow); }
.landscape__sun { fill: var(--sun); }
.ridge--far { fill: var(--far); }
.ridge--mid { fill: var(--mid); }
.tree__dark  { fill: var(--leaf-dark); }
.tree__mid   { fill: var(--leaf-mid); }
.tree__light { fill: var(--leaf-light); }

/* Winter: the broadleaves are bare, so the crowns thin right out. */
.landscape[data-season="winter"] .tree__dark  { opacity: .5; }
.landscape[data-season="winter"] .tree__mid   { opacity: .38; }
.landscape[data-season="winter"] .tree__light { opacity: .28; }

/* Rock and snow cap the tops, following the ridge. */
.cap-rock { fill: var(--rock); opacity: .85; }
.cap-snow { fill: var(--snow); }

/* ---- Ground cover -------------------------------------------------------
   What the land is doing where the walk crosses it: worked, grazed, or left
   to scrub. Drawn on the turf, under everything that stands on it.
   ------------------------------------------------------------------------- */
.cover { fill: none; stroke-linecap: round; stroke-width: .9; }
.cover--farmland { stroke: #9d8b52; opacity: .7; }
.cover--meadow   { stroke: #6f9455; opacity: .65; }
.cover--downland { stroke: #7f9a63; opacity: .6; }
.cover--scrub    { fill: #6f8a55; stroke: #4f6a3c; stroke-width: .7; opacity: .8; }
.cover--heath    { fill: #8a7f5c; stroke: #6b6144; stroke-width: .7; opacity: .78; }
.cover--vineyard { stroke: #7a6a4a; opacity: .8; }
.cover--orchard  { stroke: #5d7f43; opacity: .8; }

/* ---- Still water: tarns, reservoirs, mill ponds ---- */
.lake__water   { fill: #6fa8c4; }
.lake__surface { fill: none; stroke: #cfe7f0; stroke-width: 1.1; opacity: .8; }
.lake__sheen   { fill: none; stroke: #eaf6fb; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.lake__reeds   { fill: none; stroke: #6d8347; stroke-width: .85; stroke-linecap: round; opacity: .9; }

/* ---- Marsh: standing water and reeds ---- */
.marsh__pools { fill: #86a9b4; opacity: .7; }
.marsh__reeds { fill: none; stroke: #6f8446; stroke-width: .85; stroke-linecap: round; opacity: .85; }

/* ---- Extra landmarks ---- */
.landmark--peak .landmark__struct       { fill: #a9a49a; stroke: var(--ink); stroke-width: .7; }
.landmark--ruin .landmark__struct       { fill: #ded7c6; stroke: var(--ink); stroke-width: .9; }
.landmark--ruin .landmark__detail       { fill: #8d8674; stroke: none; }
.landmark--watertower .landmark__struct { fill: #b9b5a8; }
.landmark--watertower .landmark__detail { stroke: var(--ink); stroke-width: 1; fill: none; }

/* ---- Castles ------------------------------------------------------------
   Storybook rather than survey: a motte cut round with a moat, pennants
   flying from the pointed towers.
   ------------------------------------------------------------------------- */
.bldg__motte   { fill: #8fae74; stroke: none; }
.bldg__moat    { fill: #6fa8c4; opacity: .9; stroke: none; }
.bldg__pole    { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linecap: round; }
.bldg__pennant { fill: #a8443c; stroke: var(--ink); stroke-width: .5; stroke-linejoin: round; }

/* ---- Roads and railways -------------------------------------------------
   Drawn like the rivers: a ribbon from the foot of the picture up to the
   crossing. A lane wanders, a railway barely bends — track cannot turn hard.
   ------------------------------------------------------------------------- */
.way__verge    { fill: #8fa878; opacity: .55; }
.way__edges    { fill: none; stroke: rgba(43,51,48,.35); stroke-width: .8; }
.way--road .way__surface  { fill: #9a958e; }
.way--road .way__markings { fill: none; stroke: #f4f1e6; stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
.way--rail .way__surface  { fill: #a99e88; }
.way--rail .way__sleepers { fill: none; stroke: #6b5b45; stroke-width: 1.4; stroke-linecap: butt; opacity: .9; }
.way--rail .way__rails    { fill: none; stroke: #55606a; stroke-width: 1.1; }


/* ---- Meadow wildflowers --------------------------------------------------
   Chalk downland: oxeye daisies, buttercups and scabious. Filled heads rather
   than strokes, so they read as flowers among the grass rather than more
   blades of it. */
.cover--flower-white  { fill: #fbf7ec; stroke: #cfc7ae; stroke-width: .25; opacity: .95; }
.cover--flower-yellow { fill: #f0d264; stroke: #c9a63f; stroke-width: .25; opacity: .95; }
.cover--flower-mauve  { fill: #b49bc8; stroke: #8f76a5; stroke-width: .25; opacity: .9; }

/* ---- Hill figures --------------------------------------------------------
   Cut through the turf to the chalk, so drawn as bare chalk lines on the
   green rather than a filled silhouette. */
.landmark--hillfigure .landmark__struct,
.landmark--hillfigure .landmark__detail,
.landmark--hillfigure .landmark__light {
    fill: none;
    stroke: #f4f0e2;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .95;
}
.landmark--hillfigure .landmark__detail { stroke-width: 2; }
.landmark--hillfigure .landmark__light  { stroke-width: 1.8; }

/* ---- Hillside form -------------------------------------------------------
   A band under the skyline that deepens with the slope, and a hair of light
   along the top of it. Both sit on the turf, under everything that stands on
   the ground. */
.landscape__shade { fill: #3f6b40; opacity: .20; stroke: none; }
.landscape__sheen { fill: #e4f2c9; opacity: .30; stroke: none; }

/* ---- Every year, drawn ---------------------------------------------------
   Each year's walks stitched into one horizon and stacked, widest year first
   in length rather than order — so the shape of a decade is legible at a
   glance before a single figure is read. */
.years { margin: 3rem 0 4rem; }
.years__head { margin-bottom: 1.25rem; }
.years__head h2 { margin: 0 0 .3rem; }
.years__intro { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: var(--step--1); }

.years__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.years__year { display: grid; gap: .25rem; }

.years__label {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: var(--step--1);
}
.years__number {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1;
    min-width: 3.6rem;
}
.years__figures { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* The drawing keeps the frame the walk cards use, so a year reads as one more
   piece of country rather than a chart. */
.years__drawing {
    border: 1px solid var(--frame);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 12rem;
    transition: width .3s ease;
}
.years__drawing .card-landscape,
.years__drawing .landscape {
    display: block;
    width: 100%;
    /* The card is drawn without preserving its aspect, so a fixed band height
       lets the land fill it instead of sitting in a strip along the bottom. */
    height: 4.5rem;
    margin: 0;
}

@media (max-width: 40rem) {
    .years__drawing { width: 100% !important; }
    .years__label { flex-wrap: wrap; }
}