/* ══════════════════════════════════════════════════════════════
   Home page only: the sheet (real map of Flatøy behind the content).
   Plane scale: flatoy.svg is 2800 x 2000 units at 2.5 m per unit, drawn
   at 1 CSS px per unit, so 400 px = 1 km and the footer scale bar
   (200 px = 500 m) is true. UTM 32N origin of the plane (its top left):
   E 291 500 m, N 6 719 600 m.
   ══════════════════════════════════════════════════════════════ */

/* ── The map plane ── */
.plane-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.plane {
    --mx: 66vw;   /* where Austegarden sits on screen in the still composition */
    --my: 98px;
    position: absolute; left: 0; top: 0; width: 2800px; height: 2000px;
    transform: translate3d(clamp(calc(100vw - 2800px), calc(var(--mx) - 1511px), 0px), clamp(calc(100vh - 2000px), calc(var(--my) - 1041px), 0px), 0);
    will-change: transform;
}
.plane img { opacity: .62; display: block; width: 2800px; height: 2000px; max-width: none; }
@media (max-width: 700px) { .plane { --mx: 60vw; --my: 94px; } }
/* wider than the sheet (2800 px): sheet.js pins the plane to the right edge, so fade its left edge into the paper instead of showing a hard cut */
@media (min-width: 2801px) { .plane { -webkit-mask-image: linear-gradient(90deg, transparent, #000 240px); mask-image: linear-gradient(90deg, transparent, #000 240px); } }

/* place names, registered to the map: left/top are plane pixels */
.pl { position: absolute; margin: 0; white-space: nowrap; font: 500 11px/1 var(--font-body); letter-spacing: .05em; color: var(--ink); text-shadow: var(--halo); transform: translate(8px, -50%); }
.pl.l { transform: translate(calc(-100% - 8px), -50%); text-align: right; }
.pl.c { transform: translate(-50%, -50%); }
.pl.w { font: italic 400 14px/1 var(--font-display); letter-spacing: .02em; color: var(--water); }
.pl.i { font: 400 15px/1 var(--font-display); letter-spacing: .06em; color: var(--ink); }
.pl.d::before { content: ""; position: absolute; left: -8px; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -1px; border-radius: 50%; background: var(--can); }
.pl.l.d::before { left: auto; right: -8px; margin: -2px -1px 0 0; }
.pin { position: absolute; margin: 0; }
.pin svg { position: absolute; left: -9px; top: -11.8px; width: 18px; height: 18px; fill: var(--red); filter: drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 3px var(--paper)); }
.pin span { position: absolute; left: 14px; top: -14px; white-space: nowrap; font: 600 13px/1.1 var(--font-body); letter-spacing: .01em; color: var(--ink); text-shadow: var(--halo); }
.pin small { display: block; margin-top: 3px; font: 400 10px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink-2); }
@media (max-width: 700px) { .pl.lo { display: none; } }

/* kilometre numbers in the left margin: UTM 32N northings of the visible window, set by sheet.js */
.km { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 56px; z-index: 1; pointer-events: none; overflow: hidden; }
.km i { position: absolute; left: 10px; top: -5px; font: 400 10px/1 var(--font-mono); font-style: normal; color: var(--ink); background: color-mix(in srgb, var(--paper) 84%, transparent); box-shadow: 0 0 3px 3px color-mix(in srgb, var(--paper) 84%, transparent); font-variant-numeric: tabular-nums; visibility: hidden; }
.km i::after { content: ""; position: absolute; left: 33px; top: 5px; width: 8px; height: 1px; background: var(--ink); opacity: .7; }
@media (min-width: 1240px) { .km { display: block; } }

main, .sheet-bar, .site-foot { position: relative; z-index: 2; }
.sheet-bar .coords { letter-spacing: .08em; }

/* ── Type used on the home page ── */
.home h1 { font: 400 clamp(3rem, 8.4vw, 6.2rem)/.92 var(--font-display); letter-spacing: -.022em; margin: .28em 0 .14em; text-wrap: balance; }
.home h2 { font: 400 clamp(2rem, 4.6vw, 3.1rem)/1 var(--font-display); letter-spacing: -.015em; margin: .3em 0 0; }
.home h3 { margin: 0; }
.sec-head { text-shadow: var(--halo); }
/* text that sits straight on the map gets a soft paper plate, so contrast holds over the busiest ground */
.sec-head .kicker, .sec-head .note, .links a, .sec-head .go {
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    box-shadow: 0 0 5px 5px color-mix(in srgb, var(--paper) 84%, transparent);
    width: fit-content;
}
.gaz-text .sec-head .kicker { background: none; box-shadow: none; }

/* ── Hero: cartouche and signposts ── */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.3fr); gap: clamp(28px, 5vw, 88px); align-items: end; padding-block: clamp(96px, 11vw, 150px) clamp(40px, 6vw, 84px); }
.cartouche { background: var(--panel); border: 1px solid var(--ink); padding: 5px; }
.cartouche > div { border: 1px solid var(--ink); padding: clamp(20px, 3.2vw, 40px) clamp(18px, 3.4vw, 44px) clamp(18px, 2.6vw, 30px); }
.hi { font: italic 400 clamp(1.4rem, 2.6vw, 1.85rem)/1.2 var(--font-display); color: var(--olive-d); margin: .5rem 0 1.1rem; }
.cartouche .lede { max-width: 34em; font-size: 1.0625rem; color: var(--ink); margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: .9rem 2rem; margin: 1.7rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.meta > div { white-space: nowrap; }
.meta dt { font: 400 .625rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.meta dd { font: 400 .75rem/1.4 var(--font-mono); color: var(--ink); margin: .15rem 0 0; }
.signs { background: var(--cell); border: 1px solid var(--ink); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px) clamp(8px, 1vw, 12px); }
.signs h2 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: .1em; }
.signs ul { margin-top: 1rem; border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); align-items: stretch; } }
@media (max-width: 480px) { .home h1 { font-size: clamp(2.5rem, 12.2vw, 3.1rem); } }
@media (max-width: 560px) {
    .meta { display: block; }
    .meta div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--hair); }
    .meta dd { text-align: right; margin: 0; }
}

/* ── Sections ── */
.sec { padding-block: clamp(34px, 5.4vw, 68px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(20px, 2.6vw, 32px); }
.sec-head .note { max-width: 38em; color: var(--ink-2); margin: 0 0 1rem; }
.go { display: inline-block; font: 400 .75rem/1 var(--font-mono); letter-spacing: .06em; padding: .5rem 0; }
.sec-head .search { margin-top: .2rem; }
@media (max-width: 1100px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.4rem clamp(24px, 5vw, 80px); align-items: start; }
.split .sec-head { display: block; margin: 0; }
.split .sec-head .note { margin-top: 1rem; }
.links { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin-top: .9rem; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ── Family and place ── */
.gaz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.6rem clamp(24px, 5vw, 80px); align-items: start; }
.gaz-text { background: var(--cell); border: 1px solid var(--line); padding: clamp(18px, 2.4vw, 30px); }
.gaz-text .sec-head { display: block; margin: 0 0 1.1rem; text-shadow: none; }
.gaz-note { font: 400 1.0625rem/1.55 var(--font-body); color: var(--ink); max-width: 30em; margin: 0; }
.gaz-note b { font: 400 1.5rem/1 var(--font-display); color: var(--ink); margin-right: .2rem; }
.gaz-note i { font: italic 400 1rem var(--font-display); color: var(--mute); margin-right: .35rem; }
.gaz-note + .gaz-note { margin-top: .8rem; }
.gaz-list { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--ink); }
.gaz-list li { margin: 0; border-bottom: 1px solid var(--hair); position: relative; }
.gaz-list li:last-child { border-bottom: 0; }
.gaz-list li::before { content: ""; position: absolute; left: 2px; top: 1.3rem; width: 8px; height: 10px; background: var(--red); -webkit-mask: var(--T) center/contain no-repeat; mask: var(--T) center/contain no-repeat; }
.gaz-list li.trig::before { width: 16px; height: 16px; top: 1.15rem; left: -2px; -webkit-mask-image: var(--tri); mask-image: var(--tri); }
.gaz-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; align-items: baseline; padding: .9rem 0 .9rem 1.6rem; text-decoration: none; color: var(--ink); }
.gaz-list .nm { font-weight: 600; font-size: 1.0625rem; }
.gaz-list a:hover .nm { color: var(--red); text-decoration: underline; text-underline-offset: .2em; }
.gaz-list .sub { font: 400 .75rem/1.4 var(--font-mono); color: var(--mute); }
@media (max-width: 900px) { .gaz { grid-template-columns: minmax(0, 1fr); } }

.frame { margin: 0; background: var(--panel); border: 1px solid var(--ink); padding: 5px; }
.frame > div { position: relative; border: 1px solid var(--ink); overflow: hidden; background: var(--paper); aspect-ratio: 1; }
.frame img { display: block; width: 100%; height: 100%; max-width: none; }
.frame .pl { font-size: 10px; text-shadow: var(--halo), 0 0 2px var(--paper), 0 0 2px var(--paper), 0 0 3px var(--paper); }
.frame .pl.w { font-size: 12px; }
.frame .pin svg { width: 16px; height: 16px; left: -8px; top: -10.5px; }
.frame .pin span { font-size: 12px; left: 12px; top: -12px; }
.frame .sbar { position: absolute; left: 3.5%; bottom: 3.5%; width: calc(100% / 6); height: 5px; border: 1px solid var(--ink); border-top: 0; }
.frame .sbar i { position: absolute; left: 0; bottom: 100%; padding: 1px 4px 0 0; font: 400 10px/1 var(--font-mono); font-style: normal; color: var(--ink); text-shadow: var(--halo); white-space: nowrap; }
.frame figcaption { margin: 0; padding: .6rem 4px .3rem; font: 400 .6875rem/1.55 var(--font-mono); color: var(--ink-2); letter-spacing: .01em; }

/* ── Footer extras ── */
.site-foot .colo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1.4rem; border-top: 1px solid var(--hair); padding-top: .8rem; }
.home .site-foot { margin-top: clamp(34px, 5vw, 60px); }

/* Below the first screen: laid out when it nears the viewport, which roughly halves the cost of the first layout.
   contain-intrinsic-size is the content height measured at a narrow, a middle and a wide viewport, less the padding
   (the browser remembers the real height once a section has been rendered). */
#tools, #writing, #place, .home .site-foot { content-visibility: auto; }
#tools { contain-intrinsic-size: auto calc(2500px - 2 * clamp(34px, 5.4vw, 68px)); }
#writing { contain-intrinsic-size: auto calc(940px - 2 * clamp(34px, 5.4vw, 68px)); }
#place { contain-intrinsic-size: auto calc(1031px - 2 * clamp(34px, 5.4vw, 68px)); }
.home .site-foot { contain-intrinsic-size: auto 270px; }
@media (min-width: 700px) {
    #tools { contain-intrinsic-size: auto calc(1550px - 2 * clamp(34px, 5.4vw, 68px)); }
    #writing { contain-intrinsic-size: auto calc(740px - 2 * clamp(34px, 5.4vw, 68px)); }
    #place { contain-intrinsic-size: auto calc(1350px - 2 * clamp(34px, 5.4vw, 68px)); }
    .home .site-foot { contain-intrinsic-size: auto 184px; }
}
@media (min-width: 1100px) {
    #tools { contain-intrinsic-size: auto calc(1300px - 2 * clamp(34px, 5.4vw, 68px)); }
    #writing { contain-intrinsic-size: auto calc(720px - 2 * clamp(34px, 5.4vw, 68px)); }
    #place { contain-intrinsic-size: auto calc(760px - 2 * clamp(34px, 5.4vw, 68px)); }
}