/* ==========================================================================
   SLANT LIGHT - design system
   British landscape photography as a subject.
   Naming metaphor: the Ordnance Survey map sheet and the trig pillar.
   Prefix: trg-
   Register: sober gallery. Neutral very dark grey. Zero radius. Zero shadow.
   Condensed sans in spaced capitals for display, reading serif for text.
   No colour accent: greys and the white of the text only.
   No external request: system font stacks only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Surfaces: neutral greys, no hue */
  --sheet-0:#101010;          /* page ground */
  --sheet-1:#161616;          /* sunk band */
  --sheet-2:#1c1c1c;          /* plate placeholder / inset */
  --sheet-3:#232323;          /* hovered inset */

  /* Rules: three weights replace the elevation scale in this register */
  --rule-0:#222222;
  --rule-1:#2a2a2a;
  --rule-2:#3a3a3a;
  --rule-hair:1px solid var(--rule-0);
  --rule-line:1px solid var(--rule-1);
  --rule-heavy:2px solid var(--rule-2);

  /* Text */
  --graphite:#6d6d6d;         /* quietest label */
  --slate:#9a9a9a;            /* secondary text */
  --chalk:#c6c6c6;            /* body text */
  --paper:#ffffff;            /* titles, emphasis */

  /* Faces: two families, nothing else */
  --face-plate:"Roboto Condensed","Liberation Sans Narrow","PT Sans Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --face-read:"Book Antiqua","Palatino Linotype",Palatino,"URW Palladio L",Georgia,serif;

  /* Radii: the register forbids rounding. Kept as tokens so the grammar holds. */
  --edge:0px;
  --edge-sm:0px;
  --edge-lg:0px;

  /* Elevation scale, three levels. In a gallery register nothing floats,
     so every level resolves to none and depth is carried by the rules above. */
  --lift-1:none;
  --lift-2:none;
  --lift-3:none;

  /* Motion */
  --ease-plate:.42s cubic-bezier(.2,0,.15,1);
  --ease-quick:.2s cubic-bezier(.4,0,.2,1);

  /* Measures */
  --sheet-w:1280px;
  --column-w:700px;
  --gutter:20px;
  --band:80px;                /* section rhythm, small screens */
}
@media (min-width:900px){
  :root{ --gutter:36px; --band:120px; }
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--sheet-0);
  color:var(--chalk);
  font-family:var(--face-read);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;background:var(--sheet-2);border-radius:var(--edge)}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
figure{margin:0}
::selection{background:#3a3a3a;color:#ffffff}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}

/* --------------------------------------------------------------------------
   3. STRUCTURE
   -------------------------------------------------------------------------- */
.trg-sheet{width:100%;max-width:var(--sheet-w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.trg-column{width:100%;max-width:var(--column-w);margin:0 auto}

.trg-contour{padding-top:var(--band);padding-bottom:var(--band)}
.trg-contour--sunk{background:var(--sheet-1);border-top:var(--rule-hair);border-bottom:var(--rule-hair)}
.trg-contour--tight{padding-top:calc(var(--band) * .6);padding-bottom:calc(var(--band) * .6)}

/* Section label: spaced small capitals plus a decorative rule */
.trg-contour__index{
  display:flex;align-items:center;gap:14px;
  font-family:var(--face-plate);
  font-size:12px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:18px;
}
.trg-contour__index::before{content:"";display:block;width:46px;height:1px;background:var(--rule-2);flex:0 0 auto}

.trg-contour__head{margin-bottom:44px;max-width:820px}
@media (min-width:900px){ .trg-contour__head{margin-bottom:60px} }
.trg-contour__note{color:var(--slate);font-size:17px;margin-top:16px;max-width:640px}

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--face-plate);
  font-weight:700;
  color:var(--paper);
  text-transform:uppercase;
  line-height:1.06;
  letter-spacing:.05em;
}
h1{font-size:clamp(36px,5.2vw,68px);letter-spacing:.035em}
h2{font-size:clamp(27px,3.6vw,44px);letter-spacing:.045em}
h3{font-size:clamp(19px,2.1vw,26px);letter-spacing:.06em}
h4{font-size:clamp(15px,1.5vw,18px);letter-spacing:.11em}
h5{font-size:13px;letter-spacing:.2em}
p{line-height:1.78}

.trg-caps{
  font-family:var(--face-plate);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  font-weight:700;
  color:var(--graphite);
}
.trg-hairline{border:0;border-top:var(--rule-hair);margin:0}

/* --------------------------------------------------------------------------
   5. MARGIN (site header) AND BEARING (navigation)
   -------------------------------------------------------------------------- */
.trg-margin{
  border-bottom:var(--rule-hair);
  background:var(--sheet-0);
  position:sticky;top:0;z-index:40;
}
.trg-margin__inner{
  display:flex;flex-direction:column;gap:16px;
  padding-top:20px;padding-bottom:16px;
}
@media (min-width:900px){
  .trg-margin__inner{flex-direction:row;align-items:baseline;justify-content:space-between;gap:40px;padding-top:16px;padding-bottom:14px}
}
.trg-margin__mark{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.trg-margin__name{
  font-family:var(--face-plate);
  font-weight:700;
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--paper);
}
.trg-margin__strap{
  font-family:var(--face-plate);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--graphite);
}

.trg-bearing{display:flex;flex-wrap:wrap;gap:4px 22px}
.trg-bearing__link{
  font-family:var(--face-plate);
  font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:color var(--ease-quick),border-color var(--ease-quick);
}
.trg-bearing__link:hover{color:var(--paper);border-bottom-color:var(--rule-2)}
.trg-bearing__link--here{color:var(--paper);border-bottom-color:var(--paper)}

/* --------------------------------------------------------------------------
   6. SUMMIT (full width hero)
   -------------------------------------------------------------------------- */
.trg-summit{position:relative;isolation:isolate;overflow:hidden;background:var(--sheet-2)}
.trg-summit__plate{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  z-index:0;
}
.trg-summit__haze{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.42) 38%,rgba(10,10,10,.80) 100%);
}
.trg-summit__body{
  position:relative;z-index:2;
  padding-top:clamp(24px,2.6vw,27px);
  padding-bottom:clamp(14px,1.4vw,16px);
  max-width:960px;
}
.trg-summit__kicker{
  font-family:var(--face-plate);
  font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:#d0d0d0;margin-bottom:10px;
  display:flex;align-items:center;gap:14px;
}
.trg-summit__kicker::before{content:"";width:40px;height:1px;background:rgba(255,255,255,.55)}
.trg-summit__title{color:#ffffff;max-width:32ch;font-size:clamp(27px,2.5vw,34px)}
.trg-summit__lede{
  margin-top:10px;max-width:78ch;
  font-size:clamp(15px,1.1vw,16px);
  color:#e2e2e2;
}

/* Datum: the three readings carried by the hero */
.trg-datum{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;
  border-top:1px solid rgba(255,255,255,.22);
}
@media (min-width:640px){ .trg-datum{grid-template-columns:repeat(3,1fr)} }
.trg-datum__cell{
  padding:22px 0 26px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:640px){
  .trg-datum__cell{
    padding:9px 26px 11px;border-bottom:0;border-left:1px solid rgba(255,255,255,.14);
    display:flex;align-items:baseline;gap:14px;
  }
  .trg-datum__cell:first-child{padding-left:0;border-left:0}
  .trg-datum__label{margin-top:0}
}
.trg-datum__reading{
  font-family:var(--face-plate);font-weight:700;
  font-size:clamp(20px,1.7vw,23px);
  letter-spacing:.06em;color:#ffffff;line-height:1;
  flex:0 0 auto;
}
.trg-datum__label{
  display:block;margin-top:5px;
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#b4b4b4;
}

/* The section grid must open on the first screen: the band that follows the
   hero is drawn tight, and its heading block is laid out on one line. */
.trg-summit + .trg-contour{padding-top:22px}
.trg-summit + .trg-contour .trg-contour__head{margin-bottom:14px;max-width:none}
.trg-summit + .trg-contour .trg-contour__index{margin-bottom:8px}
@media (min-width:1080px){
  .trg-summit + .trg-contour .trg-contour__head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,44%);
    column-gap:48px;
  }
  .trg-summit + .trg-contour .trg-contour__index{grid-column:1;grid-row:1}
  .trg-summit + .trg-contour .trg-contour__head h2{grid-column:1;grid-row:2}
  .trg-summit + .trg-contour .trg-contour__note{grid-column:2;grid-row:1 / span 2;align-self:end;margin-top:0}
}
.trg-summit + .trg-contour .trg-contour__head h2{font-size:clamp(22px,2vw,26px)}
.trg-summit + .trg-contour .trg-contour__note{font-size:15.5px;max-width:none}

/* --------------------------------------------------------------------------
   7. QUADRANTS (the sections of the site)
   -------------------------------------------------------------------------- */
.trg-quadrants{display:grid;grid-template-columns:1fr;gap:2px}
@media (min-width:700px){ .trg-quadrants{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .trg-quadrants{grid-template-columns:repeat(3,1fr)} }

.trg-square{
  display:block;background:var(--sheet-1);
  border-radius:var(--edge);box-shadow:var(--lift-1);
  transition:background var(--ease-quick);
}
.trg-square:hover{background:var(--sheet-3)}
.trg-square__frame{overflow:hidden;background:var(--sheet-2)}
.trg-square__plate{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(12%);
  transition:transform var(--ease-plate),filter var(--ease-plate);
}
.trg-square:hover .trg-square__plate{transform:scale(1.035);filter:grayscale(0%)}
.trg-square__body{padding:14px 24px 24px}
.trg-square__ref{
  display:block;margin-bottom:8px;
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);
}
.trg-square__name{margin-bottom:10px}
.trg-square__note{font-size:15.5px;color:var(--slate);line-height:1.7}

/* --------------------------------------------------------------------------
   8. LOGBOOK (dated feed)
   -------------------------------------------------------------------------- */
.trg-logbook{display:grid;grid-template-columns:1fr;gap:46px 30px}
@media (min-width:680px){ .trg-logbook{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .trg-logbook{grid-template-columns:repeat(3,1fr);gap:54px 34px} }

.trg-entry{display:flex;flex-direction:column}
.trg-entry__frame{overflow:hidden;background:var(--sheet-2);margin-bottom:18px}
.trg-entry__plate{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(18%);
  transition:transform var(--ease-plate),filter var(--ease-plate);
}
.trg-entry:hover .trg-entry__plate{transform:scale(1.03);filter:grayscale(0%)}
.trg-entry__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:12px;
}
.trg-entry__ref{
  font-family:var(--face-plate);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk);
  border:var(--rule-line);padding:4px 9px;
}
.trg-entry__date{
  font-family:var(--face-plate);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;color:var(--graphite);
}
.trg-entry__name{margin-bottom:10px;transition:color var(--ease-quick)}
.trg-entry:hover .trg-entry__name{color:var(--chalk)}
.trg-entry__lede{font-size:15.5px;color:var(--slate);line-height:1.72}

/* Two lead entries: wider plate, larger title */
@media (min-width:1080px){
  .trg-entry--lead{grid-column:span 3;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center}
  .trg-entry--lead .trg-entry__frame{margin-bottom:0}
  .trg-entry--lead .trg-entry__plate{aspect-ratio:16/9}
  .trg-entry--lead .trg-entry__name{font-size:clamp(24px,2.6vw,34px)}
  .trg-entry--lead .trg-entry__lede{font-size:17px}
}

/* --------------------------------------------------------------------------
   9. PLATES BAND (the archive sets)
   -------------------------------------------------------------------------- */
.trg-plates{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media (min-width:900px){ .trg-plates{grid-template-columns:1.25fr 1fr;gap:56px} }
.trg-plates__frame{overflow:hidden;background:var(--sheet-2)}
.trg-plates__plate{width:100%;aspect-ratio:16/10;object-fit:cover}
.trg-plates__list{border-top:var(--rule-line)}
.trg-plates__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:var(--rule-line);
  transition:padding-left var(--ease-quick),color var(--ease-quick);
}
.trg-plates__row:hover{padding-left:10px;color:var(--paper)}
.trg-plates__row-name{
  font-family:var(--face-plate);font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);
}
.trg-plates__row:hover .trg-plates__row-name{color:var(--paper)}
.trg-plates__row-count{
  font-family:var(--face-plate);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   10. TRACE (breadcrumb), CREST (section masthead)
   -------------------------------------------------------------------------- */
.trg-trace{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding-top:26px;
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);
}
.trg-trace__step{color:var(--slate);transition:color var(--ease-quick)}
.trg-trace__step:hover{color:var(--paper)}
.trg-trace__step[aria-current]{color:var(--chalk)}
.trg-trace__sep{color:var(--rule-2)}

.trg-crest{padding-top:48px;padding-bottom:52px;border-bottom:var(--rule-hair)}
@media (min-width:900px){ .trg-crest{padding-top:64px;padding-bottom:72px} }
.trg-crest__ref{
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--graphite);margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.trg-crest__ref::before{content:"";width:46px;height:1px;background:var(--rule-2)}
.trg-crest__intro{margin-top:26px;max-width:64ch}
.trg-crest__intro p{color:var(--slate);font-size:17.5px}
.trg-crest__intro p + p{margin-top:18px}

/* --------------------------------------------------------------------------
   11. LISTING (articles of one section)
   -------------------------------------------------------------------------- */
.trg-listing{border-top:var(--rule-hair)}
.trg-listing__row{
  display:grid;grid-template-columns:1fr;gap:18px;
  padding:34px 0;border-bottom:var(--rule-hair);
}
@media (min-width:760px){
  .trg-listing__row{grid-template-columns:300px 1fr;gap:34px;align-items:start;padding:40px 0}
}
.trg-listing__frame{overflow:hidden;background:var(--sheet-2)}
.trg-listing__plate{
  width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(18%);
  transition:transform var(--ease-plate),filter var(--ease-plate);
}
.trg-listing__row:hover .trg-listing__plate{transform:scale(1.03);filter:grayscale(0%)}
.trg-listing__date{
  font-family:var(--face-plate);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;color:var(--graphite);display:block;margin-bottom:12px;
}
.trg-listing__name{margin-bottom:12px}
.trg-listing__lede{color:var(--slate);font-size:16px;max-width:62ch}

/* --------------------------------------------------------------------------
   12. ARTICLE: HEADPLATE, PANORAMA, PROSE, FIELDNOTE, ONWARD
   -------------------------------------------------------------------------- */
.trg-headplate{padding-top:34px;padding-bottom:40px}
.trg-headplate__ref{
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--graphite);
  display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.trg-headplate__ref::before{content:"";width:46px;height:1px;background:var(--rule-2)}
.trg-headplate__title{max-width:20ch}
.trg-headplate__stand{
  margin-top:24px;max-width:60ch;
  font-size:clamp(17px,1.5vw,20px);color:var(--slate);
}
.trg-headplate__stamp{
  margin-top:26px;padding-top:18px;border-top:var(--rule-hair);
  display:flex;flex-wrap:wrap;gap:10px 24px;
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);
}

.trg-panorama{margin:0 0 var(--band)}
.trg-panorama__plate{width:100%;max-height:74vh;object-fit:cover}
.trg-panorama__note{
  max-width:var(--sheet-w);margin:14px auto 0;
  padding-left:var(--gutter);padding-right:var(--gutter);
  font-family:var(--face-plate);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--graphite);
}

.trg-prose{font-size:18px;color:var(--chalk)}
.trg-prose p + p{margin-top:22px}
.trg-prose h2{margin-top:56px;margin-bottom:20px;font-size:clamp(21px,2.2vw,28px)}
.trg-prose h3{margin-top:38px;margin-bottom:14px;font-size:clamp(16px,1.7vw,20px);color:var(--chalk)}
.trg-prose ul{margin:22px 0 22px 0}
.trg-prose li{
  position:relative;padding-left:22px;margin-bottom:12px;color:var(--chalk);
}
.trg-prose li::before{
  content:"";position:absolute;left:0;top:.75em;width:9px;height:1px;background:var(--rule-2);
}
.trg-prose a{border-bottom:1px solid var(--rule-2);transition:border-color var(--ease-quick),color var(--ease-quick)}
.trg-prose a:hover{color:var(--paper);border-bottom-color:var(--slate)}
.trg-prose strong{color:var(--paper);font-weight:700}

.trg-fieldnote{
  margin:44px 0;padding:26px 26px 30px;
  background:var(--sheet-1);border-left:var(--rule-heavy);
  border-radius:var(--edge);box-shadow:var(--lift-1);
}
.trg-fieldnote__title{
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);margin-bottom:14px;
}
.trg-fieldnote p{font-size:16.5px;color:var(--slate)}
.trg-fieldnote p + p{margin-top:14px}

.trg-onward{margin-top:var(--band);border-top:var(--rule-hair);padding-top:38px}
.trg-onward__title{margin-bottom:24px}
.trg-onward__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:var(--rule-hair);
  transition:padding-left var(--ease-quick);
}
.trg-onward__item:hover{padding-left:10px}
.trg-onward__name{
  font-family:var(--face-plate);font-size:14px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--chalk);
}
.trg-onward__item:hover .trg-onward__name{color:var(--paper)}
.trg-onward__ref{
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--graphite);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   13. WAYMARK (text link with a rule)
   -------------------------------------------------------------------------- */
.trg-waymark{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--face-plate);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--chalk);
  padding-bottom:6px;border-bottom:1px solid var(--rule-2);
  transition:color var(--ease-quick),border-color var(--ease-quick),gap var(--ease-quick);
}
.trg-waymark:hover{color:var(--paper);border-bottom-color:var(--paper);gap:18px}
.trg-waymark::after{content:"/";color:var(--graphite)}

/* --------------------------------------------------------------------------
   14. CAIRN (footer)
   -------------------------------------------------------------------------- */
.trg-cairn{border-top:var(--rule-hair);background:var(--sheet-1);padding-top:60px;padding-bottom:40px;margin-top:0}
.trg-cairn__grid{display:grid;grid-template-columns:1fr;gap:38px}
@media (min-width:700px){ .trg-cairn__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .trg-cairn__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px} }
.trg-cairn__name{
  font-family:var(--face-plate);font-weight:700;font-size:20px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--paper);margin-bottom:16px;
}
.trg-cairn__blurb{font-size:15.5px;color:var(--slate);max-width:40ch}
.trg-cairn__key-title{
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--graphite);margin-bottom:16px;
}
.trg-cairn__link{
  display:block;padding:7px 0;font-size:15px;color:var(--slate);
  transition:color var(--ease-quick);
}
.trg-cairn__link:hover{color:var(--paper)}
.trg-cairn__foot{
  margin-top:48px;padding-top:22px;border-top:var(--rule-hair);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:var(--face-plate);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
}

/* --------------------------------------------------------------------------
   15. MOTION PREFERENCE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}