* { box-sizing: border-box; }

:root {
  --navy: #062f63;
  --blue: #0b5eb7;
  --bright-blue: #218bd6;
  --sky: #d9efff;
  --ice: #f5fbff;
  --white: #fff;
  --ink: #123152;
  --muted: #60758d;
  --line: #d5e5f2;
  --green: #13a85f;
  --shadow: 0 12px 30px rgba(4, 47, 99, .13);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: linear-gradient(180deg, #eaf5ff 0, #f8fbfe 46%, #eaf5ff 100%);
  color: var(--ink);
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================================
   CAUSEWAY COAST HEADER
   ========================================================= */

.site-header.coast-header {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  color: var(--navy);

  background:
    linear-gradient(
      90deg,
      #8fc7e7 0%,
      #cce9f8 13%,
      #eef9ff 29%,
      #f8fcff 50%,
      #eef9ff 68%,
      #b8def2 84%,
      #78b6dc 100%
    );

  border-bottom: 5px solid #28aee4;
}


/* ---------------------------------------------------------
   Main header layout
   --------------------------------------------------------- */

.coast-header-inner {
  position: relative;
  z-index: 5;

  width: min(1240px, calc(100% - 34px));
  min-height: 220px;
  margin: 0 auto;
  padding: 20px 0;

  display: grid;
  grid-template-columns: 170px minmax(430px, 1fr) 260px;
  align-items: center;
  gap: 24px;
}


/* ---------------------------------------------------------
   League emblem
   --------------------------------------------------------- */

.league-emblem {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
}

.league-emblem img {
  display: block;
  width: 154px;
  height: 154px;
  object-fit: contain;

  filter:
    drop-shadow(0 6px 8px rgba(2, 38, 76, .20))
    drop-shadow(0 1px 1px rgba(255,255,255,.8));
}


/* ---------------------------------------------------------
   League title
   --------------------------------------------------------- */

.league-heading {
  position: relative;
  z-index: 5;
  min-width: 0;
  text-align: center;
}

.league-heading h1 {
  margin: 0;

  color: #06396f;

  font-size: clamp(2rem, 3.7vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 900;

  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}

.league-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  margin-top: 11px;

  color: #0a4d89;

  font-size: clamp(.82rem, 1.45vw, 1.12rem);
  letter-spacing: .19em;
}

.league-subtitle strong {
  white-space: nowrap;
}

.league-subtitle span {
  width: 38px;
  height: 2px;
  flex: 0 1 38px;

  background: #1686c9;
  opacity: .75;
}

.league-motto {
  margin: 13px 0 0;

  color: #236694;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.88rem, 1.3vw, 1.08rem);
  font-style: italic;
  letter-spacing: .08em;
}

.league-motto b {
  padding: 0 8px;
  color: #20a7df;
  font-style: normal;
}

/* Ampersand in main header */
.brand-amp {
  color: #e31b23;
}


/* ---------------------------------------------------------
   Right side
   --------------------------------------------------------- */

.header-right {
  position: relative;
  z-index: 6;

  align-self: stretch;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;

  padding: 5px 0 2px;
}

.season-pill {
  padding: 8px 20px;

  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;

  background: linear-gradient(90deg, #073b74, #075a9c);
  color: #fff;

  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .07em;

  box-shadow: 0 5px 13px rgba(4, 48, 94, .20);
}

.causeway-signature {
  display: block;
  width: 235px;
  max-width: 100%;
  height: auto;

  filter:
  drop-shadow(0 1px 0 rgba(3, 47, 88, .85))
  drop-shadow(0 2px 2px rgba(3, 47, 88, .55))
  drop-shadow(0 0 5px rgba(0, 117, 181, .30));
}


.causeway-signature-large {
  display: block;
  width: 500px;
  max-width: 100%;
  height: auto;

  filter:
  drop-shadow(0 1px 0 rgba(3, 47, 88, .85))
  drop-shadow(0 2px 2px rgba(3, 47, 88, .55))
  drop-shadow(0 0 5px rgba(0, 117, 181, .30));
}


/* =========================================================
   LANDSCAPE
   ========================================================= */

.coast-scene {
  position: absolute;
  z-index: 1;
  inset: 0;

  overflow: hidden;
  pointer-events: none;
}


/* ---------------------------------------------------------
   Distant coast
   --------------------------------------------------------- */

.distant-coast {
  position: absolute;

  left: 15%;
  right: 13%;
  bottom: 18px;

  height: 56px;

  background:
    linear-gradient(
      180deg,
      rgba(72,136,169,.12),
      rgba(36,106,146,.30)
    );

  clip-path: polygon(
    0 78%,
    7% 62%,
    13% 68%,
    21% 42%,
    29% 55%,
    38% 34%,
    46% 55%,
    55% 46%,
    65% 62%,
    74% 44%,
    84% 65%,
    92% 53%,
    100% 72%,
    100% 100%,
    0 100%
  );
}


/* ---------------------------------------------------------
   Sea sweeps
   --------------------------------------------------------- */

.coast-sea {
  position: absolute;

  left: 10%;
  right: 8%;

  border-top-style: solid;
  border-radius: 50%;
}

.coast-sea-one {
  height: 75px;
  bottom: -45px;

  border-top-width: 5px;
  border-top-color: rgba(28,155,218,.55);

  transform: rotate(-1deg);
}

.coast-sea-two {
  height: 90px;
  bottom: -66px;

  border-top-width: 2px;
  border-top-color: rgba(255,255,255,.85);

  transform: rotate(1deg);
}


/* =========================================================
   GIANT'S CAUSEWAY — Mk II
   ========================================================= */

.causeway-landmark {
  position: absolute;
  left: -12px;
  bottom: -2px;

  width: 255px;
  height: 175px;

  opacity: .96;
}

.basalt {
  position: absolute;
  bottom: 0;

  width: 46px;

  background:
  linear-gradient(
    90deg,
    #052b56 0%,
    #06467d 30%,
    #0873b2 62%,
    #05355f 100%
  );

  clip-path: polygon(
    22% 0,
    78% 0,
    100% 10px,
    100% 100%,
    0 100%,
    0 10px
  );

  box-shadow:
    inset 6px 0 7px rgba(255,255,255,.09),
    inset -8px 0 9px rgba(0,20,50,.25);
}

/* Hexagonal top face */

.basalt::before {
  content: "";
  position: absolute;

  left: 0;
  top: 0;

  width: 46px;
  height: 22px;

  background:
  linear-gradient(
    135deg,
    #42a9d8,
    #187eb9 48%,
    #07568e
  );

  clip-path: polygon(
    22% 0,
    78% 0,
    100% 50%,
    78% 100%,
    22% 100%,
    0 50%
  );

  box-shadow: inset 0 -3px 4px rgba(0,30,60,.18);
}

/* Small highlight on the sea-facing edge */

.basalt::after {
  content: "";
  position: absolute;

  top: 20px;
  right: 5px;
  bottom: 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      rgba(140,210,240,.30),
      transparent 75%
    );
}

/*
   Deliberately irregular heights and positions.
   Causeway, not bar chart!
*/

.basalt-1 {
  left: 0;
  height: 75px;
}

.basalt-2 {
  left: 31px;
  height: 116px;
  z-index: 2;
}

.basalt-3 {
  left: 65px;
  height: 148px;
  z-index: 3;
}

.basalt-4 {
  left: 101px;
  height: 103px;
  z-index: 4;
}

.basalt-5 {
  left: 134px;
  height: 137px;
  z-index: 3;
}

.basalt-6 {
  left: 169px;
  height: 91px;
  z-index: 2;
}

.basalt-7 {
  left: 203px;
  height: 61px;
}

/* ---------------------------------------------------------
   Lower Causeway foreground
   Gives the columns a natural descent towards the sea
   --------------------------------------------------------- */

.causeway-landmark::after {
  content: "";

  position: absolute;

  left: 112px;
  bottom: -3px;

  width: 155px;
  height: 55px;


  background:
    linear-gradient(
      135deg,
      #063963 0%,
      #0873aa 46%,
      #05406e 100%
    );

  opacity: .95;


  clip-path: polygon(
     0% 58%,
     9% 43%,
    18% 52%,
    27% 29%,
    37% 43%,
    47% 20%,
    57% 37%,
    67% 15%,
    78% 35%,
    88% 24%,
   100% 46%,
   100% 100%,
     0% 100%
  );
}




/* =========================================================
    Mussenden Cliffs
   ========================================================= */
.mussenden-cliff {
  position: absolute;

  right: -20px;
  bottom: -1px;

  width: 330px;
  height: 118px;

  background:
    linear-gradient(
      145deg,
      #4d9ac5 0%,
      #217eaf 35%,
      #0b5b91 66%,
      #063b69 100%
    );

  clip-path: polygon(
     0% 78%,
     7% 67%,
    14% 70%,
    22% 55%,
    31% 59%,
    40% 46%,
    50% 50%,
    61% 31%,
    71% 37%,
    81% 25%,
    90% 31%,
   100% 21%,
   100% 100%,
     0% 100%
  );

  opacity: .96;
}

.mussenden-cliff::after {
  content: "";

  position: absolute;
  inset: 30% 0 0 18%;

  background:
    linear-gradient(
      135deg,
      transparent 0 20%,
      rgba(3,42,75,.24) 21% 34%,
      transparent 35% 47%,
      rgba(2,35,67,.30) 48% 63%,
      transparent 64% 74%,
      rgba(255,255,255,.08) 75% 84%,
      transparent 85%
    );
} 
 
 
 


/* =========================================================
   MUSSENDEN TEMPLE — HEADER SILHOUETTE

   Change --temple-width to resize the complete building.
   All internal measurements remain proportional.
   ========================================================= */
/*                                                                          =============================================Temple*/
.mussenden-temple {
    --temple-width: 68px;
    --temple-colour: #043f70;

    position: absolute;
    z-index: 5;

    right: 122px;
    bottom: 54px;

    width: var(--temple-width);
    height: auto;

    aspect-ratio: 1 / .84;

    filter:
        drop-shadow(
            0 2px 2px
            rgba(2, 31, 56, .22)
        );
}


/* =========================================================
   SHALLOW DOME
   ========================================================= */

.temple-dome {
    position: absolute;
    z-index: 3;

    left: 26%;
    top: 12%;

    width: 48%;
    height: 30%;

    background: var(--temple-colour);

    border-radius:
        50% 50% 12% 12%
        /
        78% 78% 22% 22%;
}


/* Finial stem */

.temple-dome::before {
    content: "";

    position: absolute;

    left: 43%;
    top: -20%;

    width: 12%;
    height: 20%;

    background: var(--temple-colour);

    border-radius:
        70% 70% 10% 10%;
}


/* Finial ornament */

.temple-dome::after {
    content: "";

    position: absolute;

    left: 40%;
    top: -51%;

    width: 20%;

    aspect-ratio: 1;

    background: var(--temple-colour);

    border-radius:
        50% 50% 42% 42%;

    clip-path:
        polygon(
            50% 0,
            79% 35%,
            68% 82%,
            50% 100%,
            32% 82%,
            21% 35%
        );
}


/* =========================================================
   DOUBLE ROUNDED CORNICE

   The HTML contains only one roof element, so ::before
   creates the narrow upper cornice.
   ========================================================= */

.temple-roof {
    position: absolute;
    z-index: 4;

    left: 16%;
    top: 35%;

    width: 67%;
    height: 8%;

    background: var(--temple-colour);

    border-radius: 50% / 45%;
}


/* Upper cornice */

.temple-roof::before {
    content: "";

    position: absolute;

    left: 3%;
    top: -38%;

    width: 96%;
    height: 100%;

    background: var(--temple-colour);

    border-radius: 50% / 45%;
}


/* =========================================================
   CYLINDRICAL STONE DRUM
   ========================================================= */

.temple-body {
    position: absolute;
    z-index: 0;

    left: 20%;
    top: 40%;

    width: 60%;
    height: 56%;

    display: block;

    padding: 0;
    border: 0;
    border-radius: 0;

    background: var(--temple-colour);
}


/*
   The old header HTML contains four <i> elements.
   They are no longer required.
*/

.temple-body i {
    display: none;
}


/* Subtle recessed vertical detail */

.temple-body::after {
    content: "";

    position: absolute;

    inset: 9% 13% 7%;

    opacity: .17;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 18%,
            #d7eeff 18% 23%
        );
}


/* =========================================================
   HEAVY STONE PLINTH
   ========================================================= */

.temple-base {
    position: absolute;
    z-index: 5;

    left: 3%;
    bottom: 2%;

    width: 94%;
    height: 13%;

    background: var(--temple-colour);

    border-radius: 0;

    clip-path:
        polygon(
            7% 0,
            93% 0,
            100% 100%,
            0 100%
        );
}


/* Remove any pseudo-element inherited from the old design */

.temple-base::after {
    content: none;
}
  


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  .coast-header-inner {
    grid-template-columns: 130px 1fr 185px;
    gap: 15px;
    min-height: 195px;
  }

  .league-emblem img {
    width: 122px;
    height: 122px;
  }

  .causeway-signature {
  position: relative;
  z-index: 7;

  display: block;

  width: 235px;
  max-width: 100%;
  height: auto;

  padding: 9px 13px 7px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(5,70,118,.42) 0%,
      rgba(8,91,145,.22) 48%,
      rgba(8,91,145,0) 74%
    );

  filter:
    drop-shadow(0 2px 2px rgba(0,45,80,.28));
}

  .causeway-landmark {
    opacity: .48;
  }

  .mussenden-cliff {
    opacity: .75;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .site-header.coast-header {
    min-height: 250px;
  }

  .coast-header-inner {
    width: min(100% - 20px, 620px);
    min-height: 250px;

    padding: 13px 0 28px;

    grid-template-columns: 82px 1fr;
    grid-template-areas:
      "logo season"
      "logo title"
      "signature signature";

    align-content: center;
    gap: 4px 12px;
  }

  .league-emblem {
    grid-area: logo;
  }

  .league-emblem img {
    width: 82px;
    height: 82px;
  }

  .league-heading {
    grid-area: title;
    text-align: left;
  }

  .league-heading h1 {
    font-size: clamp(1.38rem, 7vw, 2rem);
    line-height: 1;
  }

  .league-subtitle {
    justify-content: flex-start;
    gap: 7px;

    margin-top: 7px;

    font-size: clamp(.63rem, 3.1vw, .85rem);
    letter-spacing: .08em;
  }

  .league-subtitle span {
    display: none;
  }

  .league-motto {
    margin-top: 7px;

    font-size: .69rem;
    letter-spacing: .03em;
  }

  .league-motto b {
    padding: 0 3px;
  }

  .header-right {
    display: contents;
  }

  .season-pill {
    grid-area: season;
    justify-self: end;

    padding: 5px 10px;

    font-size: .62rem;
  }

  .causeway-signature {
    grid-area: signature;

    justify-self: center;

    width: min(250px, 70vw);
    margin-top: 19px;
  }

  .causeway-landmark {
    left: -25px;

    width: 155px;
    height: 110px;

    transform: scale(.72);
    transform-origin: bottom left;

    opacity: .6;
  }

  .mussenden-cliff {
    right: -75px;

    transform: scale(.78);
    transform-origin: bottom right;

    opacity: .65;
  }

  .distant-coast {
    left: 5%;
    right: 5%;

    opacity: .65;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .site-header.coast-header {
    min-height: 238px;
  }

  .coast-header-inner {
    min-height: 238px;

    grid-template-columns: 70px 1fr;
  }

  .league-emblem img {
    width: 68px;
    height: 68px;
  }

  .league-heading h1 {
    font-size: 1.35rem;
  }

  .league-subtitle {
    font-size: .62rem;
  }

  .league-motto {
    font-size: .61rem;
  }

  .season-pill {
    font-size: .56rem;
  }

  .causeway-signature {
    width: 205px;
  }
}

.main-nav {
  position: relative;
  z-index: 5;
  background: linear-gradient(90deg, #07346b, #064683);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

.nav-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.nav-links {
  display: flex;
  flex: 1 1 auto;
}

.nav-links a {
  padding: 15px 19px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .96rem;
  font-weight: 800;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease;
}

.nav-links a:hover,
.nav-links a.active { background: #1688d5; }

.chevron { font-size: 1.05em; opacity: .9; }

.site-search {
  display: flex;
  align-items: center;
  margin: 0 12px;
  gap: 0;
}

.site-search input {
  width: 170px;
  height: 34px;
  border: 0;
  border-radius: 18px 0 0 18px;
  padding: 0 12px;
  outline: 0;
}

.site-search button {
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 0 18px 18px 0;
  background: #fff;
  color: #0b4f8a;
  font-weight: 800;
  cursor: pointer;
}

.menu-toggle {
  display: none;
  width: 100%;
  border: 0;
  background: #083b73;
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

main {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 20px 0 34px;
}

.hero-card {
    position: relative;
    min-height: 355px;
    border-radius: 17px;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3,45,95,1) 0%,
            rgba(4,55,108,.98) 34%,
            rgba(5,70,126,.90) 48%,
            rgba(5,77,132,.55) 59%,
            rgba(5,77,132,.12) 72%,
            rgba(5,77,132,0) 100%
        ),
        url("/images/causewaycoastbowljack.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    box-shadow: var(--shadow);
}

/*.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 87% 43%, rgba(255,255,255,.25) 0 6%, transparent 7% 100%),
    repeating-linear-gradient(175deg, transparent 0 16px, rgba(255,255,255,.08) 16px 18px);
  opacity: .75;
}*/

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            175deg,
            transparent 0 16px,
            rgba(255,255,255,.055) 16px 18px
        );

    opacity: .65;
    pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 46px clamp(24px, 5vw, 52px);
  width: min(690px, 72%);
  color: #fff;
}

.hero-kicker {
  margin: 0 0 7px;
  font-size: .82rem;
  letter-spacing: .18em;
  font-weight: 800;
  opacity: .9;
}

.hero-content h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.02;
}

.hero-subtitle {
  margin: 7px 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.65rem, 4vw, 2.55rem);
  color: #fff;
}

.hero-copy {
  max-width: 560px;
  margin-bottom: 25px;
  font-size: 1.06rem;
  color: rgba(255,255,255,.95);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 800;
}

.button-light {
  background: #fff;
  color: #083b73;
}

.button-outline {
  border: 2px solid rgba(255,255,255,.75);
  color: #fff;
}

.hero-bowls {
  position: absolute;
  right: -30px;
  bottom: -20px;
  width: 52%;
  height: 95%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.12));
  transform: skewX(-6deg);
}

.mat {
  position: absolute;
  left: 8%;
  right: -3%;
  bottom: 0;
  height: 57%;
  background: linear-gradient(180deg, rgba(80,168,101,.1), rgba(35,143,75,.6));
  border-radius: 42% 36% 0 0;
  box-shadow: inset 0 12px 22px rgba(255,255,255,.08);
}

.bowl {
  position: absolute;
  width: 190px;
  height: 190px;
  right: 15%;
  bottom: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #77828a, #343e45 33%, #20272c 62%, #11181c 100%);
  box-shadow: inset -20px -27px 35px rgba(0,0,0,.36), 0 16px 30px rgba(0,0,0,.3);
}

.bowl.highlight {
  width: 88px;
  height: 88px;
  right: 27%;
  bottom: 8%;
  border: 6px solid #c9bfa7;
  background: radial-gradient(circle at 35% 28%, #9da7aa, #3c4346 48%, #191d20 100%);
}

.large-jack {
  position: absolute;
  width: 74px;
  height: 74px;
  right: 43%;
  bottom: 4%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: .85fr 1.55fr 1.55fr;
  gap: 18px;
  margin-top: 18px;
}

.panel {
  background: rgba(255,255,255,.97);
  border: 1px solid #d6e5f1;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px 13px;
  background: linear-gradient(90deg, #0a5cad, #0c74c3);
  color: #fff;
}

.panel-heading .section-label {
  color: rgba(255,255,255,.78);
}

.panel-heading h2 {
  margin: -2px 0 0;
  color: #fff;
  font-size: 1.23rem;
}

.heading-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-weight: 900;
}

.panel-link {
  margin-left: auto;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 800;
  color: #fff;
}

.quick-links-list {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.quick-links-list a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, #073975, #095995);
  color: #fff;
  font-weight: 800;
}

.quick-links-list a:nth-child(2),
.quick-links-list a:nth-child(4) {
  background: linear-gradient(90deg, #1479c7, #1f95df);
}

.quick-links-list b { font-size: 1.35rem; }

.result-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 17px;
  border-bottom: 1px solid var(--line);
}

.result-row:last-child { border-bottom: 0; }

.date-box {
  border-radius: 10px;
  background: #eef7fd;
  color: #1a5d99;
  padding: 8px 4px;
  text-align: center;
  line-height: 1.15;
}

.date-box strong,
.date-box span {
  display: block;
}

.date-box strong { font-size: .72rem; }
.date-box span { margin-top: 2px; font-weight: 900; }

.result-info strong,
.result-info span {
  display: block;
}

.result-info strong { color: #0a3f78; }
.result-info span { color: var(--muted); font-size: .82rem; }

.status {
  padding: 5px 11px;
  border-radius: 999px;
  background: #d8f6e6;
  color: #067543;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
}

.news-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 12px;
  border-bottom: 1px solid var(--line);
}

.news-item:last-child { border-bottom: 0; }

.news-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #e8f4fd;
  color: #0a5fa9;
  font-size: 1.1rem;
  font-weight: 900;
}

.news-item small,
.news-item strong,
.news-item span {
  display: block;
}

.news-item small {
  font-size: .68rem;
  color: #0b5c9c;
  font-weight: 900;
  letter-spacing: .05em;
}

.news-item strong {
  margin-top: 2px;
  color: #0a3e78;
  font-size: .95rem;
}

.news-item span {
  color: var(--muted);
  font-size: .8rem;
}

.news-item > b { color: #0a5fa8; font-size: 1.7rem; }

.news-flyer-thumb {
  display: block;
  width: 76px;
  max-height: 76px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  object-fit: cover;
}

.news-flyer-badge {
  display: inline-block !important;
  width: max-content;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #edf3f8;
  color: #0a5fa8 !important;
  font-weight: 800;
}

.news-item.result .news-icon {
  background: #d8f6e6;
  color: #067543;
}

.news-empty {
  margin: 16px;
  padding: 18px;
  border-radius: 11px;
  background: #f3f8fc;
  color: var(--muted);
  text-align: center;
}

.updates-page {
  width: min(100% - 32px, 920px);
  margin: 26px auto 50px;
}

.updates-page-heading,
.update-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.updates-page-heading { padding: 24px; margin-bottom: 18px; }
.updates-page-heading h2 { margin: 4px 0 8px; color: #083f79; }
.updates-page-heading p { margin: 0; color: var(--muted); }

.updates-list { display: grid; gap: 13px; }
.update-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 18px;
}
.update-card .news-icon { width: 44px; height: 44px; }
.update-card.result .news-icon { background: #d8f6e6; color: #067543; }
.update-card small { color: #0b5c9c; font-weight: 900; letter-spacing: .05em; }
.update-card h3 { margin: 4px 0 6px; color: #083f79; }
.update-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.update-card .update-body { margin-top: 12px; color: #173f66; line-height: 1.58; }
.update-card .update-body p { margin: 0 0 11px; }
.update-card .update-body p:last-child { margin-bottom: 0; }
.update-card .update-body h3 { margin: 15px 0 8px; color: #083f79; font-size: 1.08rem; }
.update-card .update-body ul,
.update-card .update-body ol { margin: 9px 0 13px; padding-left: 25px; }
.update-card .update-body li { margin: 4px 0; }
.update-card .update-body a { color: #075f9e; font-weight: 900; text-decoration: underline; }

.update-flyer {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  color: #0a5fa8;
  font-weight: 900;
}

.update-flyer img {
  display: block;
  width: min(100%, 430px);
  max-height: 560px;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: contain;
  background: #f4f8fb;
}

.pdf-flyer-icon {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  min-height: 52px;
  border-radius: 9px;
  background: #dfeef9;
  color: #07578f;
  font-size: .82rem;
  font-weight: 900;
}

.public-notice-details {
  margin-top: 14px;
  border: 1px solid #c9dce9;
  border-radius: 9px;
  overflow: hidden;
  background: #f7fbfe;
}

.public-notice-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  color: #075f9e;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.public-notice-details summary::-webkit-details-marker { display: none; }
.public-notice-details summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: #dceefa;
  font-size: 1.1rem;
}
.public-notice-details[open] summary {
  border-bottom: 1px solid #d6e4ee;
  background: #edf7fd;
}
.public-notice-details[open] summary::after { content: "−"; }
.details-close-text { display: none; }
.public-notice-details[open] .details-open-text { display: none; }
.public-notice-details[open] .details-close-text { display: inline; }
.public-notice-content { padding: 4px 14px 16px; }
.update-card:target {
  border-color: #218bd0;
  box-shadow: 0 0 0 3px rgba(33, 139, 208, .14), var(--shadow);
  scroll-margin-top: 18px;
}

@media (max-width: 520px) {
  .updates-page { width: min(100% - 18px, 920px); }
  .update-card { grid-template-columns: 40px 1fr; padding: 14px; gap: 10px; }
}

.welcome-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 94px;
  margin-top: 18px;
  padding: 18px 23px;
  overflow: hidden;
  background: linear-gradient(90deg, #eaf7ff, #d7eeff);
  border: 1px solid #c7dfef;
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.welcome-icon {
  color: #0a5c9f;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .1em;
}

.welcome-copy {
  position: relative;
  z-index: 1;
  max-width: 72%;
}

.welcome-strip .section-label { margin-bottom: 0; }
.welcome-strip h2 { margin: 0; font-size: 1.22rem; color: #0a3f79; }
.welcome-strip p:last-child { margin: 2px 0 0; color: #55718d; }

.welcome-art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.welcome-coastline {
  position: absolute;
  right: -4%;
  bottom: 6px;
  width: 92%;
  height: 43px;
  background: #0a4b88;
  clip-path: polygon(0 100%, 8% 78%, 19% 72%, 31% 47%, 45% 58%, 57% 33%, 69% 44%, 78% 18%, 88% 29%, 100% 12%, 100% 100%);
  opacity: .96;
}

.welcome-sea-line {
  position: absolute;
  left: 1%;
  bottom: 17px;
  width: 66%;
  height: 30px;
  border-top: 4px solid #198ddd;
  border-radius: 50%;
  transform: rotate(-3deg);
}

.welcome-sea-line-two {
  left: 11%;
  bottom: 9px;
  width: 58%;
  border-top-color: #5ab6ec;
}

/* =========================================================
   MUSSENDEN TEMPLE SILHOUETTE

   Change --temple-width to resize the entire building.
   Every other measurement scales proportionally.
   ========================================================= */

.welcome-temple {

    --temple-width:
        118px;

    --temple-colour:
        #0a4b88;


    position:
        absolute;

    right:
        8%;

    bottom:
        18px;


    width:
        var(--temple-width);

    aspect-ratio:
        1 / .84;


    filter:
        drop-shadow(
            0 3px 2px
            rgba(3, 47, 91, .16)
        );

}


/*
   SHALLOW DOMED ROOF
*/

.welcome-temple-dome {

    position:
        absolute;

    z-index:
        3;

    left:
        26%;

    top:
        12%;


    width:
        48%;

    height:
        30%;


    background:
        var(--temple-colour);


    border-radius:
        50% 50% 12% 12%
        /
        78% 78% 22% 22%;

}


/*
   FINIAL STEM
*/

.welcome-temple-dome::before {

    content:
        "";

    position:
        absolute;

    left:
        43%;

    top:
        -20%;


    width:
        12%;

    height:
        20%;


    background:
        var(--temple-colour);

    border-radius:
        70% 70% 10% 10%;

}


/*
   FINIAL ORNAMENT
*/

.welcome-temple-dome::after {

    content:
        "";

    position:
        absolute;

    left:
        40%;

    top:
        -51%;


    width:
        20%;

    aspect-ratio:
        1;


    background:
        var(--temple-colour);

    border-radius:
        50% 50% 42% 42%;

    clip-path:
        polygon(
            50% 0,
            79% 35%,
            68% 82%,
            50% 100%,
            32% 82%,
            21% 35%
        );

}

/*
   BROAD CIRCULAR CORNICE
*/

.welcome-temple-roof-atop {

    position:
        absolute;

    z-index:
        4;

    left:
        18%;  /*Move cornicing from left towards middle, higher number  = more to right */

    top:
        32%;


    width:
        64%;  /*total with of cornicing */

    height:
        8%;


    background:
        var(--temple-colour);


    border-radius:
        50%/ 45%;

}


/*
   BROAD CIRCULAR CORNICE
*/

.welcome-temple-roof {

    position:
        absolute;

    z-index:
        4;

    left:
        16%;  /*Move cornicing from left towards middle, higher number  = more to right */

    top:
        35%;


    width:
        67%;  /*total with of cornicing */

    height:
        8%;


    background:
        var(--temple-colour);


    border-radius:
        50%/ 45%;

}


/*
   CYLINDRICAL STONE DRUM

   The very slight taper reproduces the perspective
   and curved outline visible in the photograph.
*/

.welcome-temple-body {

    position:
        absolute;

    z-index:
        0;  /* position coming outof page above other elements? ,2*/

    left:
        20%; /*moves from left side of plinth horizontally, 13% */

    top:
        40%; /*brings top of main down*/


    width:
        60%; /*width of main, 74*/

    height:
        56%;  /*height of main building*/


    background:
        var(--temple-colour);


    /*clip-path:
        polygon(
            3% 0,
            97% 0,
            92% 100%,
            8% 100%
        );*/		/* causes shape to form rhombus */

}


/*
   A tiny amount of recessed vertical detail keeps the
   silhouette recognisable without making it fussy.
*/

.welcome-temple-body::after {

    content:
        "";

    position:
        absolute;

    inset:
        9% 13% 7%;


    opacity:
        .17;


    background:
        repeating-linear-gradient(
            90deg,

            transparent
                0 18%,

            #d7eeff
                18% 23%
        );

}


/*
   HEAVY STONE PLINTH
*/

.welcome-temple-base {

    position:
        absolute;

    z-index:
        5;

    left:
        3%;

    bottom:
        2%;


    width:
        94%;

    height:
        13%;


    background:
        var(--temple-colour);


    clip-path:
        polygon(
            7% 0,
            93% 0,
            100% 100%,
            0 100%
        );

}

.site-footer {
  margin-top: 18px;
  background: #042f64;
  color: #fff;
}

.footer-inner {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  align-items: center;
  gap: 18px;
}

.footer-inner strong,
.footer-inner span {
  display: inline-block;
}

.footer-inner span {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.35);
  color: #cfe5f8;
}

.footer-inner nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: .88rem;
}

.footer-inner nav a:hover { text-decoration: underline; }

.footer-tagline {
  margin: 0;
  text-align: right;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.08rem;
  color: #cbe8fb;
}


/* =========================================================
   WELCOME PANEL — TABLET
   ========================================================= */

@media (max-width: 760px) {

    /*
       Reserve a separate scenic area beneath the wording.
       This prevents the temple overlapping or compressing
       the text.
    */

    .welcome-strip {

        display:
            grid;

        grid-template-columns:
            auto 1fr;

        align-items:
            start;

        column-gap:
            13px;

        row-gap:
            4px;


        min-height:
            178px;

        padding:
            18px 20px 88px;

    }


    .welcome-icon {

        align-self:
            center;

        margin-top:
            7px;

        font-size:
            1rem;

    }


    .welcome-copy {

        max-width:
            100%;

        padding:
            0;

    }


    .welcome-strip h2 {

        font-size:
            1.12rem;

        line-height:
            1.25;

    }


    .welcome-strip p:last-child {

        margin-top:
            5px;

        line-height:
            1.4;

    }


    /*
       The artwork becomes a full-width band beneath
       the text.
    */

    .welcome-art {

        right:
            0;

        bottom:
            0;


        width:
            100%;

        height:
            84px;


        opacity:
            .92;

    }


    /*
       The width automatically varies between 80px
       and 94px according to the screen width.
    */

    .welcome-temple {

        --temple-width:
            clamp(
                80px,
                13vw,
                94px
            );


        right:
            clamp(
                16px,
                5vw,
                34px
            );

        bottom:
            3px;

    }


    .welcome-coastline {

        right:
            -3%;

        bottom:
            -2px;


        width:
            61%;

        height:
            34px;

    }


    .welcome-sea-line {

        left:
            2%;

        bottom:
            16px;


        width:
            57%;

        height:
            25px;

        border-top-width:
            3px;

    }


    .welcome-sea-line-two {

        left:
            12%;

        bottom:
            8px;

        width:
            48%;

    }

}


/* =========================================================
   WELCOME PANEL — MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .welcome-strip {

        display:
            block;


        min-height:
            198px;

        padding:
            17px 16px 88px;

    }


    /*
       Position the three dots independently so they do
       not consume an entire text column.
    */

    .welcome-icon {

        position:
            absolute;

        z-index:
            2;

        top:
            21px;

        left:
            16px;


        margin:
            0;

        font-size:
            .82rem;

        letter-spacing:
            .08em;

    }


    .welcome-copy {

        max-width:
            100%;

        padding-left:
            40px;

    }


    .welcome-strip .section-label {

        font-size:
            .7rem;

    }


    .welcome-strip h2 {

        margin-top:
            2px;

        font-size:
            1.02rem;

        line-height:
            1.24;

    }


    .welcome-strip p:last-child {

        margin-top:
            7px;

        font-size:
            .88rem;

        line-height:
            1.38;

    }


    .welcome-art {

        width:
            100%;

        height:
            82px;

        opacity:
            .94;

    }


    /*
       At mobile sizes the building scales continuously
       from 72px to 84px.
    */

    .welcome-temple {

        --temple-width:
            clamp(
                72px,
                20vw,
                84px
            );


        right:
            clamp(
                10px,
                4vw,
                20px
            );

        bottom:
            4px;

    }


    .welcome-coastline {

        right:
            -5%;

        width:
            70%;

        height:
            32px;

    }


    .welcome-sea-line {

        left:
            -3%;

        bottom:
            14px;

        width:
            61%;

        height:
            22px;

    }


    .welcome-sea-line-two {

        left:
            8%;

        bottom:
            6px;

        width:
            52%;

    }

}


/* =========================================================
   WELCOME PANEL — VERY NARROW MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .welcome-strip {

        min-height:
            215px;

        padding:
            16px 14px 86px;

    }


    .welcome-icon {

        top:
            19px;

        left:
            14px;

        font-size:
            .76rem;

    }


    .welcome-copy {

        padding-left:
            37px;

    }


    .welcome-strip h2 {

        font-size:
            .96rem;

    }


    .welcome-strip p:last-child {

        font-size:
            .83rem;

    }


    .welcome-temple {

        --temple-width:
            70px;

        right:
            8px;

        bottom:
            4px;

    }


    .welcome-coastline {

        width:
            74%;

    }

}

@media (max-width: 980px) {
  
  .dashboard-grid { grid-template-columns: 1fr 1.5fr; }
  .news-panel { grid-column: 1 / -1; }
  .footer-inner { grid-template-columns: 1fr; padding: 18px 0; text-align: center; }
  .footer-tagline { text-align: center; }
}

@media (max-width: 760px) {
  

  .menu-toggle { display: block; }
  .menu-toggle span { margin-left: 7px; }
  .nav-inner { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 16px; }
  .site-search { margin: 0; padding: 10px 14px; background: #052d5c; }
  .site-search input { width: 100%; }
  .site-search button { flex: 0 0 auto; }

  .hero-card { min-height: 410px; }
  .hero-content { width: 100%; padding: 32px 24px; }
  .hero-bowls { width: 72%; opacity: .58; }
  .hero-content h2 { max-width: 450px; }
  .hero-copy { max-width: 560px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .news-panel { grid-column: auto; }
  
  .welcome-copy { padding-right: 0; }
  .welcome-copy { max-width: 100%; }

  }
  .welcome-coastline { width: 58%; height: 33px; }
  .welcome-sea-line { width: 54%; bottom: 12px; }
  .welcome-sea-line-two { width: 45%; bottom: 5px; }
}

@media (max-width: 520px) {
  main { width: min(100% - 18px, 1180px); }
  
  .hero-card { min-height: 470px; }
  .hero-content { padding: 28px 20px; }
  .hero-subtitle { font-size: 1.75rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .result-row { grid-template-columns: 62px 1fr; }
  .status { grid-column: 2; justify-self: start; }
  .panel-heading { padding: 14px; }
  .news-item { grid-template-columns: 38px 1fr auto; padding: 12px 8px; }
  
  .welcome-icon {
    position: absolute;
    top: 20px;
    left: 17px;
    font-size: .9rem;
  }
  .welcome-copy { padding-left: 42px; }

  .welcome-coastline { width: 67%; height: 31px; }
  .welcome-sea-line { width: 55%; }
  .footer-inner { width: min(100% - 18px, 1180px); }
}



/* =========================================================
   MOBILE HEADER — COMPACT PASS
   ========================================================= */

@media (max-width: 700px) {

  .site-header.coast-header {
    min-height: 218px;
  }

  .coast-header-inner {
    min-height: 218px;
    padding: 10px 0 18px;

    grid-template-columns: 88px 1fr;
    grid-template-areas:
      "logo season"
      "logo title"
      "signature signature";

    align-content: center;
    gap: 2px 12px;
  }

  .league-emblem img {
    width: 86px;
    height: 86px;
  }

  .league-heading h1 {
    font-size: clamp(1.38rem, 7vw, 2rem);
  }

  .league-subtitle {
    margin-top: 5px;
  }

  .league-motto {
    margin-top: 5px;
  }

  .causeway-signature {
    width: min(240px, 68vw);
    margin-top: 8px;
  }

  .causeway-landmark {
    bottom: -2px;
  }

  .mussenden-cliff {
    bottom: -1px;
  }
}


/* =========================================================
   SMALL MOBILE — COMPACT PASS
   ========================================================= */

@media (max-width: 430px) {

  .site-header.coast-header {
    min-height: 208px;
  }

  .coast-header-inner {
    min-height: 208px;
    padding: 9px 0 14px;

    grid-template-columns: 76px 1fr;
  }

  .league-emblem img {
    width: 74px;
    height: 74px;
  }

  .causeway-signature {
    width: 195px;
    margin-top: 7px;
  }
}


/* =========================================================
   SMALL SCREEN NAVIGATION TEST
   Two rows of three links
   ========================================================= */

@media (max-width: 520px) {

  .public-nav .nav-inner {
    padding: 8px 12px;
  }

  .public-nav .nav-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 6px;
  }

  .public-nav .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 42px;
    padding: 7px 5px;

    text-align: center;
    white-space: nowrap;
  }

}


/* =========================================================
   HERO — SMALL MOBILE TIDY-UP
   ========================================================= */

@media (max-width: 430px) {

    .hero-card .hero-subtitle {
        white-space: nowrap;
        font-size: 1.45rem;
        letter-spacing: -0.02em;
    }
    
    .hero-card .hero-copy {
        font-size: 0.95rem;
        line-height: 1.45;
        margin-top: 16px;
    }

}



/* =========================================================
   QUICK LINKS — CAUSEWAY BOWL ICON
   ========================================================= */

.quick-links-bowl {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quick-links-bowl img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
}


.quick-links-list .division-number {
    font-weight: 800;
    font-size: 0.82rem;
}


/* =========================================================
   RESULTS — POSTPONEMENT INFORMATION
   ========================================================= */

.status-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.result-info-popover {
    position: relative;
}

.result-info-popover summary {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #e8f4fd;
    color: #075a9c;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;
    list-style: none;
}

.result-info-popover summary::-webkit-details-marker {
    display: none;
}

.result-info-popover summary:hover,
.result-info-popover summary:focus {
    background: #d4ebfa;
    outline: none;
}

.result-info-message {
    position: absolute;
    z-index: 50;

    top: 30px;
    right: 0;

    width: 270px;
    padding: 12px 14px;

    background: #ffffff;
    color: #063f72;

    border: 1px solid #b9d9ee;
    border-radius: 10px;

    box-shadow: 0 8px 24px rgba(3, 47, 88, .18);

    font-size: .82rem;
    line-height: 1.4;
}

.result-info-message strong {
    display: block;
    margin-bottom: 5px;
    color: #064f8c;
}

.result-info-message p {
    margin: 0;
}

.result-info-message p + p {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dbeaf4;
}

.result-info-message .additional-match-heading {
    margin-top: 9px;
}

/* =========================================================
   CUSTOM 404 PAGE
   ========================================================= */

.error-page {
    position: relative;

    max-width: 760px;
    margin: 30px auto;
    padding: 48px 28px;

    overflow: hidden;

    color: #123152;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eaf6ff
        );

    border: 1px solid #c7dfef;
    border-radius: 16px;

    box-shadow:
        0 12px 30px
        rgba(4, 47, 99, .13);

    text-align: center;
}


.error-bowl {
    display: grid;
    place-items: center;

    width: 120px;
    height: 120px;

    margin: 0 auto 20px;

    background:
        radial-gradient(
            circle at 34% 28%,
            #278ed0 0 8%,
            #0c5c9e 30%,
            #06396f 68%,
            #03294f 100%
        );

    border:
        5px solid
        rgba(255, 255, 255, .65);

    border-radius: 50%;

    box-shadow:
        0 8px 18px
        rgba(3, 47, 91, .22),
        inset -9px -10px 15px
        rgba(0, 0, 0, .17);
}


.error-bowl span {
    color: #ffffff;

    font-size: 2rem;
    font-weight: 900;
    letter-spacing: .05em;

    text-shadow:
        0 2px 3px
        rgba(0, 0, 0, .25);
}


.error-label {
    margin: 0 0 7px;

    color: #0875bb;

    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .14em;
}


.error-page h2 {
    margin: 0;

    color: #07366c;

    font-size:
        clamp(
            1.65rem,
            4vw,
            2.35rem
        );

    line-height: 1.18;
}


.error-page h2 strong {
    color: #e31b23;
}


.error-explanation {
    max-width: 580px;

    margin: 18px auto 0;

    color: #60758d;

    font-size: 1rem;
}


.error-replay {
    margin: 17px 0 0;

    color: #315e7b;

    font-weight: 750;
}


.error-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    margin-top: 23px;
    padding: 10px 24px;

    color: #ffffff;
    background: #0b64b5;

    border-radius: 999px;

    font-weight: 850;
    text-decoration: none;

    box-shadow:
        0 4px 10px
        rgba(7, 54, 108, .20);
}


.error-home-button:hover,
.error-home-button:focus-visible {
    background: #073b74;

    transform:
        translateY(-1px);
}


@media (max-width: 520px) {

    .error-page {
        margin: 18px auto;
        padding: 34px 18px;
    }


    .error-bowl {
        width: 96px;
        height: 96px;
    }


    .error-bowl span {
        font-size: 1.55rem;
    }

}

@media (max-width: 700px) {

    .mussenden-temple {
        right: 8%;
        bottom: 40px;
    }

}

/* Flaming bowl on 404 page */

.error-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.flames {
    position: absolute;
    inset: 0;
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

    /* Remove opacity from this parent */
}

/* Keep the striped effect separate */
.flames::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            175deg,
            transparent 0 16px,
            rgba(255, 255, 255, .055) 16px 18px
        );

    opacity: .35;
}

/* Control only the bowl's transparency */
.flames img {
    position: relative;
    z-index: 1;

    display: block;
    width: min(700px, 95%);
    height: auto;

    opacity: .3;
}

/* Place the actual 404 content above it */
.error-page > :not(.flames) {
    position: relative;
    z-index: 2;
}


/* =========================================================
   SHARED PUBLIC FOOTER — append to the end of style.css
   ========================================================= */

.footer-inner nav {
    flex-wrap: wrap;
}

.footer-inner nav a {
    color: #ffffff;
    text-underline-offset: 4px;
}

.footer-inner nav a[aria-current="page"] {
    color: #9fddff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.footer-inner nav a:focus-visible {
    outline: 3px solid #8bd6ff;
    outline-offset: 5px;
    border-radius: 2px;
}

@media (max-width: 980px) {
    .footer-inner {
        grid-template-columns: 1fr;
        padding: 18px 0;
        text-align: center;
    }

    .footer-tagline {
        text-align: center;
    }
}

@media (max-width: 520px) {
    .footer-inner {
        width: min(100% - 18px, 1180px);
        gap: 13px;
    }

    .footer-inner strong,
    .footer-inner span {
        display: block;
    }

    .footer-inner span {
        margin: 4px 0 0;
        padding: 0;
        border-left: 0;
    }

    .footer-inner nav {
        gap: 13px 19px;
    }
}