/* taoporchonlynch.net — the whole stylesheet, written for this domain only.
 *
 * Light theme, warm paper ground, one deep-teal accent and one rust accent kept
 * for the single thing a British reader has to notice before clicking. Nothing
 * below was taken from another site in this network: the token names, the layout
 * mechanism, the spacing scale and the component shapes are this domain's own.
 *
 * The file is named with the first eight characters of its own sha256 so Apache
 * can serve it immutable for a year. Editing it therefore means renaming it, and
 * the build refuses to ship a name that no longer matches the bytes.
 *
 * There is no <div> and no <span> in the markup this styles. Every selector
 * below is therefore an element, a prefixed class or a relationship between the
 * two, which is also why the layout leans on grid and flow rather than wrappers.
 */

:root {
  --gyr-paper: #f6f2e8;
  --gyr-card: #fffefb;
  --gyr-ink: #221e19;
  --gyr-soft: #5c5349;
  --gyr-rule: #ded4c0;
  --gyr-rule-firm: #c3b69c;
  --gyr-deep: #14564b;
  --gyr-deep-lift: #1b6f60;
  --gyr-rust: #9c3612;
  --gyr-rust-wash: #fbeee6;
  --gyr-teal-wash: #e8f1ed;
  --gyr-measure: 68ch;
  --gyr-step: 1.25rem;
  --gyr-radius: 4px;
  --gyr-shadow: 0 1px 0 rgba(34, 30, 25, 0.06), 0 10px 24px -18px rgba(34, 30, 25, 0.5);
}

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

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

body.gyr-page {
  margin: 0;
  background: var(--gyr-paper);
  color: var(--gyr-ink);
  font: 400 1.0625rem/1.68 ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.22;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--gyr-deep);
  text-decoration-thickness: 1px;
}

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

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

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

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

.gyr-top {
  display: grid;
  gap: var(--gyr-step);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 1.1rem;
  border-bottom: 1px solid var(--gyr-rule);
}

.gyr-mark {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: inherit;
  text-decoration: none;
}

.gyr-mark strong {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gyr-mark em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--gyr-soft);
  letter-spacing: 0.01em;
}

a.gyr-mark:hover strong,
a.gyr-mark:focus-visible strong {
  color: var(--gyr-deep);
}

/* The operator button. It is the one conversion element of the page, so it gets
 * its own ground, a full row on a phone, and a reason under the label rather
 * than a bare arrow. The restriction sentence lives here on purpose: it is what
 * a reader in Britain most needs to know at the moment of clicking. */
.gyr-act {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--gyr-deep);
  border-radius: var(--gyr-radius);
  background: var(--gyr-deep);
  box-shadow: var(--gyr-shadow);
  color: #fdfdfb;
  text-decoration: none;
}

.gyr-act strong {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gyr-act em {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #e4efe9;
}

.gyr-act small {
  font-size: 0.8125rem;
  color: #bcd6cb;
}

.gyr-act:hover,
.gyr-act:focus-visible {
  background: var(--gyr-deep-lift);
  border-color: var(--gyr-deep-lift);
  color: #ffffff;
}

/* The counterpart on a service page: there is no button there, and saying so is
 * better than leaving a gap where readers look for one. */
.gyr-plain {
  padding: 0.8rem 1rem;
  border: 1px dashed var(--gyr-rule-firm);
  border-radius: var(--gyr-radius);
  background: var(--gyr-card);
  color: var(--gyr-soft);
  font-size: 0.9375rem;
}

.gyr-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.9375rem;
}

.gyr-ways a {
  color: var(--gyr-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--gyr-rule-firm);
  padding-bottom: 0.1rem;
}

.gyr-ways a:hover,
.gyr-ways a:focus-visible {
  color: var(--gyr-rust);
  border-bottom-color: currentColor;
}

.gyr-ways strong {
  font-weight: 650;
  border-bottom: 2px solid var(--gyr-deep);
  padding-bottom: 0.1rem;
}

.gyr-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--gyr-soft);
}

.gyr-trail a::after {
  content: " \203A";
  color: var(--gyr-rule-firm);
}

.gyr-trail strong {
  font-weight: 500;
}

@media (min-width: 54rem) {
  .gyr-top {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
    gap: 1rem 2rem;
    padding-block: 2rem 1.2rem;
  }

  .gyr-act {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-content: center;
  }

  .gyr-plain {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .gyr-ways {
    grid-column: 1;
  }

  .gyr-trail {
    grid-column: 1 / -1;
  }
}

/* ---------- body -------------------------------------------------------- */

.gyr-body {
  max-width: 76rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  display: grid;
  gap: 2.4rem;
  grid-template-columns: minmax(0, 1fr);
}

.gyr-lede {
  display: grid;
  gap: 1.1rem;
}

.gyr-lede h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  max-width: 34ch;
}

.gyr-kick {
  max-width: var(--gyr-measure);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--gyr-soft);
}

/* The restriction notice. Rust, not red: it is a fact about the operator's own
 * terms, not an error message, and it has to be read rather than dismissed. */
.gyr-alert {
  max-width: var(--gyr-measure);
  padding: 1rem 1.15rem;
  border: 1px solid #e3b9a4;
  border-left: 5px solid var(--gyr-rust);
  border-radius: var(--gyr-radius);
  background: var(--gyr-rust-wash);
  color: #5d2309;
  font-size: 1.0625rem;
}

.gyr-alert strong {
  color: var(--gyr-rust);
}

.gyr-shot {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.gyr-shot img {
  width: 100%;
  border: 1px solid var(--gyr-rule-firm);
  border-radius: var(--gyr-radius);
  background: var(--gyr-card);
}

.gyr-shot figcaption {
  font-size: 0.875rem;
  color: var(--gyr-soft);
  max-width: var(--gyr-measure);
}

/* ---------- sections ---------------------------------------------------- */

.gyr-part {
  display: grid;
  gap: 0.95rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gyr-rule);
}

.gyr-part > h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  max-width: 40ch;
}

.gyr-part > p {
  max-width: var(--gyr-measure);
}

.gyr-part > h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--gyr-deep);
  margin-top: 0.4rem;
}

/* An inline aside inside a section: the one thing from that section worth
 * carrying away. Not a pull quote — a caveat. */
.gyr-note {
  max-width: var(--gyr-measure);
  margin: 0.2rem 0 0;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--gyr-rule);
  border-radius: var(--gyr-radius);
  background: var(--gyr-teal-wash);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.gyr-note strong {
  color: var(--gyr-deep);
}

/* The fact block. `markup.listContainer` on this domain is `section`, so a
 * summary of what the site does and does not state is a section of short
 * paragraphs rather than a table or a list — which also keeps the list budget
 * free for the questions at the bottom of the page. */
.gyr-sheet {
  display: grid;
  gap: 0.7rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--gyr-rule-firm);
  border-radius: var(--gyr-radius);
  background: var(--gyr-card);
  box-shadow: var(--gyr-shadow);
}

.gyr-sheet > h2 {
  font-size: 1.1875rem;
}

.gyr-sheet > p {
  max-width: var(--gyr-measure);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--gyr-rule);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.gyr-sheet > p:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.gyr-sheet > p > strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gyr-deep);
}

@media (min-width: 54rem) {
  .gyr-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .gyr-sheet > h2 {
    grid-column: 1 / -1;
  }
}

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

.gyr-ask {
  display: grid;
  gap: 1.1rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--gyr-rule-firm);
}

.gyr-ask > h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
}

.gyr-qa {
  margin: 0;
  display: grid;
  gap: 0.2rem;
}

.gyr-qa dt {
  margin-top: 1.1rem;
  font-weight: 650;
  font-size: 1.0625rem;
  color: var(--gyr-ink);
}

.gyr-qa dt:first-of-type {
  margin-top: 0;
}

.gyr-qa dd {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--gyr-teal-wash);
  max-width: var(--gyr-measure);
  color: var(--gyr-soft);
}

/* ---------- onward ------------------------------------------------------ */

.gyr-onward {
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--gyr-rule);
  border-radius: var(--gyr-radius);
  background: var(--gyr-teal-wash);
  display: grid;
  gap: 0.6rem;
}

.gyr-onward > h2 {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gyr-deep);
}

.gyr-onward > p {
  max-width: var(--gyr-measure);
  font-size: 0.9375rem;
}

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

.gyr-foot {
  border-top: 1px solid var(--gyr-rule-firm);
  background: #efe9db;
}

.gyr-foot > * {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.gyr-foot > p {
  max-width: 76rem;
  padding-block: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gyr-soft);
}

.gyr-foot > p:first-child {
  padding-top: 1.6rem;
}

.gyr-age {
  font-weight: 650;
  color: var(--gyr-ink) !important;
  letter-spacing: 0.01em;
}

.gyr-feet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding-block: 1rem 0.4rem;
  font-size: 0.875rem;
}

.gyr-feet a {
  color: var(--gyr-soft);
}

.gyr-feet strong {
  font-weight: 650;
  color: var(--gyr-ink);
}

.gyr-sign {
  padding-bottom: 2rem !important;
}

/* ---------- age gate ---------------------------------------------------- */

/* Without the `open` attribute a <dialog> is display:none, so this costs nothing
 * in layout and nothing in cumulative shift. The focus trap, Esc and the
 * backdrop come from showModal() rather than from script. */
.gyr-gate {
  width: min(34rem, calc(100vw - 2rem));
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--gyr-rule-firm);
  border-radius: 6px;
  background: var(--gyr-card);
  color: var(--gyr-ink);
  box-shadow: 0 24px 60px -24px rgba(34, 30, 25, 0.55);
}

.gyr-gate::backdrop {
  background: rgba(34, 30, 25, 0.62);
}

.gyr-gate > h2 {
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}

.gyr-gate > p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gyr-soft);
}

.gyr-gate-row {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.2rem !important;
}

.gyr-gate-yes {
  padding: 0.85rem 1rem;
  border: 1px solid var(--gyr-deep);
  border-radius: var(--gyr-radius);
  background: var(--gyr-deep);
  color: #fdfdfb;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.gyr-gate-yes:hover,
.gyr-gate-yes:focus-visible {
  background: var(--gyr-deep-lift);
}

.gyr-gate-no {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gyr-rule-firm);
  border-radius: var(--gyr-radius);
  background: var(--gyr-paper);
  color: var(--gyr-ink);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.gyr-gate-no:hover,
.gyr-gate-no:focus-visible {
  border-color: var(--gyr-rust);
  color: var(--gyr-rust);
}

.gyr-gate-stay {
  margin-top: 0.9rem !important;
  text-align: center;
}

.gyr-gate-shut {
  border: 0;
  background: none;
  padding: 0.3rem;
  color: var(--gyr-soft);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.gyr-gate-shut:hover,
.gyr-gate-shut:focus-visible {
  color: var(--gyr-ink);
}

@media (min-width: 34rem) {
  .gyr-gate-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .gyr-gate-no {
    display: grid;
    align-content: center;
  }
}

@media print {
  .gyr-act,
  .gyr-gate,
  .gyr-ways,
  .gyr-feet {
    display: none;
  }
}