@font-face {
  font-family: "Omphales";
  src: url("/assets/fonts/Omphales-Oldstyle.woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Omphales";
  src: url("/assets/fonts/Omphales-Italic.woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Omphales";
  src: url("/assets/fonts/Omphales-Bold.woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --accent: #b12a17; /* your chosen accent (hsl(8 73.3% 33.7%)) */
}

html{ font-size: 18px; }
body{ font-size: 1rem; line-height: 1.5; }

body{
  background: hsl(0 0% 86%);
  color: black;
  font-family: "Omphales", system-ui, serif;
  font-synthesis: none;
  margin: 0;
}

.content{
  width: min(80%, 72ch);
  margin: 0 auto;
}

strong, b{ font-weight: 700; }

h2{
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "smcp" 1;
  letter-spacing: .03em;
}

h3{
  font-weight: normal;
  font-style: normal;
}

/* =========================
   GLOBAL LINKS (BODY TEXT)
   ========================= */
a:link,
a:visited{
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus-visible{
  color: var(--accent);
}

/* =========================
   HEADER / NAV
   ========================= */
.site-header{
  display: flex;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}

.site-nav{
  width: min(80%, 72ch);
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: nowrap;          /* desktop: keep one line */
  white-space: nowrap;        /* desktop: prevent link text wrapping */
}

/* Nav links are black until hover */
.site-nav a:link,
.site-nav a:visited{
  color: inherit;
  text-decoration: none;
  font-variant: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .03em;
  font-size: 1.3em;
}

/* Nav hover uses accent */
.site-nav a:hover,
.site-nav a:focus-visible{
  color: var(--accent);
}

/* Typemark */
.site-nav a.nav-home{
  margin-right: auto;
  font-family: "Omphales", serif;
  font-weight: 700;          /* triggers your blackletter bold face */
  font-size: 2.1em;
  line-height: 1;
  white-space: nowrap;

  /* disable small caps for typemark only */
  font-variant: normal !important;
  font-variant-caps: normal !important;
  font-feature-settings: "smcp" 0, "c2sc" 0 !important;
  text-transform: none !important;

  letter-spacing: -0.02em;
}

/* MOBILE NAV LAYOUT */
@media (max-width: 700px){
  .site-nav{
    width: 92%;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;          /* mobile: allow wrapping */
    white-space: normal;      /* mobile: allow text wrapping */
  }

  .site-nav a.nav-home{
    flex-basis: 100%;
    margin-right: 0;
    text-align: center;
    font-size: 1.8em;
  }

  .site-nav a:link,
  .site-nav a:visited{
    font-size: 1.05em;
  }
}

/* =========================
   HOME GRID
   ========================= */
.home-grid{
  width: min(70%, 72ch);
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1rem;
}

.home-grid .tile{
  display: block;
  padding: 1rem 1rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.home-grid .tile:hover,
.home-grid .tile:focus-visible{
  color: var(--accent);
}

@media (max-width: 700px){
  .home-grid{
    width: 92%;
    grid-template-columns: 1fr;
  }
}

/* =========================
   CLOCK
   ========================= */
.eyr-clock{
  width: min(70%, 72ch);
  margin: 1.5rem auto;
  text-align: center;
}