/*
 * TABLE OF CONTENTS
 *
 * 1. Reset
 * 2. Custom Properties
 * 3. Fonts
 * 4. Base
 * 5. Typography
 * 6. Layout
 * 7. Navigation
 * 8. Post Cards
 * 9. Homepage
 * 10. Post Listing
 * 11. Single Post
 * 12. Post Navigation
 */

/* ================================================================== */
/* #region 1. Reset                                                     */
/* ================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
time {
  font-family: "pano_regular", arial, sans-serif;
  text-transform: uppercase;
}
/* #endregion */

/* ================================================================== */
/* #region 2. Custom Properties                                         */
/* ================================================================== */

/*
  Two-layer token system:

  Core palette  — raw colour values, named by hue and step.
                  Don't use these directly in the stylesheet;
                  reference the semantic tokens below instead.

  Semantic tokens — what you use everywhere else.
                  Named by purpose, not appearance.
                  Light mode values are set here in :root;
                  dark mode overrides follow in the @media block.
*/

:root {
  /* ── Core palette ──────────────────────────────────────────────── */

  --ultras-1: #ec6c4b;
  --ultras-2: #f08b66;
  --ultras-3: #f3a386;
  --ultras-4: #f7bba6;

  --marathons-1: #fdd6c1;
  --marathons-2: #f8c6aa;
  --marathons-3: #f6b48f;
  --marathons-4: #f39c6b;

  --others-1: #f9c986;
  --others-2: #ffd8a1;
  --others-3: #ffebcf;
  --others-4: #fff4e5;

  --blog-1: #06201f;
  --blog-2: #0d302f;
  --blog-3: #134443;

  --grey-1: #0f0f0f;
  --grey-2: #2a2525;
  --grey-3: #979797;
  --grey-4: #d8d8d8;
  --grey-5: #e9e9e9;
  --white: #ffffff;

  /* ── Semantic tokens — light mode ─────────────────────────────── */

  --color-surface: var(--white);
  --color-text: var(--grey-2);
  --color-text-caption: var(--grey-2);
  --color-nav-bg: var(--grey-5);
  --color-border: var(--grey-4);
  --color-muted: var(--grey-3);

  /* Blog cream is the same value as others-3 — used for light text
     on dark green backgrounds (blog nav, blog sidebar, bio section) */
  --color-blog-cream: var(--others-3);

  /* Per-category: head-bg   = post header background colour
                   nav-bg    = nav pill colour on single post pages
                   nav-active = active section indicator on archive pages */
  --color-ultras-head-bg: var(--ultras-3);
  --color-ultras-head-accent: var(--ultras-1);
  --color-ultras-nav-bg: var(--ultras-4);
  --color-ultras-nav-active: var(--ultras-3);

  --color-marathons-head-bg: var(--marathons-2);
  --color-marathons-head-accent: var(--marathons-4);
  --color-marathons-nav-bg: var(--marathons-1);
  --color-marathons-nav-active: var(--marathons-2);

  --color-others-head-bg: var(--others-3);
  --color-others-head-accent: var(--others-2);
  --color-others-nav-bg: var(--others-2);
  --color-others-nav-active: var(--others-3);

  --color-blog-head-bg: var(--blog-2);
  --color-blog-head-accent: var(--blog-1);
  --color-blog-nav-bg: var(--blog-3);
  --color-blog-nav-active: var(--blog-2);
}

/* ── Semantic tokens — dark mode ───────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: var(--grey-1);
    --color-text: var(--white);
    --color-text-caption: var(--white);
    --color-nav-bg: var(--grey-2);
    --color-border: var(--grey-3);
    --color-muted: var(--grey-4);

    /* Category colours shift one step darker in dark mode */
    --color-ultras-head-bg: var(--ultras-2);
    --color-ultras-head-accent: var(--ultras-1);
    --color-ultras-nav-bg: var(--ultras-3);
    --color-ultras-nav-active: var(--ultras-2);

    --color-marathons-head-bg: var(--marathons-3);
    --color-marathons-head-accent: var(--marathons-4);
    --color-marathons-nav-bg: var(--marathons-2);
    --color-marathons-nav-active: var(--marathons-3);

    --color-others-head-bg: var(--others-2);
    --color-others-head-accent: var(--others-1);
    --color-others-nav-bg: var(--others-1);
    --color-others-nav-active: var(--others-2);

    /* Blog dark greens are the same in both modes */
  }
}

/* #endregion */

/* ================================================================== */
/* #region 3. Fonts                                                     */
/* ================================================================== */

@font-face {
  font-family: "pano_regular";
  src: url("../fonts/hw-pano-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "pano_bold";
  src: url("../fonts/hw-pano-bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/montserrat-v26-latin-600.woff2") format("woff2");
}

/* #endregion */

/* ================================================================== */
/* #region 4. Base                                                      */
/* ================================================================== */

* {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}

/* #endregion */

/* ================================================================== */
/* #region 5. Typography                                                */
/* ================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
a {
  font-family: "pano_bold", "arial", sans-serif;
  text-decoration: none;
  margin-top: 0;
  color: var(--color-text);
  line-height: 1.5;
}

p,
ul,
blockquote {
  font-family: "Montserrat", "arial", sans-serif;
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: 1.5rem;
}

h1 {
  font-size: 2.488rem;
  line-height: 1.35;
}
h2 {
  font-size: 2.074rem;
  line-height: 1.35;
}
h3 {
  font-size: 1.728rem;
  line-height: 1.4;
}
h4 {
  font-size: 1.44rem;
  line-height: 1.4;
}

h5,
header.masthead h1 {
  font-size: 1.2rem;
  line-height: 1.5;
}

small,
.post-cat,
time,
nav a {
  font-size: 0.65rem;
}

.miniheader {
  font-family: "pano_regular", "arial", sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
  margin: 2rem 0;
  grid-column: 1 / span 12;
}

/* #endregion */

/* ================================================================== */
/* #region 6. Layout                                                    */
/* ================================================================== */

body {
  margin: 0 0 3em 0;
  background-color: var(--color-surface);
  color: var(--color-text);
}

header.masthead,
main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0;
  margin: 0 auto;
  max-width: 90rem;
}

header.masthead {
  padding: 0 0.5rem;
}
main {
  padding: 0 1rem;
}

@media (min-width: 768px) {
  header.masthead,
  header.post-header,
  main {
    padding: 0 2rem;
  }
}

/* #endregion */

/* ================================================================== */
/* #region 7. Navigation                                                */
/* ================================================================== */

/*
  How nav theming works
  ─────────────────────
  Rather than writing separate colour rules for every page type, we set
  CSS custom properties on the <body> class and then write the structural
  nav rules once so they just consume whichever variables are in scope.

  The body class is set in header.php and follows this pattern:
    homepage            — the home page
    archive {category}  — a category listing page (e.g. archive ultras)
    single  {category}  — an individual post page  (e.g. single blog)

  The five variables:

    --nav-link-bg      The background colour on every individual nav link.
                       On archive/home pages this is always neutral grey.
                       On single post pages it becomes the category colour
                       so the whole nav bar reflects where you are.

    --nav-group-bg     At 390px+ the nav links collapse into a single pill
                       group (background on the <ul> rather than each <a>).
                       This variable colours that outer pill. It matches
                       --nav-link-bg so the pill and the links read as one.

    --nav-active-bg    The background on the highlighted current-section
                       link. On archive pages this is the category colour
                       (a coloured pill sitting inside the grey group).
                       On single post pages the whole group is already the
                       category colour, so the parent section shows white.

    --nav-active-color The text colour on the active/current indicator.
                       Usually black, but the blog's dark green needs white.

    --nav-text         Text colour for all nav links. Black everywhere
                       except on a blog post, where the dark green nav
                       background needs cream text to be readable.
*/

/* ── Theme variables ────────────────────────────────────────────── */

/* Homepage and all archive (category listing) pages:
   neutral grey nav, with a coloured pill for the active section only */
.homepage,
.archive {
  --nav-link-bg: var(--color-nav-bg);
  --nav-group-bg: var(--color-nav-bg);
  --nav-active-bg: var(--color-nav-bg); /* overridden per category below */
  --nav-active-color: var(--grey-2);
  --nav-text: var(--grey-2);
}

/* Override just the active pill colour for each archive page */
.archive.ultras {
  --nav-active-bg: var(--color-ultras-nav-active);
}
.archive.marathons {
  --nav-active-bg: var(--color-marathons-nav-active);
}
.archive.other {
  --nav-active-bg: var(--color-others-nav-active);
}
.archive.blog {
  --nav-active-bg: var(--color-blog-nav-active);
  --nav-active-color: var(--white);
}

/* Single post pages: the whole nav takes the category colour.
   Blog uses cream text because the nav background is dark green. */
.single.ultras {
  --nav-link-bg: var(--color-ultras-nav-bg);
  --nav-group-bg: var(--color-ultras-nav-bg);
  --nav-text: var(--grey-2);
}
.single.marathons {
  --nav-link-bg: var(--color-marathons-nav-bg);
  --nav-group-bg: var(--color-marathons-nav-bg);
  --nav-text: var(--grey-2);
}
.single.other {
  --nav-link-bg: var(--color-others-nav-bg);
  --nav-group-bg: var(--color-others-nav-bg);
  --nav-text: var(--grey-2);
}
.single.blog {
  --nav-link-bg: var(--color-blog-nav-bg);
  --nav-group-bg: var(--color-blog-nav-bg);
  --nav-text: var(--color-blog-cream);
}

/* ── Structure ──────────────────────────────────────────────────── */

header.masthead .nav-container {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding-top: 2.5rem;
}

header.masthead .nav-container h1 {
  display: block;
  grid-column: span 8;
  margin-bottom: 1rem;
  text-align: center;
}

header.masthead .nav-container nav {
  grid-column: span 8;
  text-align: center;
  padding: 0 2rem;
}

header.masthead .nav-container nav ul {
  display: inline-block;
  border-radius: 2rem;
}

header.masthead .nav-container nav ul li {
  display: inline-block;
  margin: 0.2rem 0;
}

/* Every nav link picks up the theme colour via --nav-link-bg.
   Using `a` not `a:link` so visited links are styled the same way —
   you visit your own site constantly so :link alone would never match. */
header.masthead .nav-container nav ul li a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 2rem;
  text-transform: uppercase;
  font-family: "pano_regular", sans-serif;
  background-color: var(--nav-link-bg);
  color: var(--nav-text);
}

/* The outermost links get a touch more breathing room */
header.masthead .nav-container nav ul li:last-child a {
  padding-right: 0.8rem;
}
header.masthead .nav-container nav ul li:first-child a {
  padding-left: 0.8rem;
}

/* Archive pages: highlight the link for the current section */
.archive header.masthead .nav-container nav a[aria-current] {
  background-color: var(--nav-active-bg);
  color: var(--nav-active-color);
  padding: 0.4rem 0.8rem;
}

/* Single post pages: the parent section link shows white,
   pulling it out from the category-coloured group */
.single header.masthead .nav-container nav a[aria-current] {
  background-color: var(--white);
  color: var(--grey-2);
  padding: 0.4rem 0.8rem;
}

/* Single posts: site title uses the same nav-text colour as nav links —
   stays dark on coloured navs (grey-2) and cream on blog (via --nav-text) */
.single header.masthead .nav-container h1 a {
  color: var(--nav-text);
}

/* Blog single: the current-section pill is white, so its text
   must flip back to dark rather than inheriting cream */
.single.blog header.masthead .nav-container a[aria-current] {
  background-color: var(--white);
  color: var(--grey-2);
}

/* ── Large mobile ──────────────────────────────────────────────── */

@media (min-width: 390px) {
  header.masthead .nav-container nav {
    padding: 0;
  }
  header.masthead .nav-container nav ul li {
    margin: 0;
  }

  /* Group pill takes the theme colour */
  header.masthead .nav-container nav ul {
    background-color: var(--nav-group-bg);
  }

  /* Tighter per-link padding inside the group pill */
  header.masthead .nav-container nav ul li a {
    padding: 0.4rem 0.4rem;
  }

  /* Active indicator pills always keep full horizontal padding */
  .archive header.masthead .nav-container nav a[aria-current],
  .single header.masthead .nav-container nav a[aria-current] {
    padding: 0.4rem 0.8rem;
  }
}

/* ── Dark mode nav override ────────────────────────────────────── */

/* In dark mode the nav background is near-black (grey-2), so default
   nav text must flip to white. Active pills still have light category
   colours so they keep dark text. */
@media (prefers-color-scheme: dark) {
  .homepage,
  .archive {
    --nav-text: var(--white);
    --nav-active-color: var(--grey-2);
  }
}

/* ── Tablet ────────────────────────────────────────────────────── */

@media (min-width: 600px) {
  .nav-container {
    padding-bottom: 0.5rem !important;
  }
  .nav-container h1 {
    grid-column: span 3 !important;
    text-align: left !important;
  }
  .nav-container nav {
    grid-column: span 5 !important;
  }
  .nav-container nav ul {
    float: right;
  }
}

/* #endregion */

/* ================================================================== */
/* #region 8. Post Cards                                               */
/* ================================================================== */

a.event-post {
  width: 100%;
  margin-bottom: 4rem;
}

a.event-post .photo {
  background: var(--color-surface);
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  border-radius: 1rem;
}

a.event-post .photo img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a.event-post .photo .photo__placeholder {
  z-index: 0;
  filter: blur(8px);
  transform: scale(1.1); /* overshoot slightly to hide blur edges */
}

a.event-post .photo .photo__full {
  z-index: 1;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 0.5s ease,
    transform 0.2s ease;
}

a.event-post .photo .photo__full.loaded {
  opacity: 1;
}

a:hover .photo .photo__full.loaded {
  transform: scale(1.1);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

a.event-post .post-details {
  margin: 1rem 0 0.7rem 0;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

a.event-post .post-details .icon {
  display: inline-block;
  width: 22px;
  height: 22px;
}

a.event-post .post-details .post-cat,
a.event-post .post-details time {
  display: inline-block;
  margin: 0;
}

a.event-post .post-details .post-cat {
  margin-left: 0.3rem;
}
a.event-post .post-details time {
  margin-left: 0.6rem;
}

/* #endregion */

/* ================================================================== */
/* #region 9. Homepage                                                  */
/* ================================================================== */

/* ── Entry content (shared) ────────────────────────────────────── */

.entry-content p,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content li,
.entry-content blockquote,
.entry-content table {
  margin-left: auto;
  margin-right: auto;
}

.entry-content p img {
  max-width: 100%;
}

.entry-content figure {
  margin: 2.5rem auto;
}

.entry-content figure.is-portrait {
  max-width: 60rem;
}

.entry-content ul {
  list-style-type: disc;
  list-style-position: inside;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 2rem auto 0.5rem auto;
}

.wp-block-image figcaption {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8em;
}

@media screen {
  .entry-content p,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content li,
  .entry-content blockquote,
  .entry-content table {
    max-width: 100vw;
  }
}

@media screen and (min-width: 768px) {
  .entry-content p,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content li,
  .entry-content blockquote,
  .entry-content table {
    max-width: 50rem;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 1rem;
  }
}

@media screen and (min-width: 1800px) {
  html {
    font-size: 1.2rem;
  }

  .entry-content p,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content li,
  .entry-content blockquote,
  .entry-content table {
    max-width: 50rem;
  }
}

/* ── Homepage layout ───────────────────────────────────────────── */

@media (min-width: 0) {
  main.home .runposts {
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 0 2rem;
    grid-auto-rows: max-content;
  }

  main.home .runposts a {
    grid-column: 1 / span 12;
  }
  main.home .runposts a .photo {
    padding-bottom: 100%;
  }

  main.home .strava-feed {
    position: relative;
    grid-column: 1 / span 12;
    padding: 2rem 0;
    text-align: left;
  }

  main.home .strava-feed:after {
    content: "";
    z-index: -3;
    position: absolute;
    background-image: url(../images/bg-strava.webp);
    background-size: 800px;
    background-color: var(--color-blog-cream);
    margin-right: -4rem;
    margin-left: -4rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  main.home .strava-feed iframe {
    width: 100%;
    max-width: 600px;
  }

  main.home .blogsidebar {
    overflow: visible;
    position: relative;
    isolation: isolate;
    grid-column: 1 / span 16;
  }

  main.home .blogsidebar .miniheader,
  main.home .blogsidebar a h4,
  main.home .blogsidebar a p,
  main.home .blogsidebar a time {
    color: var(--color-blog-cream);
  }

  main.home .blogsidebar a {
    padding: 2rem 0;
  }
  main.home .blogsidebar a h4 {
    margin: 0.8rem 0;
  }
  main.home .blogsidebar a p {
    margin-bottom: 4rem;
  }

  main.home .blogsidebar:before {
    content: "";
    z-index: -3;
    position: absolute;
    margin-right: -4rem;
    margin-left: -4rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-blog-head-bg);
  }

  main.home .blogsidebar:after {
    content: "";
    z-index: -2;
    position: absolute;
    margin-right: -4rem;
    margin-left: -4rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-blog-head-accent);
    -webkit-mask-image: url("../images/bg-post-header.svg");
    mask-image: url("../images/bg-post-header.svg");
    -webkit-mask-size: 2000px;
    mask-size: 2000px;
    -webkit-mask-position: 300px left;
    mask-position: 300px left;
  }

  main.home #bio {
    position: relative;
    padding: 2rem 0;
  }

  main.home #bio #photo {
    display: block;
    width: 6em;
    height: 6em;
    background-color: var(--grey-5);
    border-radius: 100%;
    background-image: url(../images/PTBio.jpg);
    background-size: cover;
  }

  main.home #bio h5 {
    color: var(--color-blog-cream);
    margin: 0.8em 0 0.5em 0;
  }
  main.home #bio p {
    color: var(--color-blog-cream);
  }

  main.home #bio:after {
    content: "";
    z-index: -1;
    position: absolute;
    margin-right: -4rem;
    margin-left: -4rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--blog-1);
  }
}

@media (min-width: 600px) {
  main.home .runposts a {
    grid-column: span 6;
  }
  main.home .strava-feed iframe {
    width: 80%;
  }

  main.home .blogsidebar {
    grid-column: 1 / span 12;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  body.homepage header.masthead .nav-container {
    grid-column: 1 / span 8;
    margin-right: 4rem;
  }

  main.home .miniheader {
    grid-column: 1 / span 12;
  }

  main.home .runposts {
    grid-column: 1 / span 8;
    padding-right: 4rem;
    margin-bottom: 4rem;
  }

  main.home .runposts a .photo {
    padding-bottom: 90%;
  }
  main.home .strava-feed {
    text-align: center;
  }

  main.home .strava-feed:after {
    margin: 0;
    border-radius: 1rem;
  }

  main.home .blogsidebar {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
  }

  main.home .blogsidebar .miniheader,
  main.home .blogsidebar .blog-posts {
    margin-left: 50px;
  }

  main.home .blogsidebar .blog-posts {
    flex: 1 0 auto;
  }

  main.home .blogsidebar:before,
  main.home .blogsidebar:after {
    margin-right: -2000px;
    margin-left: 0;
    margin-top: -300px;
  }

  main.home #bio {
    margin-top: 0;
    padding: 4rem 0 4rem 50px;
    grid-column: 9 / span 3;
  }

  main.home #bio:after {
    margin-right: -2000px;
    margin-left: 0;
  }
}

/* ── Dark mode overrides ───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* Strava feed: cream is too light on a near-black page */
  main.home .strava-feed:after {
    background-color: var(--color-others-head-bg);
  }

  /* Bio photo placeholder: light grey circle looks odd on dark bg */
  main.home #bio #photo {
    background-color: var(--grey-3);
  }
}

/* #endregion */

/* ================================================================== */
/* #region 10. Post Listing                                             */
/* ================================================================== */

@media screen {
  main.category {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 0 2rem;
  }

  main.category a {
    grid-column: span 12;
  }
  main.category a .photo {
    padding-bottom: 100%;
  }
  main.category .miniheader {
    grid-column: 1 / span 12;
  }
}

@media screen and (min-width: 600px) {
  main.category.all a {
    grid-column: span 6;
  }
}

@media screen and (min-width: 768px) {
  main.category a {
    grid-column: span 6;
  }
  main.category.all a {
    grid-column: span 4;
  }
}

@media screen and (min-width: 1024px) {
  main.category a {
    grid-column: span 4;
  }
  main.category a .photo {
    padding-bottom: 90%;
  }
  main.category.all a {
    grid-column: span 3;
  }
}

/* #endregion */

/* ================================================================== */
/* #region 11. Single Post                                              */
/* ================================================================== */

.post-hero {
  position: relative;
}

.post-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

header.post-header {
  position: relative;
  text-align: center;
  margin: 0 auto 5.5rem;
  max-width: 90rem;
  padding: 0 0.5rem;
}

header.post-header time {
  display: block;
  position: absolute;
  bottom: -3.5rem;
  margin: 0;
  width: 100%;
  font-family: "pano_regular", "arial", sans-serif;
  text-transform: uppercase;
}

header.post-header h2 {
  font-size: 2.074rem;
  padding: 6rem 0;
  color: var(--blog-2);
}

.post-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: url("../images/bg-post-header.svg");
  mask-image: url("../images/bg-post-header.svg");
  -webkit-mask-size: 2100px;
  mask-size: 2100px;
  -webkit-mask-position: center;
  mask-position: center;
}

.post-hero > header {
  position: relative;
  z-index: 3;
}

/* ── Post header colour overrides ──────────────────────────────── */

.single.ultras header.post-header h2 {
  text-shadow:
    2px 2px 0 var(--color-ultras-head-bg),
    -2px -2px 0 var(--color-ultras-head-bg),
    2px -2px 0 var(--color-ultras-head-bg),
    -2px 2px 0 var(--color-ultras-head-bg);
}

.single.other header.post-header h2 {
  text-shadow:
    2px 2px 0 var(--color-others-head-bg),
    -2px -2px 0 var(--color-others-head-bg),
    2px -2px 0 var(--color-others-head-bg),
    -2px 2px 0 var(--color-others-head-bg);
}

.single.marathons header.post-header h2 {
  text-shadow:
    2px 2px 0 var(--color-marathons-head-bg),
    -2px -2px 0 var(--color-marathons-head-bg),
    2px -2px 0 var(--color-marathons-head-bg),
    -2px 2px 0 var(--color-marathons-head-bg);
}

.single.ultras    .post-hero:before { background-color: var(--color-ultras-head-bg); }
.single.marathons .post-hero:before { background-color: var(--color-marathons-head-bg); }
.single.blog      .post-hero:before { background-color: var(--color-blog-head-bg); }
.single.other     .post-hero:before { background-color: var(--color-others-head-bg); }

.single.ultras .post-hero:after {
  background-color: var(--color-ultras-head-accent);
}
.single.marathons .post-hero:after {
  background-color: var(--color-marathons-head-accent);
}
.single.blog .post-hero:after {
  background-color: var(--color-blog-head-accent);
}
.single.other .post-hero:after {
  background-color: var(--color-others-head-accent);
}

.single.blog header.post-header h2 {
  color: var(--color-blog-cream);
  text-shadow: none;
}

/* ── Article / entry content ───────────────────────────────────── */

.entry-content {
  grid-column: 1 / span 12;
}

figure {
  margin: 0 0 1rem 0;
}

iframe {
  margin: 0 auto;
}

/* ── Responsive heading sizes ──────────────────────────────────── */

@media (min-width: 600px) {
  header.post-header h2 {
    font-size: 2.488rem;
    padding: 8rem 0;
  }

  .post-hero:after {
    -webkit-mask-size: 2800px;
    mask-size: 2800px;
  }
}

@media (min-width: 1024px) {
  header.post-header h2 {
    font-size: 2.986rem;
    padding: 8rem 0;
  }

  .single.ultras header.post-header h2 {
    text-shadow:
      3px 3px 0 var(--color-ultras-head-bg),
      -3px -3px 0 var(--color-ultras-head-bg),
      3px -3px 0 var(--color-ultras-head-bg),
      -3px 3px 0 var(--color-ultras-head-bg);
  }

  .single.other header.post-header h2 {
    text-shadow:
      3px 3px 0 var(--color-others-head-bg),
      -3px -3px 0 var(--color-others-head-bg),
      3px -3px 0 var(--color-others-head-bg),
      -3px 3px 0 var(--color-others-head-bg);
  }

  .single.marathons header.post-header h2 {
    text-shadow:
      3px 3px 0 var(--color-marathons-head-bg),
      -3px -3px 0 var(--color-marathons-head-bg),
      3px -3px 0 var(--color-marathons-head-bg),
      -3px 3px 0 var(--color-marathons-head-bg);
  }

  .single.blog header.post-header h2 {
    text-shadow: none;
  }
}

@media (min-width: 1800px) {
  header.post-header h2 {
    font-size: 2.986rem;
    padding: 12rem 0;
  }
}

/* #endregion */

/* ================================================================== */
/* #region 12. Post Navigation                                          */
/* ================================================================== */

nav.post-nav {
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 1rem 0;
  margin-top: 4rem;
  grid-column: 1 / span 12;
}

nav.post-nav .post-next,
nav.post-nav .post-previous {
  position: relative;
  font-size: 1rem;
  color: var(--color-text);
  display: grid;
}

nav.post-nav .post-next img,
nav.post-nav .post-previous img {
  display: none;
  margin: 0;
}

nav.post-nav .post-next .info,
nav.post-nav .post-previous .info {
  display: inline-block;
  align-self: center;
}

nav.post-nav .post-next .info h4,
nav.post-nav .post-previous .info h4 {
  margin-bottom: 0.5rem;
  font-size: 0.833rem;
}

nav.post-nav .post-next {
  grid-column: 2;
  grid-template-columns: 1fr auto 1rem;
  text-align: right;
}

nav.post-nav .post-next img {
  grid-column: 2;
}
nav.post-nav .post-next .info {
  grid-column: 1;
  padding-left: 0.5rem;
  margin-right: 0.7rem;
}

nav.post-nav .post-previous {
  grid-template-columns: 1rem auto 1fr;
  text-align: left;
}

nav.post-nav .post-previous img {
  grid-column: 2;
}
nav.post-nav .post-previous .info {
  grid-column: 3;
  padding-right: 0.5rem;
  margin-left: 0.7rem;
}

nav.post-nav .post-previous:before {
  content: "←";
  grid-column: 1;
  font-family: "pano_bold", "arial", sans-serif;
  align-self: center;
}

nav.post-nav .post-next:after {
  content: "→";
  grid-column: 3;
  font-family: "pano_bold", "arial", sans-serif;
  align-self: center;
}

@media (min-width: 600px) {
  nav.post-nav .post-next img,
  nav.post-nav .post-previous img {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    margin: 0 0.7rem;
    border-radius: 0.5rem;
  }

  nav.post-nav .post-next .info,
  nav.post-nav .post-previous .info {
    margin: 0;
  }
}

/* #endregion */