/* Custom styles for digitalnative.net */

/* Inter for everything the reader reads; Inconsolata kept for code only.
   Inter also sets the logotype, so the wordmark and the page agree. */
:root {
  --pico-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pico-font-family-monospace: "Inconsolata", "SFMono-Regular", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

  /* One spacing scale, so vertical rhythm is a choice rather than an accident. */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Comfortable reading measure. Headings opt out of it deliberately. */
  --measure: 68ch;

  /* The single horizontal inset everything aligns to. */
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* The two feet of the lockup, cut out of it as separate files. Used as masks
     rather than images so the colour is set here and the marks can sit at the
     same grey as the hairlines they share a line with. */
  --foot-left: url("../images/dn-footprint-left.e47491080274.svg");
  --foot-right: url("../images/dn-footprint-right.588a9db533d7.svg");
  --foot-trail: url("../images/dn-footprint-trail.b7e86e1bd23f.svg");

  /* One hairline colour, so rules across the page agree. */
  --rule: #1c1c1c;
}

[data-theme="dark"] {
  --pico-primary: #888;
  --pico-primary-hover: #aaa;
  --pico-primary-focus: rgba(136, 136, 136, 0.25);
  --pico-primary-background: #333;
  --pico-primary-hover-background: #444;
  --pico-primary-border: #555;
  --pico-primary-hover-border: #666;
  --pico-primary-inverse: #ccc;
}

body {
  font-family: var(--pico-font-family);
  background-color: black;
}

/* Code keeps the monospace face. Everything else inherits from body, which is
   why the previous blanket `* { font-family: ... !important }` rule is gone:
   it also overrode <code>, so nothing could opt out. */
code, pre, kbd, samp, tt {
  font-family: var(--pico-font-family-monospace);
}

body {
  line-height: 1.55;
  font-size: 1rem;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.011em;
  margin-block: var(--space-4) var(--space-2);
  text-wrap: balance;
}

/* Nothing should collide with the top of its own section. */
:is(h1, h2, h3):first-child {
  margin-block-start: 0;
}

p {
  margin-bottom: var(--space-2);
  max-width: var(--measure);
}

a {
  font-weight: bold;
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #aaa;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Full page video background */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}

/* The video is decorative. Without a scrim the body copy sits on moving
   high-contrast noise, which is most of why the page felt cheap. */
.video-background::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Text is a left-aligned column capped at ~68ch, so only the left of a wide
     viewport needs protecting. Veiling the whole screen evenly is what made the
     video almost invisible. */
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.64) 36%,
    rgba(0, 0, 0, 0.24) 66%,
    rgba(0, 0, 0, 0.08) 100%);
}

/* Below this the text is full width rather than a left column, so a horizontal
   gradient no longer lines up with it. A light even veil instead. */
@media (max-width: 900px) {
  .video-background::after {
    background: rgba(0, 0, 0, 0.58);
  }
}

.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Header, main and footer all use .container-fluid, so this is the one rule
   that sets the shared left/right edge. Nothing else may add horizontal
   padding, or the page stops lining up. */
.container-fluid {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

/* Ensure content is readable over video */
.template-homepage {
  min-height: 100vh;
}

.template-homepage main {
  /* Was space-5. The opening paragraph is set as a lead now and carries its
     own weight, so it no longer needs a wall of air above it to look placed. */
  padding-block: var(--space-4) var(--space-4);
}

/* The homepage opens on a paragraph rather than a heading, so that paragraph
   has to do a heading's job. Larger, tighter and on a shorter measure than
   body copy, with room beneath it so the first section reads as the next
   thing rather than as part of it. */
.page-lead {
  margin-block-end: var(--space-5);
}

.page-lead p {
  font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.7rem);
  line-height: 1.28;
  font-weight: 450;
  letter-spacing: -0.014em;
  /* A long measure at this size is unreadable; ch tracks the larger type.
     38ch lands it at four lines on a desktop: narrower stacks it into a tall
     thin column with the right of the page left empty. */
  max-width: 38ch;
  text-wrap: balance;
  color: #e8e8e8;
}

@media (max-width: 700px) {
  /* Balanced wrapping on a narrow column produces ragged short lines. */
  .page-lead p {
    max-width: none;
    text-wrap: pretty;
  }
}

.template-homepage section {
  margin-block-end: var(--space-4);
}

/* Page and section heads carry a foot from the lockup. Reusing the mark we
   already own is the only iconography here that cannot look borrowed; a set of
   topic glyphs would be a second visual language competing with the logo. */
.template-homepage main :is(h1, section > h2) {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  border-block-end: 1px solid var(--rule);
  padding-block-end: var(--space-2);
}

.template-homepage main :is(h1, section > h2)::before {
  content: "";
  flex: 0 0 auto;
  /* The marks are cropped to the same box, so one ratio serves both. */
  width: 0.42em;
  height: 0.84em;
  align-self: center;
  background-color: #6E6E6E;
  -webkit-mask: var(--foot-left) center / contain no-repeat;
  mask: var(--foot-left) center / contain no-repeat;
}

/* Feet alternate down the page, so the sections read as a stride rather than
   as one stamp repeated. */
.template-homepage main section:nth-of-type(even) > h2::before {
  -webkit-mask-image: var(--foot-right);
  mask-image: var(--foot-right);
}

/* A section can set itself as short items side by side. Multi-column rather
   than a grid: the items are plain paragraphs inside a single rich text field,
   and break-inside keeps each one whole, so neither the template nor the CMS
   has to know how many there are. The column-width in the shorthand means this
   drops to fewer columns on its own, with no breakpoint to maintain. */
.template-homepage section.layout-columns {
  /* 13rem, not 16: Pico scales the root font size up to 20px on a wide
     viewport, so a column-width set in rem grows with it and 16rem no longer
     fits three across the 1100px container. */
  columns: 13rem 3;
  column-gap: var(--space-4);
}

/* The item rules already draw a line across the section at very nearly the
   height the heading rule would sit at, so in a columns section the heading
   drops its own. Two hairlines 17px apart read as a mistake rather than as
   structure; one line broken by the column gaps reads as deliberate. */
.template-homepage section.layout-columns > h2 {
  column-span: all;
  border-block-end: 0;
  padding-block-end: 0;
  margin-block-end: var(--space-3);
}

/* A trail closing a columns section belongs to the section, not to a column:
   without this it is treated as another item and dealt into one of them. */
.template-homepage section.layout-columns > hr {
  column-span: all;
}

.template-homepage section.layout-columns p {
  /* The reading measure applies to a column of prose, not to a narrow item. */
  max-width: none;
  break-inside: avoid;
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--space-2);
}

/* The bold lead-in is the item's title, so it gets its own line. */
.template-homepage section.layout-columns p strong {
  display: block;
  margin-block-end: 0.35em;
  color: #ccc;
  font-weight: 650;
}

/* A rule inside body copy is walked rather than drawn: a centred trail of
   prints heading the way the page reads, which breaks the column more gently
   than a line across it.

   One mask image holding the whole trail, not a stack of pseudo-elements: each
   print needs its own rotation and its own alpha, and neither survives being
   expressed as CSS mask layers on a single box. */
.template-homepage main hr {
  border: 0;
  height: 2.6rem;
  margin-block: var(--space-4);
  background-color: #3a3a3a;
  /* Left, not centred. Every other thing on the page hangs off the container's
     left edge, and a centred trail was the one element breaking that spine.
     Walking out of the margin into the open right side reads better anyway. */
  -webkit-mask: var(--foot-trail) left center / auto 100% no-repeat;
  mask: var(--foot-trail) left center / auto 100% no-repeat;
}

/* Type scales with the viewport rather than stepping at two breakpoints, so
   there are no widths where it looks wrong. */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); }

@media (max-width: 768px) {
  .template-homepage main {
    padding-block: var(--space-4) var(--space-3);
  }
}

@media (max-width: 480px) {
  /* Video is hidden here for performance, so the scrim has nothing to sit on
     and the background is simply black. */
  .video-background {
    display: none;
  }
}

/* Header layout. Flex rather than a 1fr 1fr grid: the nav now sits at the
   right edge at every width instead of being pinned to the page midpoint and
   snapping at a single breakpoint. */
header .grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-3);
  grid-template-columns: none;
}

/* No padding here on purpose: the logo aligns to the container edge, which is
   the same edge as the body copy. The old padding-left put it 2rem adrift. */
.logo-container {
  align-self: center;
}

.logo-link {
  display: inline-block;
  line-height: 0;
}

/* The horizontal lockup (452x95) rather than the stacked one. A header is a
   horizontal band; a near-square mark leaves the nav floating in empty space
   beside it. The stacked cut is kept for standalone use. */
header img {
  width: min(230px, 62vw);
  height: auto;
}

/* Likewise no padding-right: it used to pull the nav 4rem in from the edge
   the rest of the page aligns to. */
.nav-container {
  align-self: center;
}

/* Header navigation styling */
.header-nav ul {
  gap: 1.5rem;
}

.header-nav li {
  margin: 0;
  align: right;
}

.header-nav a {
  font-weight: bold;
  padding: 0.2rem 0;
  text-decoration: none;
  color: #666;
  transition: color 0.2s ease;
}

.header-nav a:hover {
  color: #aaa;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Responsive header for mobile */
/* Toggle button: hidden above the breakpoint, where the nav shows in full. */
.nav-toggle {
  display: none;
  width: 44px;                 /* 44px is the usual minimum touch target */
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: #999;
  cursor: pointer;
  line-height: 0;
}

/* Three bars drawn from one element: the middle is the box, the outer two are
   pseudo-elements, so the open state can cross them into an X. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-toggle-bars {
  margin: 0 auto;
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

.nav-toggle:hover { color: #ddd; }

.nav-toggle:focus-visible {
  outline: 2px solid #666;
  outline-offset: 4px;
  border-radius: 2px;
}

@media (max-width: 700px) {
  header .grid {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
  }

  .logo-container,
  .nav-toggle { flex: 0 0 auto; }

  .nav-toggle { display: block; }

  /* Forced onto its own full-width row. Laid out as plain blocks rather than
     flex: the list is flex above this breakpoint, and leaving it flex here made
     the rows size to their text instead of filling the row. */
  .js .nav-container {
    flex: 1 0 100%;
    width: 100%;
    display: none;
  }

  .js header.nav-open .nav-container { display: block; }

  /* Without scripting the nav stays visible rather than being locked behind a
     button that cannot do anything. */
  .no-js .nav-toggle { display: none; }

  .header-nav { width: 100%; }

  .header-nav ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #1c1c1c;
  }

  .header-nav li {
    display: block;
    width: 100%;
    margin: 0;
  }

  /* Full-width rows so the whole line is a tap target, not just the words. */
  .header-nav a {
    display: block;
    width: 100%;
    padding: var(--space-2) 0;
    border-bottom: 1px solid #1c1c1c;
  }
}

/* Footer social links */
.social-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #555;
}

.social-links span {
  margin-right: 0.25rem;
}

.social-links a {
  color: #666;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: #aaa;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.social-links .sep {
  color: #333;
}

/* Footer copy sits under the links with a little air, and the version line
   should read as metadata rather than content. */
footer.container-fluid p {
  margin-block: var(--space-2) 0;
  max-width: var(--measure);
}

footer.container-fluid p:last-child {
  color: #3a3a3a;
  font-size: 0.8rem;
}

/* "Contact Us" was splitting across lines mid-phrase on narrow screens. */
main a {
  text-wrap: nowrap;
}