/* Field Archaeology, the website. White, black type, one gold mark. */

@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: block; src: url('/fonts/cinzel-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/eb-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
/* Latin Extended, from the same Fontsource release (5.2.8), for names such as
   Zakšek, Oštir and Kokalj. A browser fetches it only for a page that has
   such a letter, and the faces above answer for everything else. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #111111;
  --muted: #555555;
  --faint: #8a8a8a;
  --line: #e6e6e6;
  --gold: #C5832B;
  --bg: #ffffff;
  --serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --roman: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
/* A picture with a WebP copy is wrapped in <picture>; the wrapper takes no
   box of its own, so the picture is laid out exactly as before. */
picture { display: contents; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* The name, wherever it is set: the logo in the bar, the opening and the
   footer. Roman capitals, after the inscription on Trajan's Column. */
.brand {
  display: inline-flex; align-items: center; gap: .32em; white-space: nowrap;
  font-family: var(--roman); font-weight: 400; line-height: 1; letter-spacing: .06em;
  color: var(--ink); text-decoration: none;
}
.brand .mark { width: .9em; height: .9em; flex: none; transform: translateY(-.04em); }

/* ── The opening ────────────────────────────────────────────────────────────
   The name is there from the start, barely, like an inscription in low
   light. A fine line draws beneath it from the left, and the light at its tip
   brings the letters up to full black as it passes, while they settle from a
   wider spacing into place. Line, light and letters run on one clock. The
   light then draws the line away to the right, and the name glides into the
   top left as the logo while the excavation comes up behind.
   js/site.js starts it once the Roman face has loaded (intro-go) and moves it
   through stage-word, stage-fly and landed. */
:root { --sweep: 2.2s; --sweep-ease: cubic-bezier(.45, 0, .25, 1); --sweep-delay: .3s; }
.opening { display: none; }
html.play-intro .opening {
  display: block; position: fixed; inset: 0; z-index: 60; background: #fff; pointer-events: none; overflow: hidden;
  transition: background-color 1.5s cubic-bezier(.4, 0, .2, 1);
  /* If the script never runs, the page still appears. */
  animation: gone 0s linear 9s forwards;
}
html.play-intro.stage-fly .opening { background-color: rgba(255, 255, 255, 0); }
html.play-intro.landed .opening { display: none; }

.opening-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, .78) 14%, rgba(17, 17, 17, .78) 100%);
  transform: scaleX(0); transform-origin: left center;
}
.opening-ghost, .opening-reveal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
/* The name in low light, before the line reaches it. */
.opening-ghost { opacity: 0; transition: opacity 1.2s ease .1s; }
html.play-intro.intro-go .opening-ghost { opacity: .08; }
html.play-intro.stage-word .opening-ghost { opacity: 0; transition: opacity .6s ease; }
/* Shown where the light has passed, with a wide soft edge, so each letter
   comes up rather than being cut in. */
.opening-reveal {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46.5%, transparent 53.5%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 46.5%, transparent 53.5%, transparent 100%);
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
/* The light: a slim warm flare along the line, not a lamp. */
.opening-tip {
  position: absolute; top: 50%; left: 0; width: 240px; height: 30px; margin: -15px 0 0 -120px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 232, 196, .95) 0%, rgba(214, 160, 82, .28) 30%, rgba(197, 131, 43, 0) 70%);
  opacity: 0;
}
.opening-tip::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #fffaf0; box-shadow: 0 0 10px 3px rgba(255, 220, 160, .9);
}
html.play-intro.intro-go .opening-line { animation: line var(--sweep) var(--sweep-ease) var(--sweep-delay) forwards; }
html.play-intro.intro-go .opening-reveal { animation: reveal var(--sweep) var(--sweep-ease) var(--sweep-delay) forwards; }
html.play-intro.intro-go .opening-tip { animation: tip var(--sweep) var(--sweep-ease) var(--sweep-delay) forwards; }
/* Then the line is drawn away to the right, after the light. */
html.play-intro.stage-word .opening-line { transform-origin: right center; animation: retract .95s cubic-bezier(.55, 0, .3, 1) forwards; }

/* The name stands just above the line, which runs beneath it like a horizon,
   and its letters close up from a wider spacing as they are revealed. */
.brand-fly, .brand-ghost { font-size: clamp(22px, 4.8vw, 62px); margin-bottom: 1.3em; letter-spacing: .16em; }
html.play-intro.intro-go .brand-fly, html.play-intro.intro-go .brand-ghost {
  letter-spacing: .06em; transition: letter-spacing 2.6s cubic-bezier(.2, .6, .2, 1) .2s;
}
@keyframes line { to { transform: scaleX(1); } }
@keyframes retract { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes reveal { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes tip { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes gone { to { visibility: hidden; } }

/* ── The bar along the top: black text on white ─────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-mark { font-size: 19px; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(20px, 2.8vw, 40px); }
.menu a { text-decoration: none; font: 400 15px/1 var(--sans); color: var(--ink); padding: 8px 0; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu .menu-login { margin-left: clamp(0px, 1vw, 12px); padding-left: clamp(20px, 2.8vw, 40px); border-left: 1px solid var(--line); }
.menu-button { display: none; background: none; border: 0; font: 400 15px/1 var(--sans); color: var(--ink); padding: 12px 0; cursor: pointer; }

/* ── The home screen: the excavation, greyed and softened, under the words ─ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-art { position: absolute; inset: 0; transition: opacity 1.2s ease; }
.hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: grayscale(1) blur(1.2px); opacity: .9; transform: scale(1.03);
  transition: filter 1.8s ease, transform 2.2s var(--ease);
}
/* The veil that keeps the words clear, and below it the photograph easing
   out into the white page, so it never meets the views below edge to edge. */
.hero-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .07) 70%, rgba(255, 255, 255, .26) 76%, rgba(255, 255, 255, .5) 82%, rgba(255, 255, 255, .74) 88%, rgba(255, 255, 255, .93) 94%, #fff 100%),
    radial-gradient(ellipse 62% 58% at 50% 50%, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .56) 50%, rgba(255, 255, 255, .26) 100%);
}
.hero-text { position: relative; max-width: 860px; padding: calc(var(--nav-h) + 40px) var(--gutter) 84px; }
.eyebrow { margin: 0 0 24px; font: 500 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #5f5f5f; }
.hero h1 { margin: 0; font: 400 clamp(44px, 6vw, 92px)/1.03 var(--serif); letter-spacing: -.01em; }
.lede { margin: 26px auto 0; max-width: 32em; color: #3d3d3d; font-size: clamp(16px, 1.35vw, 18.5px); }
.actions { margin: 38px 0 0; display: flex; gap: 30px; align-items: center; justify-content: center; flex-wrap: wrap; }

.framed {
  display: inline-block; text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .6);
  border: 1px solid var(--ink); padding: 14px 24px; font: 500 15px/1 var(--sans); letter-spacing: .01em;
  transition: background-color .2s ease, color .2s ease;
}
.framed:hover { background: var(--ink); color: #fff; }
.plain { text-decoration: none; font: 500 15px/1 var(--sans); border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

/* While the opening plays, the bar's name and links and the home screen's
   words wait; they arrive when the name lands. */
html.play-intro:not(.landed) .nav-mark { opacity: 0; }
html.play-intro .nav nav, html.play-intro .hero-text > * { transition: opacity 1s ease, transform 1s var(--ease); }
html.play-intro:not(.landed) .nav nav { opacity: 0; }
html.play-intro:not(.landed) .hero-text > * { opacity: 0; transform: translateY(14px); }
html.play-intro .hero-text > :nth-child(2) { transition-delay: .1s; }
html.play-intro .hero-text > :nth-child(3) { transition-delay: .22s; }
html.play-intro .hero-text > :nth-child(4) { transition-delay: .34s; }
html.play-intro:not(.stage-fly) .hero-art { opacity: 0; }
html.play-intro:not(.stage-fly) .hero-art img { filter: grayscale(1) blur(16px); transform: scale(1.14); }

/* ── Plates: the LiDAR images, full width ───────────────────────────────── */
.plate { margin: 0; }
.plate img { width: 100%; height: clamp(260px, 50vw, 680px); object-fit: cover; filter: grayscale(1) contrast(1.04); }
.plate figcaption { padding: 14px var(--gutter) 0; font-size: 13px; color: var(--faint); text-align: center; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { max-width: 1180px; margin: 0 auto; padding: clamp(84px, 12vw, 150px) var(--gutter); }
.section.rule { border-top: 1px solid var(--line); }
.section .intro { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); }
#about .intro { margin-bottom: 0; }
h2 { margin: 0 0 22px; font: 400 clamp(32px, 4.2vw, 50px)/1.12 var(--serif); letter-spacing: -.003em; }
.section .intro p, .contact p { margin: 0; font-size: clamp(16.5px, 1.5vw, 19px); color: #333; }
.section .intro a { text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(17, 17, 17, .35); }
.section .intro a:hover { text-decoration-color: currentColor; }
.sub { margin: clamp(80px, 10vw, 120px) 0 28px; font: 400 clamp(26px, 2.8vw, 34px)/1.15 var(--serif); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 52px); }
.item { border-top: 1px solid var(--ink); padding-top: 20px; }
.item h3 { margin: 0 0 10px; font: 500 clamp(21px, 1.9vw, 24px)/1.2 var(--serif); }
.item p { margin: 0; color: var(--muted); font-size: 15.5px; }

.rows { margin: 0; border-top: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.row dt { font: 500 clamp(20px, 1.8vw, 23px)/1.3 var(--serif); }
.row dd { margin: 0; color: var(--muted); font-size: 16px; }

.sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.sources li { padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 19px/1.3 var(--serif); }
.small { font-size: 13.5px; color: var(--faint); margin: 22px 0 0; }
.small a { color: var(--muted); }

.contact { text-align: center; max-width: 820px; }
.contact p { margin-left: auto; margin-right: auto; max-width: 40em; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 44px var(--gutter) calc(44px + env(safe-area-inset-bottom)); }
.footer-mark { margin: 0 0 14px; font: 400 18px/1 var(--roman); letter-spacing: .06em; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; font-size: 14.5px; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer .small { margin-top: 12px; color: #6b6b6b; }
/* The name, what it is and who makes it, then the guides and the site. */
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 80px);
  padding-bottom: 40px; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
.footer-about .footer-mark { margin-bottom: 16px; }
.footer-summary, .footer-maker { margin: 0; max-width: 27em; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.footer-maker { margin-top: 10px; }
.footer-maker a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer-head { margin: 3px 0 16px; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6b6b6b; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-list li { font-size: 14.5px; line-height: 1.45; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* The 404 page. */
.notfound { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.notfound .footer-mark { font-size: 30px; }
.notfound .lede { margin-top: 8px; }

/* ── Motion as you read on ──────────────────────────────────────────────── */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-art img { transform: none; transition: none; }
}

/* ── Tablets and phones ─────────────────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 881px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  /* A frosted bar makes itself the frame for anything fixed inside it, which
     trapped the full-screen menu in the bar; on phones it is plain white. */
  .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-mark { font-size: 16px; }
  .menu-button { display: block; }
  .menu {
    position: fixed; inset: var(--nav-h) 0 0 0; background: #fff;
    flex-direction: column; align-items: flex-start; gap: 0; padding: 12px var(--gutter) 40px;
    visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .menu.open { visibility: visible; opacity: 1; transition: opacity .25s ease; }
  .menu li { width: 100%; border-bottom: 1px solid var(--line); }
  .menu a { display: block; padding: 18px 0; font: 400 26px/1.1 var(--serif); }
  .menu .menu-login { margin: 0; padding: 0; border-left: 0; }
  .grid, .grid.three { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .sources { grid-template-columns: 1fr 1fr; }
  .hero-art img { object-position: 55% 50%; }
  .actions { gap: 24px; }
}
@media (max-width: 520px) {
  .sources { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
/* The smallest phones: the two lists one above the other, so neither heading
   has to break onto a second line. */
@media (max-width: 380px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* ── One place, many views: the same frame from the air, in eight LiDAR
      views and in 3D, one at a time, each fading in over the last. It sits
      on the page as a plate under its own heading, with white between it
      and the home screen. The view's name sits bottom left on the picture,
      the pause button bottom right. ──────────────────────────────────── */
.views { padding: clamp(64px, 8vw, 112px) 0 0; }
.views-intro { max-width: 820px; margin: 0 auto clamp(34px, 4.4vw, 56px); padding: 0 var(--gutter); text-align: center; }
.views-intro h2 { margin-bottom: 18px; text-wrap: balance; }
.views-intro p:last-child { margin: 0 auto; max-width: 34em; font-size: clamp(16.5px, 1.5vw, 19px); color: #333; text-wrap: balance; }
.views-stage {
  --inset: clamp(18px, 2.4vw, 34px);
  position: relative; overflow: hidden; background: #1a1b1e;
  width: calc(100% - 2 * var(--gutter)); max-width: 1320px; margin: 0 auto;
  height: clamp(280px, 44vw, 660px); max-height: max(300px, calc(100vh - var(--nav-h) - 48px));
}
@supports (aspect-ratio: 2 / 1) { .views-stage { height: auto; aspect-ratio: 2 / 1; } }
.view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; display: block; }
.view.is-on { opacity: 1; z-index: 1; }
.view.is-in { opacity: 1; z-index: 2; animation: fadein .5s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.view-sat { overflow: hidden; background: #3c4434; }
.sat-mosaic { position: absolute; left: 0; top: 0; width: 1792px; height: 1024px; transform-origin: 0 0; }
.sat-mosaic img { position: absolute; width: 257px; height: 257px; max-width: none; }
.view-3d { background: #15171b; }

/* A soft shade in the lower corners so the words read on any view. */
.views-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 22%, rgba(0, 0, 0, 0) 40%);
}
/* The caption along the bottom: the view's name, the credit for what is on
   screen and the pause button, laid out together so a credit of any length
   moves the rest clear rather than running under them. Both credits sit in
   one cell and fade between each other, so the cell, and the name with it,
   never changes height between the satellite and the LiDAR. */
.views-caption {
  position: absolute; left: var(--inset); right: var(--inset); bottom: var(--inset); z-index: 4;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name credit pause";
  align-items: center; column-gap: 18px; row-gap: 10px; pointer-events: none;
}
.views-label { grid-area: name; color: #fff; transition: opacity .22s ease; }
.views-label.changing { opacity: 0; }
.views-name { display: block; font: 400 clamp(24px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: .005em; text-shadow: 0 1px 18px rgba(0, 0, 0, .25); }
.views-credit {
  grid-area: credit; display: grid; margin: 0; max-width: 36em;
  font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .74); text-align: right;
}
.views-credit > span { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; }
.views-credit > span.is-shown { opacity: 1; }

/* Pause and play, for anyone who wants the pictures still. */
.views-pause {
  grid-area: pause; position: relative; pointer-events: auto;
  width: 34px; height: 34px; margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: rgba(17, 17, 17, .24); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease;
}
.views-pause:hover { background: rgba(17, 17, 17, .46); border-color: rgba(255, 255, 255, .9); }
.views-pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }
.views-pause::before, .views-pause::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2px; height: 11px; margin-top: -5.5px; background: #fff; border-radius: 1px;
}
.views-pause::before { margin-left: -4px; }
.views-pause::after { margin-left: 2px; }
.views-pause.is-paused::before {
  width: 0; height: 0; margin: -6px 0 0 -3px; border-radius: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff;
}
.views-pause.is-paused::after { display: none; }

/* The research inside the film (js/views3d.js): a card pinned to its place
   by a fine leader as the camera passes, like a record opened in the atlas.
   White, a hairline edge and a soft shadow; the layer it comes from, the
   title in the serif, a line or two, and its source. The script places and
   fades each one; until then, and without the film, they are not shown. */
.views-research { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.views-caption { z-index: 5; }
.vr-leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.vr-leaders line { stroke-linecap: round; opacity: 0; }
.vr-lead { stroke: #fff; stroke-width: 1; }
.vr-lead-shade { stroke: rgba(0, 0, 0, .3); stroke-width: 3; }
.vr-dot {
  position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #fff; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 0 12px 2px rgba(0, 0, 0, .35);
}
.vr-card {
  position: absolute; left: 0; top: 0; width: 272px; padding: 13px 15px 11px;
  background: #fff; color: var(--ink); border: 1px solid rgba(17, 17, 17, .1); border-radius: 2px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12);
  opacity: 0; will-change: transform, opacity;
}
.vr-card p { margin: 0; }
.vr-tag { display: flex; align-items: center; font: 500 9.5px/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #3d3d3d; }
.vr-tag::before { content: ''; flex: none; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--gold); }
.vr-tag span { margin-right: .7em; color: #9a9a9a; }
.vr-title { margin-top: 8px; font: 500 19.5px/1.15 var(--serif); letter-spacing: .002em; }
.vr-text { margin-top: 5px; font: 400 12.5px/1.45 var(--sans); color: #333; }
.vr-short { display: none; }
.vr-source { margin-top: 9px; padding-top: 7px; border-top: 1px solid #ececec; font: 400 10.5px/1.35 var(--sans); color: #7a7a7a; }

@media (max-width: 880px) {
  /* Near square on a phone, so the whole hillfort shows; every view keeps
     the same centre, so each fade still lands exactly on the last. The name
     and the button share a row above the credit, which takes the full width. */
  .views-stage { --inset: 16px; height: calc(100vw - 2 * var(--gutter)); max-height: 74vh; }
  @supports (aspect-ratio: 1 / 1) { .views-stage { height: auto; aspect-ratio: 1 / 1; } }
  .views-caption { bottom: 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pause" "credit credit"; row-gap: 8px; }
  .views-credit { max-width: none; text-align: left; font-size: 10.5px; }
  /* Fewer words on a phone: the short line, a narrower card. */
  .vr-card { width: 178px; padding: 8px 10px 7px; box-shadow: 0 10px 24px rgba(0, 0, 0, .24), 0 1px 4px rgba(0, 0, 0, .14); }
  .vr-tag { font-size: 7.5px; letter-spacing: .12em; }
  .vr-tag::before { width: 4px; height: 4px; margin-right: 5px; }
  .vr-title { margin-top: 5px; font-size: 14.5px; line-height: 1.12; }
  .vr-text { margin-top: 3px; font-size: 10.5px; line-height: 1.38; }
  .vr-long { display: none; }
  .vr-short { display: inline; }
  .vr-source { margin-top: 6px; padding-top: 5px; font-size: 8.5px; line-height: 1.3; }
}

/* ── The guides and reference pages (build/layout.mjs) ────────────────────
   The same white page, black type and space as the home page. Text sits in
   a reading column on the same left edge as the home page's headings;
   pictures and tables may take the whole width of the section, and a
   picture marked "bleed" runs edge to edge like the plates. Everything is
   in the HTML, so it reads the same with or without scripts. */
.page-head, .toc, .page-end { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page-head { padding-top: calc(var(--nav-h) + clamp(44px, 7.5vw, 104px)); }
.crumbs ol { list-style: none; margin: 0 0 clamp(36px, 5vw, 60px); padding: 0; display: flex; flex-wrap: wrap; font-size: 13.5px; line-height: 1.5; color: #6b6b6b; }
.crumbs li + li::before { content: '/'; margin: 0 .7em; color: #b3b3b3; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.page-head h1 { margin: 0; max-width: 15em; font: 400 clamp(38px, 5.6vw, 76px)/1.05 var(--serif); letter-spacing: -.01em; }

/* "On this page" sits inside the page body, so its rules name the body to
   stand clear of the body's own paragraph, list and link styles. */
.toc { padding-top: clamp(36px, 5vw, 56px); }
.page-body .toc .toc-head { margin: 0 0 14px; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #6b6b6b; }
.page-body .toc ol { margin: 0; padding: 0; list-style: none; max-width: 760px; columns: 2; column-gap: 48px; }
.page-body .toc li { break-inside: avoid; margin: 0; padding: 5px 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.page-body .toc a { color: inherit; text-decoration: none; }
.page-body .toc a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: currentColor; }

/* A plain column of blocks, so the space between them is the larger of
   their two margins, as in any well-set page. */
.page { overflow-x: clip; }
/* A long address or code with no break in it (a DOI, a dataset name joined
   by underscores) wraps where it must on a small screen, rather than being
   cut off at the edge. Ordinary words are untouched. */
.page-head, .page-body { overflow-wrap: break-word; }
.page-body { --measure: 680px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vw, 104px); }
.page-body > * { max-width: var(--measure); }
.page-body > .wide, .page-body > .figures, .page-body > .table { max-width: none; }
.page-body > dl.terms { max-width: 880px; }
.page-body > .faq { max-width: var(--measure); }
.page-body > .note { max-width: 620px; }
.page-body > .bleed { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); }
.page-body [id] { scroll-margin-top: 24px; }

.page-body p, .page-body li, .page-body dd { font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.7; color: #2b2b2b; }
.page-body p { margin: 0 0 1.15em; }
.page-body h2 { margin: clamp(52px, 6vw, 80px) 0 18px; font: 400 clamp(28px, 3vw, 40px)/1.15 var(--serif); letter-spacing: -.003em; }
.page-body h3 { margin: 36px 0 10px; font: 500 clamp(21px, 1.9vw, 25px)/1.25 var(--serif); }
.page-body h4 { margin: 28px 0 8px; font: 600 16px/1.4 var(--sans); }
.page-body > :first-child { margin-top: 0; }
/* The opening of every page: the lede, the date over a hairline, then "On
   this page". They open the page body (build/layout.mjs), so a reader view
   keeps them, and are set exactly as the page header set them before. */
.page-body > p.lede { margin: 28px 0 0; max-width: 34em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: #3d3d3d; }
.page-body > p.lede a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: currentColor; }
/* The hairline under the date runs into the gutters, as the page header's
   rule did. */
.page-body > p.page-date {
  max-width: none; margin: 30px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) clamp(40px, 5.5vw, 68px);
  border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.65; color: #6b6b6b;
}
.page-body > p.page-date a { color: inherit; text-decoration-color: rgba(107, 107, 107, .5); }
.page-body > p.page-date a:hover { text-decoration-color: currentColor; }
.page-body > .toc { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.page-body > .toc + * { margin-top: clamp(40px, 5vw, 64px); }
.page-body > p.page-date + :not(.toc) { margin-top: clamp(48px, 7vw, 96px); }
/* Headings break into even lines, never leaving one word alone on the last;
   paragraphs avoid a lone last word where the browser can. */
.page-head h1, .page-body h2, .page-body h3, .page-end h2, .page-body .term dt { text-wrap: balance; }
.page-body p, .page-body li, .page-body dd, .page-body figcaption { text-wrap: pretty; }
.page-body h2 + h3 { margin-top: 22px; }
.page-body :is(h2, h3) + :is(figure, .figures, .table) { margin-top: 26px; }
.page-body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(17, 17, 17, .35); }
.page-body a:hover { text-decoration-color: var(--ink); }
.page-body ul, .page-body ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.page-body li { margin: .35em 0; }
.page-body li::marker { color: #8a8a8a; }
.page-body strong { font-weight: 600; }
.page-body abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; }
.page-body code { font: .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f4f4f4; padding: .12em .35em; border-radius: 3px; }
.page-body hr { border: 0; border-top: 1px solid var(--line); margin: 56px 0; }
.page-body blockquote { margin: 40px 0; padding: 2px 0 2px 26px; border-left: 1px solid var(--ink); }
.page-body blockquote p { font: italic 400 clamp(20px, 1.8vw, 24px)/1.45 var(--serif); color: #222; }
.page-body blockquote footer, .page-body blockquote cite { display: block; margin-top: 10px; font: 400 14px/1.5 var(--sans); font-style: normal; color: #6b6b6b; }
/* A reference or a credit line set out as an example: upright, in the text
   face, so its own italics (the title of the work) show. The display
   quotation above is kept for real quotations. */
.page-body blockquote.ref { margin: 32px 0; padding: 4px 0 4px 22px; }
.page-body blockquote.ref p { font: 400 16px/1.65 var(--sans); color: #222; }

/* Pictures and their captions: what, where, whose and under what licence. */
.page-body figure { margin: clamp(36px, 4.5vw, 56px) 0; }
.page-body figure img { width: 100%; height: auto; background: #f2f2f2; }
.page-body figcaption { margin-top: 12px; max-width: var(--measure); font-size: 13.5px; line-height: 1.55; color: #666; }
.page-body > .bleed { margin-top: clamp(48px, 7vw, 88px); margin-bottom: clamp(48px, 7vw, 88px); }
.page-body > .bleed img { height: clamp(260px, 50vw, 680px); object-fit: cover; }
.page-body > .bleed figcaption { padding: 0 var(--gutter); max-width: none; text-align: center; }
.page-body .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; margin: clamp(36px, 4.5vw, 56px) 0; }
.page-body .figures figure { margin: 0; }

/* Tables: thin rules, labels in small capitals. On a phone each row
   stacks, every cell under its column's name (build.mjs writes the names). */
.page-body .table { margin: 36px 0 44px; overflow-x: auto; }
.page-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.page-body caption { caption-side: bottom; padding-top: 12px; text-align: left; font-size: 13.5px; color: #666; }
.page-body thead th { padding: 0 20px 12px 0; border-bottom: 1px solid var(--ink); text-align: left; vertical-align: bottom; font: 500 11.5px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #555; }
.page-body tbody td, .page-body tbody th { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; color: #2b2b2b; }
.page-body tbody th { font: 500 17.5px/1.35 var(--serif); color: var(--ink); }
.page-body tr > :last-child { padding-right: 0; }

/* A list of terms, the glossary's form: the term left, its meaning right. */
.page-body dl.terms { margin: 0 0 40px; border-top: 1px solid var(--ink); }
.page-body .term { display: grid; grid-template-columns: minmax(160px, 270px) 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.page-body .term dt { font: 500 clamp(19px, 1.6vw, 21px)/1.3 var(--serif); }
.page-body .term dd { margin: 0; font-size: 16px; line-height: 1.65; color: #333; }
.page-body h2 + dl.terms { margin-top: 8px; }

/* Questions and answers: the question in the serif, the answer below. */
.page-body .faq { margin: 0 0 1.2em; border-top: 1px solid var(--ink); }
.page-body .qa { padding: 26px 0 22px; border-bottom: 1px solid var(--line); }
.page-body .qa h2, .page-body .qa h3 { margin: 0 0 12px; font: 500 clamp(20px, 1.8vw, 24px)/1.3 var(--serif); letter-spacing: 0; }
.page-body .answer > :last-child { margin-bottom: 0; }
.page-body h2 + .faq { margin-top: 8px; }

/* References, in the form a reader can copy. */
.page-body ol.refs { padding-left: 1.6em; }
.page-body ol.refs li { font-size: 15px; line-height: 1.6; color: #333; margin: .7em 0; }

/* An aside: a note set apart by a rule, as the home page sets its items. */
.page-body .note { margin: 40px 0; padding-top: 18px; border-top: 1px solid var(--ink); }
.page-body .note p, .page-body .note li { font-size: 15.5px; color: #444; }
.page-body .note > :last-child { margin-bottom: 0; }

/* The closing word on the pilot. */
.page-end { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(72px, 10vw, 128px); border-top: 1px solid var(--line); }
.page-end h2 { max-width: 17em; margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 42px); }
.page-end p { margin: 0; max-width: 36em; font-size: clamp(16.5px, 1.5vw, 19px); color: #333; }
.page-end .actions { justify-content: flex-start; margin-top: 32px; }

@media (max-width: 880px) {
  .page-body .toc ol { columns: 1; }
  .page-body .term { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 720px) {
  .page-body .figures { grid-template-columns: 1fr; }
}
/* Tables stack into labelled rows at the width where the bar becomes a menu
   and the grids go to one column: a five-column table is too tight on a
   tablet held upright. */
@media (max-width: 880px) {
  .page-body table:not(.keep), .page-body table:not(.keep) tbody, .page-body table:not(.keep) tr,
  .page-body table:not(.keep) td, .page-body table:not(.keep) tbody th { display: block; width: auto; }
  .page-body table:not(.keep) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .page-body table:not(.keep) { display: flex; flex-direction: column; }
  .page-body table:not(.keep) caption { display: block; order: 1; padding: 14px 0 0; }
  .page-body table:not(.keep) tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .page-body table:not(.keep) tr:first-child { border-top: 1px solid var(--ink); }
  .page-body table:not(.keep) td, .page-body table:not(.keep) tbody th { padding: 5px 0; border: 0; }
  .page-body table:not(.keep) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
  .page-body table:not(.keep) tr > :first-child { padding-top: 0; }
  .page-body table:not(.keep) tr > :first-child::before { display: none; }
  .page-body table:not(.keep) tr > td:first-child { font: 500 18px/1.35 var(--serif); color: var(--ink); }
}