/* A walk as a patch of country.
 *
 * The palette is Shepard's rather than the site's: warm rag paper, a
 * brown-black dip-pen line, and washes laid inside it that do not quite keep
 * to the edges. Everything is stroked, nothing is flat colour, because the
 * whole point is that it looks drawn.
 */

/* The palette belongs to the drawing, not to one of its containers: a patch
   and the composed map are the same country at different scales, and both draw
   with these. Defining them on `.tile` alone left the map with no values at
   all, and every fill fell back to black. */
.tile,
.map {
    --paper-lit:   #f6efdc;
    --paper-shade: #e9dfc4;
    --ink:         #4a3f30;
    --ink-soft:    #7a6b55;
    /* These are the autumn values — the stubble and turning greens the patches
       were first drawn in and kept. Each season below shifts only what it
       needs to; nothing else in the stylesheet knows a season exists. */
    --wash-grass:  #b7cb96;
    --wash-wood:   #8aa568;
    --wash-wheat:  #e3cf95;
    --wash-water:  #a9c6d2;
    --wash-roof:   #b96f4a;
    --wash-stone:  #e6dcc4;
    --chalk:       #fbf6e6;
    --track:       #c49a68;
    --track-ink:   #6f4e30;
    --coat-pink:   #e8578f;
    --coat-blue:   #4a6a8f;
    --cape-green:  #5f7a48;

    margin: 0;
    display: inline-block;
    max-width: 100%;
}

/* ---- the time of year ----------------------------------------------------
   The same country in February and in July is not the same colour. Season
   moves the greens and the paper a little either side of autumn; it is a shift
   in the light, not a different set of colours. */
.tile[data-season="spring"],
.map[data-season="spring"] {
    --paper-lit:   #f7f1de;
    --paper-shade: #eae1c6;
    --wash-grass:  #c4dc9d;
    --wash-wood:   #7fa85c;
    --wash-wheat:  #e7ddb2;
    --wash-water:  #aed0dd;
    --track:       #c8a273;
}
.tile[data-season="summer"],
.map[data-season="summer"] {
    --paper-lit:   #f8f0d6;
    --paper-shade: #ebdfbc;
    --wash-grass:  #b2d18b;
    --wash-wood:   #6f9c55;
    --wash-wheat:  #e6cd86;
    --wash-water:  #a5c8d7;
    --track:       #c69b64;
}
/* Winter: the colour goes out of the country and the paper cools with it. */
.tile[data-season="winter"],
.map[data-season="winter"] {
    --paper-lit:   #f4efe3;
    --paper-shade: #e5e0d0;
    --wash-grass:  #b5c2a7;
    --wash-wood:   #85977a;
    --wash-wheat:  #ded7c0;
    --wash-water:  #b0c4cc;
    --track:       #b79a7c;
}

/* And the trees have nothing on them, so their crowns thin right out. */
.tile[data-season="winter"] .ground-mark--crown { opacity: .45; }
.tile[data-season="winter"] .mark__mass { opacity: .6; }

.tile__svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--paper-lit);
}

.tile-paper-lit   { stop-color: var(--paper-lit); }
.tile-paper-shade { stop-color: var(--paper-shade); }

/* ---- the way ------------------------------------------------------------
   Drawn twice: a broad ribbon of trodden earth, then a dashed line over it,
   the way a footpath is marked on a map. The ribbon was chalk white, which
   read as a gap cut through the country rather than as a path over it; brown
   sits on the ground instead of interrupting it, and against the greens it is
   the warmest thing on the patch. */
.tile__way--under {
    fill: none;
    stroke: var(--track);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}
.tile__way--over {
    fill: none;
    stroke: var(--track-ink);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-dasharray: 5 4;
    opacity: .8;
}

/* ---- the country --------------------------------------------------------- */
.mark__line   { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.mark__mass   { fill: var(--wash-wood); stroke: var(--ink); stroke-width: 1; }
.mark__wall   { fill: var(--wash-stone); stroke: var(--ink); stroke-width: 1; }
.mark__roof   { fill: var(--wash-roof); stroke: var(--ink); stroke-width: 1; }
/* A town, in the same materials the elevation graph builds one from. */
.mark__brick  { fill: #9d5744; stroke: var(--ink); stroke-width: 1; }
.mark__slate  { fill: #5c6670; stroke: var(--ink); stroke-width: 1; }
.mark__block  { fill: #9d5744; stroke: var(--ink); stroke-width: 1; }
.mark__lit    { fill: #f0cf86; stroke: none; }
.mark__field  { stroke: none; opacity: .75; }
/* A hedge, not a border: soft, green, and lighter than the way that runs
   past it. */
.mark__hedge  {
    fill: none;
    stroke: var(--wash-wood);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: .8;
}
.mark__water  { fill: none; stroke: var(--wash-water); stroke-width: 2.2; stroke-linecap: round; }
.mark__chalk  { fill: var(--chalk); stroke: var(--ink); stroke-width: .9; }
.tile__hatch  { stroke: var(--wash-wheat); stroke-width: 2.4; }

.mark--grass .mark__line { stroke: var(--wash-wood); stroke-width: 1.2; }
.mark--hill  .mark__line { stroke: var(--ink-soft); }

/* ---- the folk ------------------------------------------------------------
   Small enough to be incidents rather than illustrations: you notice them on
   the second look, which is how the endpapers of these books work. */
.folk__coat { fill: var(--coat-pink); stroke: var(--ink); stroke-width: .8; }
.folk__blue { fill: var(--coat-blue); stroke: var(--ink); stroke-width: .8; }
.folk__cape { fill: var(--cape-green); stroke: var(--ink); stroke-width: .8; }
.folk__limb { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linecap: round; }
.folk__rug  { fill: var(--wash-roof); stroke: var(--ink); stroke-width: .8; opacity: .85; }
.folk__gate { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }

/* ---- furniture ----------------------------------------------------------- */
.tile__needle     { fill: var(--ink); }
.tile__needleTail { fill: none; stroke: var(--ink); stroke-width: .9; }
.tile__line       { stroke: var(--ink); stroke-width: .8; opacity: .5; }
.tile__north {
    fill: var(--ink);
    font-family: var(--font-display, Georgia, serif);
    font-size: 11px;
    font-style: italic;
}

/* A ruled edge inside a torn one: the patch is a scrap of paper. */
.tile__edge {
    stroke: var(--ink);
    stroke-width: 1;
    opacity: .35;
    stroke-dasharray: 1 3;
}

.tile__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-top: .5rem;
    color: var(--ink-soft);
}
.tile__name {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.1rem;
    color: var(--ink);
}
.tile__figures { font-size: .82rem; font-style: italic; }

/* ---- the ground ----------------------------------------------------------
   Drawn, not photographed: each stretch of country is a shape with a line
   round it, filled pale enough that the path, the marks and the figures over
   it stay the darkest things on the patch. The line is the point — it is what
   makes a wood read as a wood rather than as a green area. */
.tile__ground-wash { mix-blend-mode: multiply; }

.ground {
    stroke: var(--wash-edge, rgba(92, 82, 58, .38));
    stroke-width: 1.1;
    stroke-linejoin: round;
}
.ground--wood  { fill: var(--wash-wood);  opacity: .46; }
.ground--grass { fill: var(--wash-grass); opacity: .36; }
.ground--field { fill: var(--wash-wheat); opacity: .34; }
.ground--water { fill: var(--wash-water); opacity: .70; }
.ground--built { fill: var(--wash-stone); opacity: .52; }
.ground--sand  { fill: var(--wash-wheat); opacity: .46; }

/* Water is the one ground with a real edge in the country as well as on the
   page, so it gets a firmer one here. */
.ground--water { stroke: var(--wash-water); stroke-width: 1.8; }

/* The marks scattered over the ground. Kept lighter than the path and the
   figures: they say what the country is, they are not what happened on it. */
.tile__ground-marks { opacity: .5; }
.ground-mark { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.ground-mark--crown { fill: var(--wash-wood); stroke-width: .9; }
.ground-mark--tree  { stroke-width: 1.1; }
.ground-mark--tuft  { stroke: var(--wash-wood); stroke-width: 1.1; }
.ground-mark--ripple { stroke: var(--wash-water); stroke-width: 1.2; }

/* ---- the quilt -----------------------------------------------------------
   The drawings in rows, squared up and casting a shadow onto the page. The
   scraps were once torn along uneven edges, which read as handmade while they
   were tilted; sitting straight in a grid it only read as badly cropped. */
.quilt { margin: 2.5rem 0 3rem; }
.quilt__head { margin-bottom: 1.75rem; }
.quilt__head h2 { margin: 0 0 .3rem; }
.quilt__intro { margin: 0; max-width: 52ch; color: var(--ink-soft, #7a6b55); }
.quilt__tally {
    margin: .4rem 0 0;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-faint, #8b958c);
}

.quilt__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* As many scraps to a row as will fit and still be worth looking at. A
       patch below about this width stops being a drawing and becomes a
       thumbnail: the path reads, but not the gate or who was on it. */
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    /* Room for the shadow and the lift on hover, so a scrap never clips its
       neighbour. */
    gap: 2.25rem 2rem;
}
.quilt__cell { margin: 0; }

.quilt__patch {
    display: block;
    max-width: none;
    text-decoration: none;
    /* The scrap is what the name is measured by: a patch can be any width the
       row gives it, and a name set in points would swamp a small one and
       vanish on a large one. */
    container-type: inline-size;
}

/* The scrap sits square to the page; only its torn edge and its shadow say it
   was laid there rather than printed. */
.quilt__patch .tile__svg {
    transition: transform .25s ease, filter .25s ease;
    filter: drop-shadow(0 6px 14px rgba(60, 48, 30, .22));
}
.quilt__patch:hover .tile__svg,
.quilt__patch:focus-visible .tile__svg {
    /* Picked up off the table for a closer look. */
    transform: scale(1.03);
    filter: drop-shadow(0 12px 26px rgba(60, 48, 30, .34));
}

.quilt__patch .tile { display: block; width: 100%; }

/* A slip of paper laid across the bottom of the scrap: it sits under the
   drawing, as a label should, but laps far enough onto it that the country
   shows through the frosting rather than sitting behind clean paper. */
.quilt__patch .tile__caption {
    display: block;
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 88%;
    margin: -2.6cqw 0 0 4cqw;
    padding: 1.6cqw 2.4cqw;
    text-align: left;
    background: rgba(250, 245, 230, .72);
    backdrop-filter: blur(5px) saturate(1.1);
    -webkit-backdrop-filter: blur(5px) saturate(1.1);
    border: 1px solid rgba(74, 63, 48, .25);
    box-shadow: 0 2px 8px rgba(60, 48, 30, .12);
}
.quilt__patch .tile__name { display: block; font-size: 7cqw; line-height: 1.1; }
.quilt__patch .tile__figures { display: block; margin-top: .4cqw; font-size: 4.2cqw; }

.quilt__empty { color: var(--ink-faint, #8b958c); font-style: italic; }

/* ---- the composed map ----------------------------------------------------
   One drawing rather than a pile of scraps: the ground laid once, the ways
   over it, then the country and the people. It carries the patch's palette,
   since it is the same country drawn at a different scale. */
.map { margin: 0; }

.map__frame {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 88vh;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map__frame.is-dragging { cursor: grabbing; }

.map__paper {
    position: relative;
    width: min(75vw, calc(75vh * var(--map-aspect, 1.4)));
    aspect-ratio: var(--map-aspect, 1.4);
    transform-origin: 0 0;
    will-change: transform;
    box-shadow: 0 8px 30px rgba(60, 48, 30, .18);
}

.map__svg { display: block; width: 100%; height: 100%; }

/* A way that several walks have used is drawn heavier — the map's whole
   argument, that some ground is worn and some was crossed once. */
.way-under {
    fill: none;
    stroke: var(--chalk);
    stroke-width: calc(3.4px + var(--worn, 1) * 2.2px);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.way-over {
    fill: none;
    stroke: var(--ink);
    stroke-width: calc(.7px + var(--worn, 1) * .28px);
    stroke-linecap: round;
    stroke-dasharray: 5 4;
    opacity: calc(.42 + var(--worn, 1) * .12);
}