/* irish-party.net -- one stylesheet, written for this host and no other.

   The skeleton forbids <div> and caps nesting at six levels inside <body>, so there
   are no wrapper elements to hang a grid on. Everything here lays out on the
   semantic elements themselves: <header>, <main>, <article>, <figure>, <menu>. That
   constraint is why the page reads as a column rather than as a set of boxes.

   Colours come off the game's own artwork: the deep green of the valley, the gold of
   the coins, the cream of the title plate. */

:root {
  --irp-ink: #15241c;
  --irp-ink-soft: #456055;
  --irp-paper: #f6f2e4;
  --irp-card: #fffdf6;
  --irp-moss: #0b3a24;
  --irp-moss-deep: #072518;
  --irp-gold: #c8921f;
  --irp-rule: #ddd4b8;
  --irp-measure: 38rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--irp-paper);
  color: var(--irp-ink);
  font: 400 1.0625rem/1.68 Georgia, "Iowan Old Style", "Times New Roman", serif;
  text-rendering: optimizeLegibility;
}

a {
  color: #0d5c38;
  text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
  color: #08301e;
}

:focus-visible {
  outline: 3px solid var(--irp-gold);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- header ------------------------------------------------------------ */

.irp-crown {
  background: var(--irp-moss);
  color: #eef4ea;
  padding: 1rem 1.15rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-bottom: 4px solid var(--irp-gold);
}

/* The operator door. It opens the document body, it is the biggest thing on the
   screen before the heading, and on a phone it owns a whole line of its own. */
.irp-door {
  display: block;
  order: -1;
  background: linear-gradient(180deg, #f6cf5a 0%, var(--irp-gold) 100%);
  color: #22180a;
  text-decoration: none;
  border-radius: 0.65rem;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 2px 0 #8d6512, 0 6px 16px rgba(0, 0, 0, 0.26);
  text-align: center;
}

.irp-door strong {
  display: block;
  font: 700 1.2rem/1.3 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.irp-door small {
  display: block;
  margin-top: 0.22rem;
  font: 600 0.82rem/1.4 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #3d2c0d;
}

.irp-door:hover,
.irp-door:focus-visible {
  color: #22180a;
  filter: brightness(1.05);
}

.irp-sign {
  margin: 0;
  color: #f4f8f1;
  text-decoration: none;
  font: 700 1.5rem/1.2 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.015em;
}

.irp-sign em {
  display: block;
  margin-top: 0.2rem;
  font: 400 0.82rem/1.5 Georgia, serif;
  color: #a9c9b4;
  letter-spacing: 0.02em;
}

a.irp-sign:hover,
a.irp-sign:focus-visible {
  color: #ffe6a2;
}

.irp-ways ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  font: 600 0.9rem/1 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

.irp-ways li {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.irp-ways b {
  font: 600 0.68rem/1 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #6f9480;
  letter-spacing: 0.06em;
}

.irp-ways a,
.irp-ways em {
  display: block;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  font-style: normal;
}

.irp-ways a {
  color: #d7e8dc;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
}

.irp-ways a:hover,
.irp-ways a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.irp-ways em {
  background: var(--irp-gold);
  color: #22180a;
}

.irp-path {
  font: 400 0.8rem/1.5 Georgia, serif;
  color: #9dbfaa;
  padding-bottom: 0.3rem;
}

.irp-path a {
  color: #cfe4d6;
}

.irp-path b {
  padding: 0 0.4em;
  font-weight: 400;
  color: #6c8d79;
}

.irp-path em {
  font-style: normal;
  color: #f0e3c0;
}

/* ---- main -------------------------------------------------------------- */

.irp-field {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.6rem 1.15rem 2.4rem;
}

.irp-kick {
  margin: 0 0 0.35rem;
  font: 600 0.74rem/1.4 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8a6a16;
}

.irp-field h1 {
  margin: 0 0 0.55rem;
  font: 700 clamp(1.65rem, 5.2vw, 2.35rem)/1.17 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--irp-moss-deep);
  letter-spacing: -0.01em;
}

.irp-lede {
  margin: 0 0 1.5rem;
  font-size: 1.14rem;
  line-height: 1.6;
  color: #2c4537;
  border-left: 4px solid var(--irp-gold);
  padding-left: 0.95rem;
}

.irp-plate {
  margin: 0 0 1.9rem;
  background: var(--irp-card);
  border: 1px solid var(--irp-rule);
  border-radius: 0.7rem;
  padding: 0.6rem;
  overflow: hidden;
}

/* The caption is the first child of the <figure>, above the picture rather than
   under it: a line that says what you are about to look at is more use than one
   that says what you have just looked at. */
.irp-plate figcaption {
  margin: 0 0 0.55rem;
  padding-left: 0.2rem;
  font: 600 0.82rem/1.5 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--irp-ink-soft);
}

.irp-plate img {
  border-radius: 0.4rem;
  width: 100%;
}

.irp-act {
  margin: 0 0 1.9rem;
  max-width: var(--irp-measure);
}

.irp-act h2,
.irp-ledger h2,
.irp-asks h2 {
  margin: 0 0 0.6rem;
  font: 700 clamp(1.2rem, 3.4vw, 1.48rem)/1.28 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--irp-moss-deep);
}

.irp-act p {
  margin: 0 0 0.95rem;
}

.irp-act p:last-child {
  margin-bottom: 0;
}

/* ---- the fact ledger ---------------------------------------------------- */

.irp-ledger {
  margin: 0 0 2rem;
  background: var(--irp-moss);
  color: #eaf2e9;
  border-radius: 0.8rem;
  padding: 1.2rem 1.1rem 1.35rem;
}

.irp-ledger h2 {
  color: #ffe6a2;
}

.irp-ledger-note {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  color: #b9d3c1;
  max-width: 34rem;
}

.irp-entry {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.8rem 0 0.1rem;
}

.irp-entry h3 {
  margin: 0 0 0.3rem;
  font: 600 0.78rem/1.3 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #96b9a3;
}

.irp-value {
  margin: 0 0 0.25rem;
  font-size: 1.04rem;
  color: #fffaf0;
}

.irp-who {
  margin: 0 0 0.45rem;
  font: 400 0.84rem/1.5 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #9ec0ab;
}

/* ---- questions ---------------------------------------------------------- */

.irp-asks {
  margin: 0 0 1.8rem;
  max-width: var(--irp-measure);
}

.irp-asks h3 {
  margin: 1.2rem 0 0.3rem;
  font: 700 1.03rem/1.4 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #0d4a2d;
}

.irp-asks p {
  margin: 0;
}

.irp-coda {
  margin: 0;
  padding: 1rem 1.1rem;
  background: #efe8d2;
  border-radius: 0.6rem;
  font-size: 0.99rem;
  color: #3a4f41;
  max-width: var(--irp-measure);
}

/* ---- footer ------------------------------------------------------------- */

.irp-base {
  background: var(--irp-moss-deep);
  color: #c6d8cb;
  padding: 1.8rem 1.15rem 2.3rem;
}

.irp-base p {
  max-width: 44rem;
  margin: 0 auto 1rem;
  font-size: 0.93rem;
  line-height: 1.65;
}

.irp-base p:last-child {
  margin-bottom: 0;
}

.irp-base a {
  color: #ffd98a;
}

.irp-guide {
  font-size: 1rem;
  color: #e3eee5;
}

.irp-help {
  border-left: 3px solid var(--irp-gold);
  padding-left: 0.85rem;
  color: #e7f1e8;
}

.irp-fine {
  color: #8da99a;
  font-size: 0.85rem;
}

/* ---- the age question --------------------------------------------------- */

/* Without the open attribute a <dialog> is display:none, so this block costs
   nothing on load and shifts nothing when it appears. */
.irp-years {
  border: none;
  border-radius: 0.85rem;
  padding: 1.5rem 1.35rem 1.3rem;
  max-width: 27rem;
  width: calc(100% - 2rem);
  background: var(--irp-card);
  color: var(--irp-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  border-top: 6px solid var(--irp-gold);
}

.irp-years::backdrop {
  background: rgba(7, 37, 24, 0.72);
}

.irp-years-kick {
  margin: 0 0 0.3rem;
  font: 600 0.75rem/1.3 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--irp-gold);
}

.irp-years h2 {
  margin: 0 0 0.6rem;
  font: 700 1.38rem/1.25 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--irp-moss-deep);
}

.irp-years-why {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  color: var(--irp-ink-soft);
}

/* "No" is listed first in the markup and shown first on a narrow screen: the
   destructive-free answer should be the one a thumb reaches without aiming. */
.irp-years-pair {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.irp-years-pair button {
  font: 600 1rem/1.2 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  padding: 0.8rem 1rem;
  border-radius: 0.55rem;
  cursor: pointer;
}

.irp-years-go {
  order: 2;
  border: none;
  background: var(--irp-moss);
  color: #fff6dd;
}

.irp-years-no {
  order: 1;
  border: 1px solid var(--irp-rule);
  background: transparent;
  color: var(--irp-ink-soft);
}

.irp-years-go:hover,
.irp-years-go:focus-visible {
  background: #0e4a2e;
}

.irp-years-no:hover,
.irp-years-no:focus-visible {
  background: #efe8d2;
}

/* ---- wider screens ------------------------------------------------------ */

@media (min-width: 46rem) {
  .irp-crown {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 1.1rem 2rem 0.7rem;
    column-gap: 1.5rem;
    row-gap: 0.7rem;
  }

  .irp-door {
    order: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: left;
    padding: 0.95rem 1.4rem;
    max-width: 21rem;
  }

  .irp-sign {
    grid-column: 1;
    grid-row: 1;
  }

  .irp-ways {
    grid-column: 1;
    grid-row: 2;
  }

  .irp-path {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .irp-field {
    padding: 2.3rem 2rem 3rem;
  }

  .irp-ledger {
    padding: 1.5rem 1.7rem 1.7rem;
  }

  .irp-base {
    padding: 2.3rem 2rem 2.8rem;
  }

  .irp-years-pair {
    flex-direction: row;
    justify-content: flex-end;
  }

  .irp-years-pair button {
    flex: 0 1 auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .irp-door {
    transition: filter 0.15s ease-out;
  }
}