/*
Theme Name: Authority Ink for GeneratePress
Theme URI: https://authoritytattoo.com/
Description: The Authority Ink design as a GeneratePress child theme. GeneratePress stays the parent — its options, hooks, sidebars and the site-specific code in its functions.php all keep running — while the child supplies the masthead, footer, home page, article and archive layouts through GeneratePress's own hook points. Ink-and-bone palette, flash-sheet geometry, review badges read from existing articles.
Author: AuthorityTattoo
Author URI: https://authoritytattoo.com/
Template: generatepress
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: authoritytattoo
Update URI: false
*/

/*
 * How this file is organised
 *
 *   A. Tokens
 *   B. Base, scoped to GeneratePress
 *   C. The design's own components (sections 3–17). Every selector carries the
 *      .at-gp body class, which lifts it above GeneratePress's element-level
 *      and generated ("dynamic") CSS without a single !important.
 *   D. GeneratePress skin: its content column, sidebar, comments and pages.
 *   E. Responsive and motion.
 */

/* ==========================================================================
   A. Tokens
   ========================================================================== */

:root {
  /* Ink — the dark ground. Not black: black on a screen reads as a hole. */
  --at-ink:       #0C0D10;
  --at-ink-2:     #14161B;
  --at-ink-3:     #1D212A;
  --at-ink-4:     #2A2F3A;

  /* Bone — paper and skin. */
  --at-bone:      #F6F2EA;
  --at-bone-2:    #EDE7DA;
  --at-paper:     #FFFFFF;

  /* The traditional flash palette: one red, one green, one gold. */
  --at-red:       #C13A2B;
  --at-red-lit:   #DE4F3B;
  --at-red-deep:  #93281C;
  --at-sage:      #45705C;
  --at-sage-lit:  #5E8E76;
  --at-ochre:     #D8A33E;
  --at-ochre-pale:#F0D79A;

  /* Text and rules. */
  --at-text:      #191B1F;
  --at-text-soft: #4A4D54;
  --at-muted:     #6C6B64;
  --at-rule:      #DCD5C6;
  --at-rule-soft: #E9E3D7;
  --at-on-ink:    rgba(246, 242, 234, 0.74);
  --at-on-ink-dim:rgba(246, 242, 234, 0.52);
  --at-ink-rule:  rgba(246, 242, 234, 0.14);

  /* The accent is swapped per hub; everything accent-coloured reads it. */
  --at-accent:     var(--at-red);
  --at-accent-lit: var(--at-red-lit);

  /* Type */
  --at-display: "Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --at-body:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Space and shape */
  --at-shell:   1248px;
  --at-gutter:  clamp(1.125rem, 4vw, 2.5rem);
  --at-section: clamp(3.75rem, 8vw, 7rem);
  --at-radius:  3px;

  --at-shadow:      0 1px 2px rgba(12, 13, 16, 0.05), 0 8px 24px -14px rgba(12, 13, 16, 0.3);
  --at-shadow-lift: 0 2px 4px rgba(12, 13, 16, 0.06), 0 24px 48px -24px rgba(12, 13, 16, 0.45);
}

/* ==========================================================================
   B. Base, scoped to GeneratePress
   ========================================================================== */

html { scroll-behavior: smooth; }
html.at-locked { overflow: hidden; }

body.at-gp {
  background: var(--at-bone);
  color: var(--at-text);
  font-family: var(--at-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.at-gp h1, .at-gp h2, .at-gp h3, .at-gp h4, .at-gp h5, .at-gp h6 {
  font-family: var(--at-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.at-gp :focus-visible {
  outline: 2px solid var(--at-accent);
  outline-offset: 3px;
}

.at-gp ::selection {
  background: var(--at-ochre);
  color: var(--at-ink);
}

/*
 * GeneratePress's legacy "floats" structure — the one this site runs — does not
 * set border-box globally, and every width in the design assumes it.
 */
.at-gp :where([class^="at-"], [class*=" at-"]),
.at-gp :where([class^="at-"], [class*=" at-"])::before,
.at-gp :where([class^="at-"], [class*=" at-"])::after,
.at-gp :where([class^="at-"], [class*=" at-"]) *,
.at-gp :where([class^="at-"], [class*=" at-"]) *::before,
.at-gp :where([class^="at-"], [class*=" at-"]) *::after {
  box-sizing: border-box;
}

/*
 * Inside the design's own components, switch off what GeneratePress applies to
 * bare elements (heading and list margins, link and button colours, input
 * chrome). These resets sit at a deliberately low specificity — above
 * GeneratePress's element selectors, below every component rule in part C.
 */
.at-gp :where(.at-promise, .at-masthead, .at-drawer, .at-front, .at-pagehead, .at-single__head, .at-single__lead, .at-news, .at-footer, .at-related, .at-grid, .at-404, .at-note, .at-featured-in, .at-authorcard) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, dt, figure, blockquote),
.at-gp :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure):where([class^="at-"], [class*=" at-"]) {
  margin: 0;
}
.at-gp :where(.at-promise, .at-masthead, .at-drawer, .at-front, .at-pagehead, .at-single__head, .at-single__lead, .at-news, .at-footer, .at-related, .at-grid, .at-404, .at-note, .at-featured-in, .at-authorcard) :is(ul, ol),
.at-gp :is(ul, ol):where([class^="at-"], [class*=" at-"]) {
  padding: 0;
  list-style: none;
}
.at-gp :where(.at-promise, .at-masthead, .at-drawer, .at-front, .at-pagehead, .at-single__head, .at-single__lead, .at-news, .at-footer, .at-related, .at-grid, .at-404, .at-note, .at-featured-in, .at-authorcard) a {
  color: inherit;
  text-decoration: none;
}
.at-gp :where(.at-promise, .at-masthead, .at-drawer, .at-front, .at-pagehead, .at-single__head, .at-single__lead, .at-news, .at-footer, .at-related, .at-grid, .at-404, .at-note, .at-featured-in, .at-authorcard) button {
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0;
  border-radius: 0;
}
.at-gp :where(.at-promise, .at-masthead, .at-drawer, .at-front, .at-pagehead, .at-single__head, .at-single__lead, .at-news, .at-footer, .at-related, .at-grid, .at-404, .at-note, .at-featured-in, .at-authorcard) :is(img, svg) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   C. The design's components
   ========================================================================== */

/* --- Shell and utilities ----------------------------------------------- */


.at-gp .at-shell {
  width: 100%;
  max-width: var(--at-shell);
  margin-inline: auto;
  padding-inline: var(--at-gutter);
}

.at-gp .at-main { display: block; }

.at-gp .at-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.at-gp .at-skip {
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--at-ink);
  color: var(--at-bone);
  padding: 0.75rem 1.25rem;
  font-family: var(--at-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: top 0.18s ease;
}
.at-gp .at-skip:focus { top: 0.5rem; }

.at-gp .at-icon { flex: none; }

/* Reveal-on-scroll, added by JS only when motion is welcome. */
.at-gp .at-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .at-reveal.is-in { opacity: 1; transform: none; }

/* --- Type helpers, buttons, fields ------------------------------------- */

.at-gp .at-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--at-display);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--at-accent);
}
.at-gp .at-kicker__rule {
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}
.at-gp .at-kicker--light { color: var(--at-ochre); }

.at-gp .at-btn {
  --btn-bg: var(--at-ink);
  --btn-fg: var(--at-bone);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.3rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--at-radius);
  font-family: var(--at-display);
  font-size: 0.86rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.at-gp .at-btn:hover { transform: translateY(-2px); }
.at-gp .at-btn:active { transform: translateY(0); }
.at-gp .at-btn .at-icon { transition: transform 0.18s ease; }
.at-gp .at-btn:hover .at-icon { transform: translateX(3px); }

.at-gp .at-btn--accent {
  --btn-bg: var(--at-accent);
  --btn-fg: #fff;
}
.at-gp .at-btn--accent:hover { --btn-bg: var(--at-accent-lit); }

.at-gp .at-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--at-bone);
  border-color: var(--at-ink-rule);
}
.at-gp .at-btn--ghost:hover {
  border-color: var(--at-bone);
  background: rgba(246, 242, 234, 0.06);
}

.at-gp .at-btn--lg {
  padding: 0.95rem 1.7rem;
  font-size: 0.95rem;
}

/* Input + button, one unit. */
.at-gp .at-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  padding: 0.3rem 0.3rem 0.3rem 0.85rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.at-gp .at-field:focus-within {
  border-color: var(--at-accent);
  box-shadow: 0 0 0 3px rgba(193, 58, 43, 0.14);
}
.at-gp .at-field__icon { color: var(--at-muted); flex: none; }
.at-gp .at-field__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0.5rem 0;
  font-family: var(--at-body);
  font-size: 1rem;
  color: var(--at-text);
}
.at-gp .at-field__input:focus { outline: none; }
.at-gp .at-field__input::placeholder { color: var(--at-muted); opacity: 0.8; }

/* Section heading */
.at-gp .at-head {
  max-width: 54rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.at-gp .at-head__title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.015em;
}
.at-gp .at-head__intro {
  margin: 0.9rem 0 0;
  font-size: 1.1rem;
  color: var(--at-text-soft);
  max-width: 44rem;
}
.at-gp .at-head__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  font-family: var(--at-display);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--at-accent);
  border-bottom: 2px solid transparent;
  transition: border-color 0.16s ease;
}
.at-gp .at-head__link:hover { border-color: currentColor; }
.at-gp .at-head__link .at-icon { transition: transform 0.18s ease; }
.at-gp .at-head__link:hover .at-icon { transform: translateX(3px); }

.at-gp .at-head--light .at-head__title { color: var(--at-bone); }
.at-gp .at-head--light .at-head__intro { color: var(--at-on-ink); }

/* The pill a category wears. */
.at-gp .at-terms { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.at-gp .at-term {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--at-rule);
  border-radius: 999px;
  background: var(--at-paper);
  font-family: var(--at-display);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--at-text-soft);
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.at-gp .at-term:hover {
  color: #fff;
  background: var(--at-accent);
  border-color: var(--at-accent);
}

/* --- Promise bar, masthead, nav ---------------------------------------- */

.at-gp .at-promise {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.75rem);
  margin: 0;
  padding: 0.55rem var(--at-gutter);
  background: var(--at-ink);
  color: var(--at-on-ink);
  font-family: var(--at-display);
  font-size: 0.72rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.at-gp .at-promise__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.at-gp .at-promise__item .at-icon { color: var(--at-ochre); }

.at-gp .at-masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--at-bone);
  border-bottom: 1px solid var(--at-rule);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.at-gp .at-masthead.is-stuck {
  box-shadow: 0 10px 30px -22px rgba(12, 13, 16, 0.55);
  background: rgba(246, 242, 234, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
}

.at-gp .at-masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 82px;
}
.at-gp .at-masthead.is-stuck .at-masthead__inner { min-height: 68px; }
.at-gp .at-masthead__inner { transition: min-height 0.2s ease; }

.at-gp .at-brand { flex: none; }

.at-gp .at-logo {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 0.88;
  color: var(--at-ink);
}
.at-gp .at-logo__top {
  font-family: var(--at-display);
  font-weight: 700;
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: -0.012em;
}
.at-gp .at-logo__dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--at-red);
  vertical-align: 0.1em;
}
.at-gp .at-logo__bottom {
  font-family: var(--at-display);
  font-weight: 300;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.44em;
  margin-top: 0.2rem;
  color: var(--at-muted);
}
.at-gp .at-logo--light { color: var(--at-bone); }
.at-gp .at-logo--light .at-logo__bottom { color: var(--at-on-ink-dim); }

.at-gp .custom-logo-link { display: block; }
.at-gp .custom-logo { max-height: 56px; width: auto; }

.at-gp .at-nav { flex: 1 1 auto; }
.at-gp .at-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
}
.at-gp .at-nav__list a {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  font-family: var(--at-display);
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--at-text);
  transition: color 0.16s ease;
}
.at-gp .at-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--at-red);
  transition: right 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .at-nav__list a:hover::after,
.at-gp .at-nav__list .current-menu-item > a::after { right: 0; }

.at-gp .at-masthead__tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.at-gp .at-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.at-gp .at-iconbtn:hover { border-color: var(--at-ink); background: rgba(12, 13, 16, 0.04); }

.at-gp .at-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px; height: 40px;
  padding: 0 9px;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: transparent;
  cursor: pointer;
}
.at-gp .at-burger__bar {
  display: block;
  height: 2px;
  background: var(--at-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* nth-child, not last-child: the screen-reader label is the last child here. */
.at-gp .at-burger.is-open .at-burger__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.at-gp .at-burger.is-open .at-burger__bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.at-gp .at-search {
  border-top: 1px solid var(--at-rule);
  background: var(--at-bone-2);
  padding: 1rem 0;
}

/* Sits UNDER the masthead on purpose: the burger stays reachable and becomes
   the close button, so the drawer is never a room with no door. */
.at-gp .at-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--at-ink);
  color: var(--at-bone);
  overflow-y: auto;
  padding: 7.5rem var(--at-gutter) 3rem;
}
.at-gp .at-drawer__list { list-style: none; }
.at-gp .at-drawer__list a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--at-ink-rule);
  font-family: var(--at-display);
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--at-bone);
}
.at-gp .at-drawer__list a:hover { color: var(--at-ochre); }
.at-gp .at-drawer__cta { margin: 1.75rem 0; }
.at-gp .at-drawer .at-field { background: var(--at-ink-2); border-color: var(--at-ink-rule); }
.at-gp .at-drawer .at-field__input { color: var(--at-bone); }

/* --- Home — hero ------------------------------------------------------- */

.at-gp .at-hero {
  position: relative;
  isolation: isolate;
  background: var(--at-ink);
  color: var(--at-bone);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 0;
  overflow: hidden;
}

/* Two washes of colour thrown at the dark, the way ink sits in skin. */
.at-gp .at-hero__wash {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 150%;
  z-index: -2;
  background:
    radial-gradient(42% 48% at 82% 18%, rgba(193, 58, 43, 0.4), transparent 68%),
    radial-gradient(38% 44% at 12% 78%, rgba(69, 112, 92, 0.34), transparent 70%),
    radial-gradient(60% 50% at 50% 0%, rgba(216, 163, 62, 0.12), transparent 70%);
  filter: blur(6px);
}

/* Halftone — the dot screen of a printed flash sheet. */
.at-gp .at-hero__grain,
.at-gp .at-promo__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(246, 242, 234, 0.22) 0.5px, transparent 0.6px);
  background-size: 4px 4px;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

.at-gp .at-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.at-gp .at-hero__copy { max-width: 42rem; }

.at-gp .at-hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--at-bone);
  margin-bottom: 1.4rem;
}

.at-gp .at-hero__text {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--at-on-ink);
  max-width: 36rem;
}

.at-gp .at-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.at-gp .at-hero__mark { flex: none; }

/* With real featured images: two of the most-read guides, pinned up like flash
   on a studio wall, with the stamp pressed over the corner. */
.at-gp .at-hero__mark--photos {
  position: relative;
  width: clamp(300px, 33vw, 430px);
  aspect-ratio: 1 / 1.04;
}
.at-gp .at-photo {
  position: absolute;
  display: block;
  padding: 7px 7px 0;
  background: var(--at-bone);
  border-radius: 2px;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .at-photo__frame {
  display: block;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--at-ink-3);
}
.at-gp .at-photo__img { width: 100%; height: 100%; object-fit: cover; }
.at-gp .at-photo__cap {
  display: block;
  padding: 0.5rem 0.15rem 0.55rem;
  font-family: var(--at-display);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.25;
  color: var(--at-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-gp .at-photo--1 { width: 61%; top: 0; right: 0; transform: rotate(4deg); padding-bottom: 7px; }
/* The back photo's caption sits under the stamp, so it is kept for screen
   readers only; the front photo carries the visible one. */
.at-gp .at-photo--1 .at-photo__cap {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.at-gp .at-photo--2 { width: 50%; left: 0; bottom: 3%; transform: rotate(-6deg); z-index: 2; }
.at-gp .at-photo--1:hover,
.at-gp .at-photo--1:focus-visible { transform: rotate(2deg) translateY(-6px); z-index: 3; }
.at-gp .at-photo--2:hover,
.at-gp .at-photo--2:focus-visible { transform: rotate(-3deg) translateY(-6px); }
.at-gp .at-hero__mark--photos .at-stamp {
  position: absolute;
  right: -3%;
  bottom: -5%;
  z-index: 4;
  width: 43%;
  background: var(--at-ink);
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--at-ink), 0 18px 40px -12px rgba(0, 0, 0, 0.9);
}
.at-gp .at-hero__mark--photos .at-stamp__text { font-size: 15.5px; letter-spacing: 2.1px; }

/* The stamp: a ring of type that turns, with the needle at its centre. */
.at-gp .at-stamp {
  position: relative;
  width: clamp(170px, 18vw, 232px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.at-gp .at-stamp::before,
.at-gp .at-stamp::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.at-gp .at-stamp::before {
  inset: 0;
  border: 1px solid rgba(216, 163, 62, 0.38);
}
.at-gp .at-stamp::after {
  inset: 17%;
  border: 2px solid var(--at-red);
  background: rgba(12, 13, 16, 0.55);
}
.at-gp .at-stamp__ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: at-turn 34s linear infinite;
}
.at-gp .at-stamp__text {
  fill: var(--at-ochre);
  font-family: var(--at-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.at-gp .at-stamp__core {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--at-ochre-pale);
}
@keyframes at-turn { to { transform: rotate(360deg); } }

/* Stats sit on the hairline that closes the hero. */
.at-gp .at-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--at-ink-rule);
  border-top: 1px solid var(--at-ink-rule);
  border-bottom: 1px solid var(--at-ink-rule);
}
.at-gp .at-stat {
  background: var(--at-ink);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(0.75rem, 2vw, 1.5rem);
}
.at-gp .at-stat__label {
  font-family: var(--at-display);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--at-on-ink-dim);
  margin-bottom: 0.45rem;
}
.at-gp .at-stat__value {
  margin: 0;
  display: flex;
  align-items: baseline;
  font-family: var(--at-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1;
  color: var(--at-bone);
  font-variant-numeric: tabular-nums;
}
.at-gp .at-stat__suffix { color: var(--at-ochre); font-weight: 500; }
.at-gp .at-stat:nth-child(3) .at-stat__value { color: var(--at-ochre); }

/* --- Home — cited by --------------------------------------------------- */

.at-gp .at-press {
  background: var(--at-ink);
  color: var(--at-on-ink-dim);
  padding: 1.6rem 0 2.2rem;
  border-bottom: 1px solid var(--at-ink-rule);
}
.at-gp .at-press__inner { display: grid; gap: 1rem; }
.at-gp .at-press__title {
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--at-on-ink-dim);
}
.at-gp .at-press__viewport {
  display: flex;
  gap: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.at-gp .at-press__track {
  display: flex;
  flex: none;
  gap: clamp(2rem, 5vw, 4rem);
  padding-right: clamp(2rem, 5vw, 4rem);
  list-style: none;
  animation: at-marquee 42s linear infinite;
}
.at-gp .at-press__item {
  font-family: var(--at-display);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(246, 242, 234, 0.42);
  transition: color 0.2s ease;
}
.at-gp .at-press__viewport:hover .at-press__track { animation-play-state: paused; }
.at-gp .at-press__item:hover { color: var(--at-bone); }
@keyframes at-marquee { to { transform: translateX(-100%); } }

/* --- Home — where are you right now ------------------------------------ */

.at-gp .at-paths {
  padding: var(--at-section) 0;
  background: var(--at-bone);
}
.at-gp .at-paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
}

.at-gp .at-path { display: flex; }
.at-gp .at-path__link {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  width: 100%;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.at-gp .at-path__link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--at-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .at-path__link:hover {
  transform: translateY(-5px);
  box-shadow: var(--at-shadow-lift);
  border-color: var(--at-rule-soft);
}
.at-gp .at-path__link:hover::before { transform: scaleX(1); }

.at-gp .at-path:nth-child(2) .at-path__link { --at-accent: var(--at-sage); --at-accent-lit: var(--at-sage-lit); }
.at-gp .at-path:nth-child(3) .at-path__link { --at-accent: var(--at-ochre); --at-accent-lit: var(--at-ochre); }

.at-gp .at-path__step {
  position: absolute;
  top: 0.6rem; right: 1rem;
  font-family: var(--at-display);
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--at-rule);
  transition: -webkit-text-stroke-color 0.22s ease;
}
.at-gp .at-path__link:hover .at-path__step { -webkit-text-stroke-color: var(--at-accent); }

.at-gp .at-path__glyph {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 0.4rem;
  border: 1px solid var(--at-rule);
  border-radius: 50%;
  color: var(--at-accent);
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.at-gp .at-path__link:hover .at-path__glyph {
  background: var(--at-accent);
  border-color: var(--at-accent);
  color: #fff;
}

.at-gp .at-path__eyebrow {
  font-family: var(--at-display);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--at-muted);
}
.at-gp .at-path__title {
  font-family: var(--at-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--at-text);
}
.at-gp .at-path__blurb { color: var(--at-text-soft); font-size: 0.98rem; }
.at-gp .at-path__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-family: var(--at-display);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--at-accent);
}
.at-gp .at-path__link:hover .at-path__cta .at-icon { transform: translateX(3px); }
.at-gp .at-path__cta .at-icon { transition: transform 0.18s ease; }

/* --- Home — the hubs --------------------------------------------------- */

.at-gp .at-hub--vermilion { --at-accent: var(--at-red); --at-accent-lit: var(--at-red-lit); }
.at-gp .at-hub--sage { --at-accent: var(--at-sage); --at-accent-lit: var(--at-sage-lit); }

.at-gp .at-hub { padding-bottom: var(--at-section); background: var(--at-bone); }

.at-gp .at-hub__band {
  background: var(--at-ink);
  color: var(--at-bone);
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(5.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.at-gp .at-hub__band::after {
  /* A hairline of the hub's own colour along the bottom edge. */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--at-accent);
}
.at-gp .at-hub__bandinner { position: relative; }
/* Constrain the children, not the shell itself — narrowing .at-shell would
   re-centre the block and push it off the gutter the cards below line up on. */
.at-gp .at-hub__bandinner > * { max-width: 58rem; }

/* The hub word, printed slightly out of register. */
.at-gp .at-hub__word {
  font-size: clamp(3.4rem, 11vw, 8rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--at-bone);
  text-shadow: 4px 4px 0 var(--at-accent);
  margin-bottom: 1.2rem;
}
.at-gp .at-hub__intro {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--at-on-ink);
  max-width: 38rem;
}
.at-gp .at-hub__all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  padding-bottom: 0.3rem;
  font-family: var(--at-display);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--at-ochre);
  border-bottom: 2px solid rgba(216, 163, 62, 0.35);
  transition: border-color 0.18s ease;
}
.at-gp .at-hub__all:hover { border-color: var(--at-ochre); }
.at-gp .at-hub__all .at-icon { transition: transform 0.18s ease; }
.at-gp .at-hub__all:hover .at-icon { transform: translateX(3px); }

/* Cards ride up over the band — the one place the grid breaks its own line. */
.at-gp .at-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  margin-top: clamp(-4.5rem, -6vw, -3.5rem);
}

.at-gp .at-card { display: flex; }
.at-gp .at-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.at-gp .at-card__link:hover { transform: translateY(-6px); box-shadow: var(--at-shadow-lift); }

.at-gp .at-card__art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--at-ink-2);
}
.at-gp .at-card__img,
.at-gp .at-card__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .at-card__link:hover .at-card__img,
.at-gp .at-card__link:hover .at-card__art img { transform: scale(1.05); }

.at-gp .at-card__count {
  position: absolute;
  left: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  background: var(--at-ink);
  color: var(--at-on-ink);
  font-family: var(--at-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.at-gp .at-card__count strong {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--at-ochre);
}

.at-gp .at-card__body {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 1.25rem 1.35rem 1.45rem;
  flex: 1 1 auto;
}
.at-gp .at-card__title {
  font-family: var(--at-display);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.12;
  color: var(--at-text);
}
.at-gp .at-card__link:hover .at-card__title { color: var(--at-accent); }
.at-gp .at-card__blurb {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--at-text-soft);
}
.at-gp .at-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-family: var(--at-display);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--at-accent);
}
.at-gp .at-card__link:hover .at-card__more .at-icon { transform: translateX(3px); }
.at-gp .at-card__more .at-icon { transition: transform 0.18s ease; }

/* Stand-in art. Four variants so a grid of them never looks like a bug. */
.at-gp .at-plate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(246, 242, 234, 0.3);
  background-color: var(--at-ink-2);
  background-image: radial-gradient(rgba(246, 242, 234, 0.12) 0.5px, transparent 0.6px);
  background-size: 5px 5px;
}
.at-gp .at-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(193, 58, 43, 0.5), transparent 62%);
}
.at-gp .at-plate--2::before { background: linear-gradient(135deg, rgba(69, 112, 92, 0.52), transparent 62%); }
.at-gp .at-plate--3::before { background: linear-gradient(210deg, rgba(216, 163, 62, 0.42), transparent 60%); }
.at-gp .at-plate--4::before { background: linear-gradient(45deg, rgba(147, 40, 28, 0.55), transparent 65%); }
.at-gp .at-plate__glyph { position: relative; opacity: 0.85; }

/* --- Home — most read -------------------------------------------------- */

.at-gp .at-reads { padding: 0 0 var(--at-section); background: var(--at-bone); }

.at-gp .at-reads__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  list-style: none;
}
@media (min-width: 720px) {
  .at-gp .at-reads__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-gp .at-read:nth-child(-n + 2) { border-top-color: var(--at-ink); }
}
@media (min-width: 1140px) {
  .at-gp .at-reads__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-gp .at-read:nth-child(-n + 3) { border-top-color: var(--at-ink); }
}

.at-gp .at-read { border-top: 1px solid var(--at-rule); }
/* The first row of the chart gets the heavy rule, however many columns it has. */
.at-gp .at-read:first-child { border-top-color: var(--at-ink); }

.at-gp .at-read__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0.25rem;
  text-decoration: none;
  transition: padding-left 0.2s ease, background-color 0.2s ease;
}
.at-gp .at-read__link:hover { padding-left: 0.75rem; background: rgba(255, 255, 255, 0.6); }

.at-gp .at-read__rank {
  font-family: var(--at-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #C9BFAB;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease;
  min-width: 2.1rem;
}
.at-gp .at-read__link:hover .at-read__rank {
  color: var(--at-accent);
  -webkit-text-stroke-color: var(--at-accent);
}

.at-gp .at-read__title {
  font-size: 1.04rem;
  line-height: 1.4;
  color: var(--at-text);
  text-wrap: pretty;
}
.at-gp .at-read__link:hover .at-read__title { text-decoration: underline; text-decoration-color: var(--at-accent); text-underline-offset: 3px; }

.at-gp .at-read__art {
  flex: none;
  width: 64px; height: 48px;
  overflow: hidden;
  border-radius: 2px;
}
.at-gp .at-read__img { width: 100%; height: 100%; object-fit: cover; }

/* Outlined numerals need the stroke; without it they would be invisible. */
@supports not (-webkit-text-stroke: 1px black) {
  .at-gp .at-read__rank,
  .at-gp .at-path__step,
  .at-gp .at-404__code { color: var(--at-muted); }
}

.at-gp .at-read--ad { border-top: 0; grid-column: 1 / -1; }

/* --- Home — the design tool -------------------------------------------- */

.at-gp .at-promo {
  position: relative;
  isolation: isolate;
  background: var(--at-ink-2);
  color: var(--at-bone);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  overflow: hidden;
}
.at-gp .at-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(50% 60% at 78% 50%, rgba(216, 163, 62, 0.2), transparent 70%),
    radial-gradient(44% 56% at 10% 70%, rgba(193, 58, 43, 0.26), transparent 72%);
}
.at-gp .at-promo__grain { mask-image: none; opacity: 0.35; }

.at-gp .at-promo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.at-gp .at-promo__copy { max-width: 36rem; }
.at-gp .at-promo__title {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.at-gp .at-promo__text { color: var(--at-on-ink); font-size: 1.08rem; margin-bottom: 1.8rem; }

/* A stack of flash sheets, fanned the way they sit on a studio counter. */
.at-gp .at-flash {
  position: relative;
  aspect-ratio: 1;
  max-width: 24rem;
  margin-inline: auto;
  width: 100%;
}
.at-gp .at-flash__sheet {
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(246, 242, 234, 0.3);
  border-radius: 2px;
  background: rgba(12, 13, 16, 0.55);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .at-flash__sheet--3 { transform: rotate(-9deg) translate(-7%, 4%); }
.at-gp .at-flash__sheet--2 { transform: rotate(5deg) translate(6%, -3%); }
.at-gp .at-flash__sheet--1 {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.9rem;
  transform: rotate(-2deg);
  background: var(--at-ink);
  border-style: solid;
  border-color: var(--at-ochre);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.at-gp .at-promo:hover .at-flash__sheet--3 { transform: rotate(-13deg) translate(-11%, 5%); }
.at-gp .at-promo:hover .at-flash__sheet--2 { transform: rotate(9deg) translate(10%, -5%); }
.at-gp .at-promo:hover .at-flash__sheet--1 { transform: rotate(-2deg) translateY(-6px); }

.at-gp .at-flash__rule {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(216, 163, 62, 0.35);
}
.at-gp .at-flash__glyph { color: var(--at-ochre); }
.at-gp .at-flash__caption {
  font-family: var(--at-display);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--at-on-ink);
}

/* --- Home — editorial standards ---------------------------------------- */

.at-gp .at-standards {
  background: var(--at-ink);
  color: var(--at-bone);
  padding: var(--at-section) 0;
}
/* With the Piercings section off, this band sits straight under the design
   tool's; a hairline keeps the two dark bands reading as two. */
.at-gp .at-promo + .at-standards { border-top: 1px solid var(--at-ink-rule); }
.at-gp .at-standards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  list-style: none;
  background: var(--at-ink-rule);
  border: 1px solid var(--at-ink-rule);
}
.at-gp .at-standard {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--at-ink);
  transition: background-color 0.22s ease;
}
.at-gp .at-standard:hover { background: var(--at-ink-2); }
.at-gp .at-standard__glyph {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(216, 163, 62, 0.4);
  border-radius: 50%;
  color: var(--at-ochre);
}
.at-gp .at-standard__title { font-size: 1.4rem; color: var(--at-bone); }
.at-gp .at-standard__blurb { color: var(--at-on-ink); font-size: 0.99rem; }
.at-gp .at-standard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-family: var(--at-display);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--at-ochre);
  border-bottom: 1px solid transparent;
  justify-self: start;
  transition: border-color 0.18s ease;
}
.at-gp .at-standard__link:hover { border-color: currentColor; }

/* --- Newsletter -------------------------------------------------------- */

.at-gp .at-news {
  background: var(--at-ink-2);
  color: var(--at-bone);
  border-top: 4px solid var(--at-red);
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
}
.at-gp .at-news__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.at-gp .at-news__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 0.6rem; }
.at-gp .at-news__text { color: var(--at-on-ink); max-width: 34rem; }
.at-gp .at-news__form .at-field { background: var(--at-paper); border-color: transparent; }
.at-gp .at-news__fine {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--at-on-ink-dim);
}

/* --- Footer ------------------------------------------------------------ */

.at-gp .at-footer {
  background: var(--at-ink);
  color: var(--at-on-ink);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: 0.96rem;
}
.at-gp .at-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--at-ink-rule);
}
.at-gp .at-footer__blurb { margin: 1.1rem 0 1.25rem; max-width: 24rem; color: var(--at-on-ink-dim); }
.at-gp .at-footer__address {
  font-style: normal;
  font-size: 0.86rem;
  color: var(--at-on-ink-dim);
  margin-top: 1rem;
}
.at-gp .at-footer__heading {
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--at-ochre);
  margin-bottom: 1rem;
}
.at-gp .at-footer__list { list-style: none; display: grid; gap: 0.6rem; }
.at-gp .at-footer__list a {
  text-decoration: none;
  color: var(--at-on-ink);
  transition: color 0.16s ease;
}
.at-gp .at-footer__list a:hover { color: var(--at-bone); text-decoration: underline; text-underline-offset: 3px; }

.at-gp .at-social { display: flex; gap: 0.75rem; list-style: none; flex-wrap: wrap; }
.at-gp .at-social a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--at-ink-rule);
  border-radius: 999px;
  font-family: var(--at-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.at-gp .at-social a:hover { border-color: var(--at-ochre); color: var(--at-ochre); }

.at-gp .at-footer__disclosure {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--at-ochre);
  background: var(--at-ink-2);
  font-size: 0.88rem;
  color: var(--at-on-ink-dim);
}

.at-gp .at-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 1.75rem;
  margin-top: 1.75rem;
  border-top: 1px solid var(--at-ink-rule);
  font-size: 0.84rem;
  color: var(--at-on-ink-dim);
}
.at-gp .at-footer__copy,
.at-gp .at-footer__note { margin: 0; }
.at-gp .at-footer__note { flex: 1 1 18rem; }
.at-gp .at-footer__legal { display: flex; gap: 1rem; list-style: none; }
.at-gp .at-footer__legal a { color: var(--at-on-ink); }

/* --- Page heads, grids, article cards, pagination ---------------------- */

.at-gp .at-pagehead {
  background: var(--at-ink);
  color: var(--at-bone);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 4px solid var(--at-red);
}
.at-gp .at-pagehead .at-head { margin-bottom: 0; }
.at-gp .at-pagehead .at-head__title { color: var(--at-bone); font-size: clamp(2.1rem, 5vw, 3.6rem); }
.at-gp .at-pagehead .at-head__intro { color: var(--at-on-ink); }
.at-gp .at-pagehead .at-kicker { color: var(--at-ochre); }
.at-gp .at-pagehead__count {
  margin: 1rem 0 0;
  font-family: var(--at-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--at-on-ink-dim);
}
.at-gp .at-pagehead__search { margin-top: 1.5rem; max-width: 34rem; }

.at-gp .at-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--at-section);
  align-items: start;
}
.at-gp.at-no-sidebar .at-layout { grid-template-columns: minmax(0, 1fr); }

.at-gp .at-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.at-gp .at-grid--tight { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.1rem; }

.at-gp .at-post { display: flex; }
.at-gp .at-post__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}
.at-gp .at-post__link:hover { transform: translateY(-4px); box-shadow: var(--at-shadow-lift); }
.at-gp .at-post__art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--at-ink-2);
}
.at-gp .at-post__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.at-gp .at-post__link:hover .at-post__img { transform: scale(1.05); }
.at-gp .at-post__body { display: grid; align-content: start; gap: 0.4rem; padding: 1.1rem 1.15rem 1.25rem; }
.at-gp .at-post__cat {
  font-family: var(--at-display);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--at-red);
}
.at-gp .at-post__title { font-size: 1.2rem; line-height: 1.16; color: var(--at-text); }
.at-gp .at-post__link:hover .at-post__title { color: var(--at-red); }
.at-gp .at-post__excerpt { font-size: 0.93rem; color: var(--at-text-soft); line-height: 1.5; }
.at-gp .at-post__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-family: var(--at-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--at-muted);
}

.at-gp .at-row { border-bottom: 1px solid var(--at-rule); }
.at-gp .at-row__link { display: block; padding: 1.1rem 0; text-decoration: none; }
.at-gp .at-row__title { font-size: 1.3rem; }
.at-gp .at-row__excerpt { margin: 0.35rem 0 0; color: var(--at-text-soft); }

.at-gp .at-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.at-gp .at-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.at-gp .at-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px; height: 42px;
  padding: 0 0.75rem;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: var(--at-paper);
  font-family: var(--at-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.at-gp .at-pagination .page-numbers:hover,
.at-gp .at-pagination .page-numbers.current {
  background: var(--at-ink);
  border-color: var(--at-ink);
  color: var(--at-bone);
}
.at-gp .at-pagination .page-numbers.dots { border-color: transparent; background: none; }
.at-gp .at-pagination .screen-reader-text { position: absolute; clip-path: inset(50%); }

.at-gp .at-empty {
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  text-align: center;
}
.at-gp .at-empty__title { font-size: 1.9rem; margin-bottom: 0.5rem; }
.at-gp .at-empty__text { color: var(--at-text-soft); margin-bottom: 1.5rem; }
.at-gp .at-empty .at-searchform { max-width: 28rem; margin-inline: auto; }

/* --- Single article ---------------------------------------------------- */

.at-gp .at-single__head {
  background: var(--at-ink);
  color: var(--at-bone);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.at-gp .at-single__headinner > * { max-width: 50rem; }
.at-gp .at-single__head .at-terms { margin-bottom: 1.1rem; }
.at-gp .at-single__head .at-term,
.at-gp .at-pagehead .at-term {
  background: transparent;
  border-color: var(--at-ink-rule);
  color: var(--at-ochre);
}
.at-gp .at-single__head .at-term:hover,
.at-gp .at-pagehead .at-term:hover { background: var(--at-ochre); border-color: var(--at-ochre); color: var(--at-ink); }
.at-gp .at-pagehead__kids { margin-top: 1.4rem; }

.at-gp .at-single__title {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--at-bone);
}
.at-gp .at-single__standfirst {
  margin: 1.1rem 0 0;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--at-on-ink);
  max-width: 42rem;
}

.at-gp .at-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--at-ink-rule);
}
.at-gp .at-byline__avatar { border-radius: 50%; width: 44px; height: 44px; }
.at-gp .at-byline__line { margin: 0; font-size: 0.95rem; }
.at-gp .at-byline__by { color: var(--at-on-ink-dim); }
.at-gp .at-byline__author {
  font-family: var(--at-display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--at-bone);
  text-decoration: none;
  border-bottom: 1px solid var(--at-ink-rule);
}
.at-gp .at-byline__author:hover { border-color: var(--at-ochre); color: var(--at-ochre); }
.at-gp .at-byline__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  font-family: var(--at-display);
  font-size: 0.76rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--at-on-ink-dim);
}
.at-gp .at-byline__time { display: inline-flex; align-items: center; gap: 0.3rem; }

.at-gp .at-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin-left: auto; }
.at-gp .at-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--at-ink-rule);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--at-on-ink);
}
.at-gp .at-badge .at-icon { color: var(--at-sage-lit); }
.at-gp .at-badge strong { color: var(--at-bone); font-weight: 600; }
.at-gp .at-badge--med .at-icon,
.at-gp .at-badge--ind .at-icon { color: var(--at-ochre); }
.at-gp .at-badge a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--at-ink-rule); }
.at-gp .at-badge a:hover { border-color: var(--at-ochre); }
.at-gp .at-badge a:hover strong,
.at-gp .at-badge__how:hover { color: var(--at-ochre); }
.at-gp .at-byline__date--updated { color: var(--at-on-ink); }
.at-gp .at-byline__meta { flex-wrap: wrap; row-gap: 0.2rem; }

/* Breadcrumbs, when an SEO plugin provides them. */
.at-gp .at-crumbs {
  margin: 0 0 1.1rem;
  font-family: var(--at-display);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--at-on-ink-dim);
}
.at-gp .at-crumbs a { color: var(--at-on-ink); text-decoration: none; }
.at-gp .at-crumbs a:hover { color: var(--at-ochre); }

/* Reading progress, drawn along the bottom edge of the masthead. */
.at-gp .at-progress {
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  pointer-events: none;
}
.at-gp .at-progress__bar {
  display: block;
  height: 100%;
  background: var(--at-red);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* GeneratePress / GP Premium's own featured image, when it prints one: left at
   its size and place, given the theme's corners and the space the body needs. */
.at-gp.single .inside-article > .featured-image {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
/* GP Premium sets it 2em down to clear a title; here it opens the article, so
   it starts level with the sidebar. */
.at-gp.single .inside-article > .featured-image:first-child {
  margin-top: 0;
}
.at-gp.single .inside-article > .featured-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--at-radius);
}

/* Otherwise the theme prints the image itself, at the measure of the text. */
.at-gp .at-single__lead {
  max-width: 44rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.at-gp .at-single__leadimg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--at-radius);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.at-gp .at-single__caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--at-muted);
}

/* Article body */
.at-gp .at-prose {
  max-width: 44rem;
  font-size: 1.14rem;
  line-height: 1.72;
  color: var(--at-text);
}
.at-gp .at-prose--solo { margin-inline: auto; }
/* The opening paragraph carries the reader in; give it a little more voice. */
.at-gp .at-prose > p:first-child,
.at-gp .at-prose > .wp-block-group:first-child p:first-of-type {
  font-size: 1.1em;
  line-height: 1.62;
  color: var(--at-text-soft);
}
.at-gp .at-prose > * + * { margin-top: 1.25em; }
.at-gp .at-prose h2 {
  font-size: 1.95rem;
  margin-top: 2.2em;
  padding-top: 0.7em;
  border-top: 1px solid var(--at-rule);
  letter-spacing: -0.012em;
}
.at-gp .at-prose h3 { font-size: 1.45rem; margin-top: 1.8em; }
.at-gp .at-prose h4 { font-size: 1.15rem; margin-top: 1.6em; text-transform: uppercase; letter-spacing: 0.08em; }
.at-gp .at-prose a {
  color: var(--at-red-deep);
  text-decoration-color: rgba(193, 58, 43, 0.4);
  text-underline-offset: 2px;
}
.at-gp .at-prose a:hover { text-decoration-color: currentColor; }
.at-gp .at-prose ul,
.at-gp .at-prose ol { padding-left: 1.3em; }
.at-gp .at-prose li + li { margin-top: 0.4em; }
.at-gp .at-prose ul li::marker { color: var(--at-red); }
.at-gp .at-prose ol li::marker { font-family: var(--at-display); color: var(--at-red); }
.at-gp .at-prose img,
.at-gp .at-prose figure { border-radius: var(--at-radius); }
.at-gp .at-prose figcaption { font-size: 0.86rem; color: var(--at-muted); margin-top: 0.5rem; }
.at-gp .at-prose blockquote {
  margin: 2em 0;
  padding: 0.3em 0 0.3em 1.5rem;
  border-left: 3px solid var(--at-red);
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--at-text-soft);
}
.at-gp .at-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.at-gp .at-prose th,
.at-gp .at-prose td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--at-rule);
  text-align: left;
}
.at-gp .at-prose th {
  font-family: var(--at-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  background: var(--at-bone-2);
}
.at-gp .at-prose code {
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--at-bone-2);
  border-radius: 2px;
}
.at-gp .at-prose hr { border: 0; border-top: 1px solid var(--at-rule); margin: 2.5em 0; }

/* --- Content written for the previous theme, and plugin output ----------- */

/* A stray in-body h1 (older articles) reads as a section heading, not a second title. */
.at-gp .at-prose h1 { font-size: 1.95rem; margin-top: 2em; letter-spacing: -0.012em; }

.at-gp .at-prose img { height: auto; }
.at-gp .at-prose iframe,
.at-gp .at-prose video,
.at-gp .at-prose embed { max-width: 100%; }
.at-gp .at-prose .wp-block-image,
.at-gp .at-prose .wp-block-gallery { margin-inline: 0; }
.at-gp .at-prose .wp-block-image.aligncenter,
.at-gp .at-prose .aligncenter { display: block; margin-inline: auto; text-align: center; }
.at-gp .at-prose .wp-block-image.aligncenter img { margin-inline: auto; }

/* Captions and photo credits sit centred under their image, written out on one
   line where they fit. WordPress lays a centred image's caption out as a table
   caption, which only works while the figure is a table; here the figure is a
   block, so without this the caption collapses to the width of its longest word
   and hugs the left edge. Floated images keep WordPress's own layout, where the
   caption wraps to the width of the image. */
.at-gp .at-prose figcaption,
.at-gp .at-prose .wp-caption-text {
  text-align: center;
  line-height: 1.45;
}
.at-gp .at-prose .wp-block-image .aligncenter > figcaption,
.at-gp .at-prose .wp-block-image.aligncenter > figcaption {
  display: block;
}
/* An image with no alignment that is narrower than the text: the figure hugs
   it, so the caption centres under the image rather than under the column. */
.at-gp .at-prose figure.wp-block-image:not(.alignleft):not(.alignright):not(.aligncenter):not(.alignwide):not(.alignfull) {
  width: fit-content;
  max-width: 100%;
}
.at-gp .at-prose .wp-block-table,
.at-gp .at-prose .wp-block-kadence-table { overflow-x: auto; margin-inline: 0; }
.at-gp .at-prose .wp-block-group + .wp-block-group,
.at-gp .at-prose .wp-block-group > .wp-block-group__inner-container > * + * { margin-top: 1.25em; }
.at-gp .at-prose .wp-block-cover { border-radius: var(--at-radius); overflow: hidden; }

/* Kadence icon lists used inside articles (pros and cons, checklists). */
.at-gp .at-prose .kt-svg-icon-list { list-style: none; padding-left: 0; }
.at-gp .at-prose .kt-svg-icon-list li { display: flex; gap: 0.6rem; align-items: baseline; }
.at-gp .at-prose .kt-svg-icon-list svg { width: 0.9em; height: 0.9em; flex: none; color: var(--at-red); }

/* Easy Table of Contents — in the body or as a sidebar widget. */
.at-gp #ez-toc-container,
.at-gp .ez-toc-widget-container {
  width: 100%;
  padding: 1.15rem 1.35rem;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-left: 3px solid var(--at-red);
  border-radius: var(--at-radius);
  box-shadow: none;
}
.at-gp #ez-toc-container .ez-toc-title,
.at-gp .ez-toc-widget-container .ez-toc-title {
  font-family: var(--at-display);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--at-red);
}
.at-gp #ez-toc-container ul,
.at-gp .ez-toc-widget-container ul { padding-left: 0; list-style: none; }
.at-gp #ez-toc-container ul ul,
.at-gp .ez-toc-widget-container ul ul { padding-left: 1rem; }
.at-gp #ez-toc-container li,
.at-gp .ez-toc-widget-container li { margin-top: 0.4em; font-size: 0.98rem; line-height: 1.4; }
.at-gp #ez-toc-container a,
.at-gp .ez-toc-widget-container a { color: var(--at-text); text-decoration: none; }
.at-gp #ez-toc-container a:hover,
.at-gp .ez-toc-widget-container a:hover { color: var(--at-red); text-decoration: underline; text-underline-offset: 3px; }

/* Pages laid out in a page builder get the whole canvas. */
.at-gp .at-builder { display: block; }
.at-gp .at-builder > .elementor { width: 100%; }

/* A form embedded from an email provider, sitting in the newsletter band. */
.at-gp .at-news__form--embed input[type="email"],
.at-gp .at-news__form--embed input[type="text"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--at-radius);
  background: var(--at-paper);
  font: inherit;
  color: var(--at-text);
}
.at-gp .at-news__form--embed button,
.at-gp .at-news__form--embed input[type="submit"] {
  margin-top: 0.6rem;
  padding: 0.78rem 1.3rem;
  border: 0;
  border-radius: var(--at-radius);
  background: var(--at-red);
  color: #fff;
  font-family: var(--at-display);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.at-gp .at-news__form--embed button:hover,
.at-gp .at-news__form--embed input[type="submit"]:hover { background: var(--at-red-lit); }

/* The line that has to be there on health-adjacent writing. */
.at-gp .at-note {
  display: flex;
  gap: 0.9rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 44rem;
  padding: 1.15rem 1.35rem;
  background: var(--at-bone-2);
  border-left: 3px solid var(--at-sage);
  border-radius: 0 var(--at-radius) var(--at-radius) 0;
  font-size: 0.95rem;
  color: var(--at-text-soft);
}
.at-gp .at-note .at-icon { color: var(--at-sage); flex: none; margin-top: 2px; }
.at-gp .at-note p { margin: 0; }

.at-gp .at-single__foot { margin-top: 2rem; }
.at-gp .at-linkpages {
  margin-top: 2rem;
  font-family: var(--at-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

.at-gp .at-related { margin-top: clamp(2.5rem, 5vw, 4rem); }
.at-gp .at-related__title {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--at-ink);
}

.at-gp .at-belowpost { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- Sidebar, widgets, ads, comments, 404 ------------------------------ */

.at-gp .at-layout__side { min-width: 0; }
.at-gp .at-side__inner { display: grid; gap: 1.5rem; }
.at-gp .at-side__inner > :last-child { position: sticky; top: 110px; }

.at-gp .at-widget {
  padding: 1.35rem 1.4rem;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
}
.at-gp .at-widget--wide { padding: 1.5rem; }
.at-gp .at-widget__title {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--at-red);
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--at-rule);
}
.at-gp .at-widget ul { list-style: none; display: grid; gap: 0.6rem; }

/* Block widgets (WordPress puts Search, Recent Posts etc. here by default). */
.at-gp .at-widget h2,
.at-gp .at-widget .wp-block-heading,
.at-gp .at-widget .wp-block-search__label {
  display: block;
  font-family: var(--at-display);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--at-red);
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--at-rule);
}
.at-gp .at-widget .wp-block-search__inside-wrapper { display: flex; gap: 0.4rem; }
.at-gp .at-widget .wp-block-search__input,
.at-gp .at-widget input[type="search"],
.at-gp .at-widget input[type="text"],
.at-gp .at-widget input[type="email"],
.at-gp .at-widget select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: var(--at-bone);
  font: inherit;
  font-size: 0.98rem;
  color: var(--at-text);
}
.at-gp .at-widget .wp-block-search__button,
.at-gp .at-widget button,
.at-gp .at-widget input[type="submit"] {
  margin: 0;
  padding: 0.6rem 0.95rem;
  border: 0;
  border-radius: var(--at-radius);
  background: var(--at-ink);
  color: var(--at-bone);
  font-family: var(--at-display);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.at-gp .at-widget .wp-block-search__button:hover,
.at-gp .at-widget button:hover,
.at-gp .at-widget input[type="submit"]:hover { background: var(--at-red); }
.at-gp .at-widget .wp-block-latest-posts__post-date,
.at-gp .at-widget .wp-block-latest-comments__comment-date { font-size: 0.8rem; color: var(--at-muted); }
.at-gp .at-widget .wp-block-group > * + * { margin-top: 0.6rem; }
.at-gp .at-widget a { text-decoration: none; color: var(--at-text); }
.at-gp .at-widget a:hover { color: var(--at-red); text-decoration: underline; text-underline-offset: 3px; }

.at-gp .at-ad { margin: clamp(1.5rem, 3vw, 2.25rem) 0; text-align: center; }
.at-gp .at-ad__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--at-display);
  font-size: 0.62rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--at-muted);
}
.at-gp .at-ad__frame {
  display: grid;
  place-items: center;
  background: var(--at-bone-2);
  border: 1px dashed var(--at-rule);
  border-radius: var(--at-radius);
  overflow: hidden;
}
/* Heights are reserved up front so a late ad cannot shove the page around. */
.at-gp .at-ad--leaderboard .at-ad__frame { min-height: 100px; }
.at-gp .at-ad--in-feed .at-ad__frame,
.at-gp .at-ad--in-article .at-ad__frame { min-height: 280px; }
.at-gp .at-ad--sidebar .at-ad__frame { min-height: 600px; }

.at-gp .at-comments { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 44rem; }
.at-gp .at-comments__title {
  font-size: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--at-ink);
  margin-bottom: 1.5rem;
}
.at-gp .at-comments__list { list-style: none; display: grid; gap: 1.5rem; }
.at-gp .at-comments__list .children { list-style: none; padding-left: 1.5rem; margin-top: 1.5rem; display: grid; gap: 1.5rem; border-left: 1px solid var(--at-rule); }
.at-gp .at-comments__list .comment-body { padding-bottom: 1rem; border-bottom: 1px solid var(--at-rule-soft); }
.at-gp .at-comments__list .comment-author { display: flex; align-items: center; gap: 0.6rem; font-family: var(--at-display); }
.at-gp .at-comments__list .comment-author img { border-radius: 50%; }
.at-gp .at-comments__list .comment-metadata { font-size: 0.8rem; color: var(--at-muted); }
.at-gp .at-comments__notes { font-size: 0.9rem; color: var(--at-text-soft); }
.at-gp .at-comments .comment-form { display: grid; gap: 0.9rem; margin-top: 2rem; }
.at-gp .at-comments .comment-form label {
  font-family: var(--at-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--at-muted);
  display: block;
  margin-bottom: 0.3rem;
}
.at-gp .at-comments input[type="text"],
.at-gp .at-comments input[type="email"],
.at-gp .at-comments input[type="url"],
.at-gp .at-comments textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: var(--at-paper);
  font: inherit;
  font-size: 1rem;
}
.at-gp .at-comments textarea { min-height: 9rem; resize: vertical; }
.at-gp .at-comments .submit {
  justify-self: start;
  padding: 0.72rem 1.3rem;
  background: var(--at-red);
  color: #fff;
  border: 0;
  border-radius: var(--at-radius);
  font-family: var(--at-display);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.at-gp .at-comments .submit:hover { background: var(--at-red-lit); }

.at-gp .at-404 { padding: clamp(3rem, 8vw, 6rem) 0 var(--at-section); }
.at-gp .at-404__inner > * { max-width: 40rem; }
.at-gp .at-404__code {
  font-family: var(--at-display);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 700;
  line-height: 0.82;
  margin: 0 0 0.5rem;
  color: transparent;
  -webkit-text-stroke: 2px var(--at-rule);
}
.at-gp .at-404__title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.75rem; }
.at-gp .at-404__text { color: var(--at-text-soft); font-size: 1.1rem; }
.at-gp .at-404__search { margin: 2rem 0; }
.at-gp .at-404__links { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }

/* ==========================================================================
   D. GeneratePress skin
   ========================================================================== */

/* --- D1. Layout: GeneratePress's containers on the design's grid ----------
 *
 * On the views this theme lays out (home, articles, archives, search, 404),
 * GeneratePress's #page container is opened to full width, and #content
 * becomes a grid with named lines: a full-bleed track for the header bands,
 * then the content column and the sidebar. #primary and the sidebar are still
 * GeneratePress's own elements, in GeneratePress's own order.
 * Works with both of GeneratePress's structures (flexbox and legacy floats).
 */

.at-gp.at-home #page,
.at-gp.at-shell-layout #page {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.at-gp.at-home .site-content {
  display: block;
  padding: 0;
}

.at-gp.at-shell-layout .site-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--at-gutter), 1fr)
    [main-start] minmax(0, 53rem)
    [side-start] minmax(0, 20rem)
    [side-end] minmax(var(--at-gutter), 1fr) [full-end];
  align-items: start;
  padding: 0 0 var(--at-section);
}

/* The float structure's clearfix pseudo-elements would become grid items. */
.at-gp.at-home .site-content::before,
.at-gp.at-home .site-content::after,
.at-gp.at-shell-layout .site-content::before,
.at-gp.at-shell-layout .site-content::after,
.at-gp.at-shell-layout #page::before,
.at-gp.at-shell-layout #page::after {
  content: none;
  display: none;
}

.at-gp.at-shell-layout .site-content > .at-pagehead,
.at-gp.at-shell-layout .site-content > .at-single__head {
  grid-column: full-start / full-end;
}

.at-gp.at-shell-layout .site-content > .content-area {
  grid-column: main-start / side-start;
  width: auto;
  max-width: none;
  min-width: 0;
  float: none;
  left: auto;
  margin: 0;
  padding: 0 clamp(2rem, 4vw, 3.5rem) 0 0;
}

.at-gp.at-shell-layout .site-content > .sidebar {
  grid-column: side-start / side-end;
  width: auto;
  min-width: 0;
  float: none;
  left: auto;
  margin: 0;
  padding: 0;
}

.at-gp.at-shell-layout.no-sidebar .site-content > .content-area {
  grid-column: main-start / side-end;
  padding-right: 0;
}

/* GeneratePress's "separate containers" boxes are not part of this design. */
.at-gp.at-shell-layout .site-main,
.at-gp.at-home .site-main { margin: 0; }

/* It also spaces every child of the main column by 20px; the design's
   sections butt up against each other and carry their own rhythm. */
.at-gp.at-home .site-main > *,
.at-gp.at-shell-layout .site-main > * { margin-bottom: 0; }

.at-gp.at-shell-layout .inside-article,
.at-gp.at-shell-layout .comments-area,
.at-gp.at-shell-layout .paging-navigation {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.at-gp.at-shell-layout .inside-right-sidebar,
.at-gp.at-shell-layout .inside-left-sidebar {
  margin: 0;
  padding: 0;
}

/* The bands carry their own spacing inside the grid. */
.at-gp.at-shell-layout .at-pagehead { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- D2. The article body (GeneratePress's .entry-content) ---------------- */

.at-gp .entry-content.at-prose { margin-top: 0; }
.at-gp .at-prose ul,
.at-gp .at-prose ol { margin-left: 0; }
.at-gp .at-prose > :first-child { margin-top: 0; }

/* GeneratePress pads every group block by its "content padding" setting, which
   indents the opening paragraphs of most articles here. */
.at-gp .at-prose .wp-block-group__inner-container { padding: 0; max-width: none; }
.at-gp .at-prose .page-links { margin-top: 2rem; font-family: var(--at-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }

/* "Featured in" — the site's own trust-logo strip, under every article. */
.at-gp .at-featured-in {
  max-width: 44rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.4rem 1.5rem;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
}
.at-gp .at-featured-in__label {
  margin-bottom: 1rem;
  font-family: var(--at-display);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--at-red);
}
.at-gp .at-featured-in .trust-logotype-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.at-gp .at-featured-in .trust-logotype-item img { display: block; max-height: 34px; width: auto; }

/* The author card the site prints at the top of an author's archive. */
.at-gp .at-authorcard {
  margin-bottom: 2rem;
  padding: 1.4rem 1.5rem;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
}
.at-gp .at-authorcard .author-name { font-family: var(--at-display); font-size: 1.3rem; font-weight: 600; color: var(--at-text); }
.at-gp .at-authorcard .post-dates { font-size: 0.85rem; color: var(--at-muted); }

/* Search field: GeneratePress styles bare inputs, including on :focus. */
.at-gp .at-field .at-field__input,
.at-gp .at-field .at-field__input:focus {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline: none;
  font-family: var(--at-body);
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}
.at-gp .at-field { color: var(--at-text); }
.at-gp .at-drawer .at-field { color: var(--at-bone); }
.at-gp .at-btn { line-height: 1.5; }
.at-gp .at-iconbtn,
.at-gp .at-burger { color: var(--at-ink); }
.at-gp .at-iconbtn { padding: 0; }
.at-gp .at-masthead__tools { margin-left: auto; }

/* --- D3. Sidebar ----------------------------------------------------------
 *
 * GeneratePress's Right Sidebar and its widget markup, redrawn: paper cards,
 * a kicker-style title, and three purpose-built treatments — the table of
 * contents, the design banner, and the theme's own post lists.
 */

.at-gp .sidebar .widget {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--at-paper);
  border: 1px solid var(--at-rule);
  border-radius: 4px;
  box-shadow: var(--at-shadow);
  font-size: 0.98rem;
  overflow: hidden;
}
.at-gp .sidebar .widget:last-child { margin-bottom: 0; }

.at-gp .sidebar .widget-title,
.at-gp .sidebar .widget h2:not([class*="at-"]),
.at-gp .sidebar .widget .wp-block-heading,
.at-gp .sidebar .widget .wp-block-search__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.05rem;
  padding: 0;
  border: 0;
  font-family: var(--at-display);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--at-ink);
}
.at-gp .sidebar .widget-title::before,
.at-gp .sidebar .widget h2:not([class*="at-"])::before,
.at-gp .sidebar .widget .wp-block-heading::before,
.at-gp .sidebar .widget .wp-block-search__label::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--at-red);
}

.at-gp .sidebar .widget ul:not(.at-sidelist) { margin: 0; padding: 0; list-style: none; }
.at-gp .sidebar .widget ul:not(.at-sidelist) ul { padding-left: 1rem; }
.at-gp .sidebar .widget li:not(.at-sidelist__item) { margin: 0; padding: 0.3rem 0; }
.at-gp .sidebar .widget a:not(.at-sidelist__link) { color: var(--at-text); text-decoration: none; }
.at-gp .sidebar .widget a:not(.at-sidelist__link):hover { color: var(--at-red); text-decoration: underline; text-underline-offset: 3px; }

.at-gp .sidebar .widget .wp-block-search__inside-wrapper { display: flex; gap: 0.4rem; }
.at-gp .sidebar .widget input[type="search"],
.at-gp .sidebar .widget input[type="text"],
.at-gp .sidebar .widget input[type="email"],
.at-gp .sidebar .widget select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: var(--at-bone);
  font-size: 0.98rem;
  color: var(--at-text);
}
.at-gp .sidebar .widget button,
.at-gp .sidebar .widget input[type="submit"] {
  margin: 0;
  padding: 0.6rem 0.95rem;
  border: 0;
  border-radius: var(--at-radius);
  background: var(--at-ink);
  color: var(--at-bone);
  font-family: var(--at-display);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.at-gp .sidebar .widget button:hover,
.at-gp .sidebar .widget input[type="submit"]:hover { background: var(--at-red); color: #fff; }
.at-gp .sidebar .widget .at-field { padding: 0.25rem 0.25rem 0.25rem 0.7rem; }
.at-gp .sidebar .widget .at-field .at-btn { background: var(--at-accent); color: #fff; }

/* The design banner: the picture is the widget, edge to edge. */
.at-gp .sidebar .widget .banner {
  margin: -1.4rem -1.4rem -1.5rem;
  background: var(--at-ink-2);
}
.at-gp .sidebar .widget .banner a { display: block; overflow: hidden; }
.at-gp .sidebar .widget .banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-gp .sidebar .widget .banner a:hover img { transform: scale(1.03); }

/* The table of contents: a rail down the left, the current section in ink. */
.at-gp .sidebar .ez-toc-widget-container,
.at-gp .sidebar #ez-toc-container {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
/* The plugin prints an ID-scoped inline rule that enlarges this title; an ID
   outranks any class selector, hence the one !important in this file. */
.at-gp .sidebar .ez-toc-title { font: inherit; font-size: inherit !important; letter-spacing: inherit; color: inherit; }
.at-gp .sidebar .widget nav > .ez-toc-list {
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.at-gp .sidebar .widget ul.ez-toc-list ul { margin: 0.1rem 0 0.2rem; padding-left: 0; border-left: 1px solid var(--at-rule); }
.at-gp .sidebar .widget .ez-toc-list li { padding: 0; }
.at-gp .sidebar .widget .ez-toc-list a {
  display: block;
  padding: 0.34rem 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--at-text-soft);
  text-decoration: none;
}
.at-gp .sidebar .widget .ez-toc-list ul a {
  margin-left: -1px;
  padding-left: 0.9rem;
  border-left: 2px solid transparent;
}
.at-gp .sidebar .widget .ez-toc-list > li > a { font-weight: 600; color: var(--at-text); }
.at-gp .sidebar .widget .ez-toc-list a:hover { color: var(--at-red); text-decoration: none; }
.at-gp .sidebar .widget .ez-toc-list ul a:hover,
.at-gp .sidebar .widget .ez-toc-list ul a.active { border-left-color: var(--at-red); color: var(--at-ink); }
.at-gp .sidebar .widget .ez-toc-list a.active { color: var(--at-ink); font-weight: 600; }

/* The theme's post lists (Most popular, Recent posts). */
.at-gp .at-sidelist { margin: 0; padding: 0; list-style: none; }
.at-gp .at-sidelist__item { margin: 0; padding: 0; border-top: 1px solid var(--at-rule-soft); }
.at-gp .at-sidelist__item:first-child { border-top: 0; }
.at-gp .at-sidelist__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  padding: 0.8rem 0;
  color: inherit;
  text-decoration: none;
}
.at-gp .at-sidelist__item:first-child .at-sidelist__link { padding-top: 0; }
.at-gp .at-sidelist__item:last-child .at-sidelist__link { padding-bottom: 0; }
.at-gp .at-sidelist__body { display: block; min-width: 0; }
.at-gp .at-sidelist__title {
  display: block;
  font-size: 0.98rem;
  line-height: 1.36;
  color: var(--at-text);
  text-wrap: pretty;
  transition: color 0.16s ease;
}
.at-gp .at-sidelist__link:hover .at-sidelist__title { color: var(--at-red); }
.at-gp .at-sidelist__meta {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--at-display);
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--at-muted);
}
.at-gp .at-sidelist__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ranked: outlined numerals that fill on hover, like the home page chart. */
.at-gp .at-sidelist__rank {
  min-width: 1.9rem;
  font-family: var(--at-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px #C9BFAB;
  font-variant-numeric: tabular-nums;
  transition: color 0.18s ease, -webkit-text-stroke-color 0.18s ease;
}
.at-gp .at-sidelist__link:hover .at-sidelist__rank { color: var(--at-red); -webkit-text-stroke-color: var(--at-red); }

/* The leader carries its picture, with its rank stamped on the corner. */
.at-gp .at-sidelist__item--lead .at-sidelist__link {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.95rem;
}
.at-gp .at-sidelist__art {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: var(--at-ink-2);
}
.at-gp .at-sidelist__art .at-sidelist__img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.at-gp .at-sidelist__link:hover .at-sidelist__art .at-sidelist__img { transform: scale(1.05); }
.at-gp .at-sidelist__item--lead .at-sidelist__rank {
  position: absolute;
  top: 0; left: 0;
  min-width: 0;
  padding: 0.3rem 0.6rem 0.34rem;
  border-radius: 3px 0 3px 0;
  background: var(--at-ink);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--at-ochre);
  -webkit-text-stroke: 0;
}
.at-gp .at-sidelist__item--lead .at-sidelist__link:hover .at-sidelist__rank { color: var(--at-ochre); }
.at-gp .at-sidelist__item--lead .at-sidelist__title {
  font-family: var(--at-display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.18;
}

/* Recent: a small picture beside each title. */
.at-gp .at-sidelist--recent .at-sidelist__link { align-items: center; }
.at-gp .at-sidelist__thumb {
  position: relative;
  display: block;
  width: 76px;
  height: 58px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--at-ink-2);
}
.at-gp .at-sidelist__thumb .at-plate__glyph { width: 22px; height: 22px; }

@supports not (-webkit-text-stroke: 1px black) {
  .at-gp .at-sidelist__rank { color: var(--at-muted); }
}

/* --- D4. Comments (GeneratePress markup) ---------------------------------- */

.at-gp.at-shell-layout .comments-area {
  max-width: 44rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.at-gp .comments-title,
.at-gp .comment-reply-title {
  display: block;
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--at-ink);
  font-family: var(--at-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.at-gp .comment-list { margin: 0 0 2rem; padding: 0; list-style: none; }
.at-gp .comment-list .children { margin: 1.25rem 0 0; padding-left: 1.5rem; border-left: 1px solid var(--at-rule); list-style: none; }
.at-gp .comment-body { padding: 0 0 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--at-rule-soft); }
.at-gp .comment-content,
.at-gp .comment .children { background: none; border: 0; }
.at-gp .comment-content { padding: 0; margin-top: 0.75rem; }
.at-gp .comment-author .avatar { border-radius: 50%; }
.at-gp .comment-author-info .fn,
.at-gp .comment-author cite { font-family: var(--at-display); font-style: normal; font-weight: 500; font-size: 1.02rem; }
.at-gp .comment-metadata,
.at-gp .entry-meta.comment-metadata { font-size: 0.8rem; color: var(--at-muted); }
.at-gp .comment-metadata a { color: inherit; text-decoration: none; }
.at-gp .comment-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--at-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--at-muted);
}
.at-gp .comment-form input[type="text"],
.at-gp .comment-form input[type="email"],
.at-gp .comment-form input[type="url"],
.at-gp .comment-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
  background: var(--at-paper);
  color: var(--at-text);
  font-size: 1rem;
}
.at-gp .comment-form textarea { min-height: 9rem; }
.at-gp .comment-form input:focus,
.at-gp .comment-form textarea:focus { border-color: var(--at-accent); background: var(--at-paper); }
.at-gp .comment-form .submit,
.at-gp .comment-form input[type="submit"] {
  padding: 0.72rem 1.3rem;
  border: 0;
  border-radius: var(--at-radius);
  background: var(--at-red);
  color: #fff;
  font-family: var(--at-display);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.at-gp .comment-form .submit:hover { background: var(--at-red-lit); }

/* --- D5. Pages, left to GeneratePress and only dressed -------------------- */

.at-gp .entry-title { letter-spacing: -0.015em; }
.at-gp.separate-containers:not(.at-shell-layout):not(.at-home) .inside-article {
  border: 1px solid var(--at-rule);
  border-radius: var(--at-radius);
}
.at-gp .generate-back-to-top,
.at-gp .generate-back-to-top:visited { background: var(--at-ink); color: var(--at-bone); border-radius: var(--at-radius); }
.at-gp .generate-back-to-top:hover { background: var(--at-red); color: #fff; }
.at-gp .site-footer { background: none; }
.at-gp .screen-reader-text.skip-link:focus {
  background: var(--at-ink);
  color: var(--at-bone);
  font-family: var(--at-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The 404 sits in the content column; give it the design's breathing room. */
.at-gp.at-shell-layout.error404 .site-content { padding-top: clamp(3rem, 8vw, 6rem); }
.at-gp .at-404 { padding: 0; }
.at-gp .at-404 > * { max-width: 40rem; }

/* Narrow screens: one column, sidebar under the content. */
@media (max-width: 1080px) {
  .at-gp.at-shell-layout .site-content {
    grid-template-columns:
      [full-start] var(--at-gutter)
      [main-start] minmax(0, 1fr)
      [side-start side-end] var(--at-gutter) [full-end];
  }
  .at-gp.at-shell-layout .site-content > .content-area,
  .at-gp.at-shell-layout.no-sidebar .site-content > .content-area {
    grid-column: main-start / side-start;
    padding-right: 0;
  }
  .at-gp.at-shell-layout .site-content > .sidebar {
    grid-column: main-start / side-start;
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
  }
}

/* ==========================================================================
   E. Responsive and motion
   ========================================================================== */

@media (max-width: 1080px) {
  .at-gp .at-layout { grid-template-columns: minmax(0, 1fr); }
  .at-gp .at-side__inner > :last-child { position: static; }
  .at-gp .at-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-gp .at-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .at-gp .at-nav,
  .at-gp .at-masthead__cta { display: none; }
  .at-gp .at-burger { display: flex; }
  .at-gp .at-promise__item--last { display: none; }
  .at-gp .at-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .at-gp .at-hero__mark { justify-self: start; margin-top: 0.5rem; }
  .at-gp .at-hero__mark--photos { width: auto; aspect-ratio: auto; }
  .at-gp .at-photo { display: none; }
  .at-gp .at-hero__mark--photos .at-stamp {
    position: relative;
    right: auto; bottom: auto;
    width: clamp(170px, 18vw, 232px);
    background: none;
    box-shadow: none;
  }
  .at-gp .at-hero__mark--photos .at-stamp__text { font-size: 13.5px; letter-spacing: 2.4px; }
  .at-gp .at-promo__inner,
  .at-gp .at-news__inner { grid-template-columns: minmax(0, 1fr); }
  .at-gp .at-flash { max-width: 19rem; }
}

@media (max-width: 620px) {
  body.at-gp { font-size: 1.02rem; }
  .at-gp .at-promise { gap: 1rem; font-size: 0.64rem; letter-spacing: 0.1em; }
  .at-gp .at-promise__item:nth-child(2) { display: none; }
  .at-gp .at-stats { grid-template-columns: minmax(0, 1fr); }
  .at-gp .at-cards { margin-top: -2.5rem; }
  .at-gp .at-read__art { display: none; }
  .at-gp .at-byline { gap: 0.75rem; }
  .at-gp .at-badges { margin-left: 0; }
  .at-gp .at-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .at-gp .at-prose { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .at-gp [class^="at-"],
  .at-gp [class*=" at-"],
  .at-gp [class*="at-"]::before,
  .at-gp [class*="at-"]::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .at-gp .at-stamp__ring,
  .at-gp .at-press__track { animation: none; }
  .at-gp .at-reveal { opacity: 1; transform: none; }
}