/*
Theme Name: Quiet Repetition
Theme URI: https://quietrepetition.com/
Author: AXX Data Ltd
Author URI: https://www.axxdata.com/
Description: Single-page brand theme for Quiet Repetition — advertising placement for specialist B2B firms, a brand of AXX Data Ltd. Deliberately quiet: no front-end JavaScript, no tracking, no navigation chrome. All front-page copy is editable under Appearance > Customize > Quiet Repetition copy.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
License URI: https://quietrepetition.com/site-terms/
Text Domain: quiet-repetition
Tags: one-column, custom-colors, custom-menu, editor-style
*/

/* ============================================================
   QUIET REPETITION
   A warmer, print-tempered sibling to Maecer under AXX Data Ltd:
   the same restraint and dark ground, but paper-bone text, a
   whisper of aged gold, and a readerly serif — because this brand
   comes from publishing. The medium is the message: a quiet page
   is itself the promise that we won't hound anyone.
   ============================================================ */

:root{
  --ink:      #15140F;   /* warm near-black. The page. */
  --ink-2:    #1C1A13;   /* barely-raised surface */
  --bone:     #ECE6D6;   /* primary text. Warm off-white, never #fff */
  --muted:    #918B7B;   /* secondary text, labels */
  --muted-2:  #6E6A5C;   /* legal / footer */
  --gold:     #C0A063;   /* accent. Aged, used by the drop */
  --faint:    rgba(236,230,214,0.11);   /* hairlines */
  --faint-2:  rgba(236,230,214,0.05);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 39rem;          /* reading measure for hero + sections */
  --measure-prose: 42rem;    /* inner pages */
  --gutter: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height: 1.62;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(192,160,99,0.24); }

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

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

/* Accessible hidden text (skip links, labels) */
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared column ----------
   Gutters and the composition width are carried by .wrap, not by body
   padding, so core's global-styles `body{padding:0}` cannot collapse
   them. .wrap opens in header.php and closes in footer.php, so it
   encloses the nameplate, the page, and the standing line alike. */
.wrap{
  max-width: calc(var(--measure) + 6rem);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 640px){ :root{ --gutter: 1.5rem; } }

.eyebrow{
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Nameplate ---------- */
.top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(2rem, 5vw, 3.4rem);
  padding-bottom: clamp(3.4rem, 9vw, 6rem);
}
.mark{
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  letter-spacing: 0.03em;
  color: var(--bone);
}
.mark a{ color: inherit; }
.mark .dot{ color: var(--gold); }

.top-mail{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.top-mail:hover{ color: var(--bone); }
@media (max-width: 520px){ .top-mail{ display: none; } }

/* ---------- Hero + the signature echo ---------- */
.hero{
  position: relative;
  padding-bottom: clamp(3.4rem, 8vw, 5.5rem);
}
.hero-inner{ position: relative; z-index: 2; max-width: var(--measure); }
.hero .eyebrow{ display: block; margin-bottom: 1.6rem; }

h1{
  font-family: var(--serif);
  font-weight: 300;   /* a dark ground thickens type; go lighter */
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.7rem;
  max-width: 20ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.lede{
  color: var(--bone);
  max-width: var(--measure);
  margin: 0 0 2rem;
}
.lede:last-child{ margin-bottom: 0; }
.lede.soft{ color: var(--muted); }

/* The name, set down and quieting — the service performed on the brand
   itself. Purely decorative, so it is aria-hidden and dropped on small
   screens. Its resting state is the faint final opacity; the fade-in is
   layered on only where motion is welcome, so a blocked animation can
   never blank it. */
.echo{
  position: absolute;
  top: -0.4rem; right: -1rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  text-align: right;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: 0.01em;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}
.echo span{ color: var(--bone); opacity: var(--o); }
.echo span:nth-child(1){ --o: 0.20; }
.echo span:nth-child(2){ --o: 0.13; }
.echo span:nth-child(3){ --o: 0.09; }
.echo span:nth-child(4){ --o: 0.06; }
.echo span:nth-child(5){ --o: 0.04; }
.echo span:nth-child(6){ --o: 0.025; }
@media (max-width: 860px){ .echo{ display: none; } }

/* ---------- Rule ---------- */
.rule{
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--faint);
}

/* ---------- Body sections ---------- */
.section{ padding-block: clamp(2.8rem, 6vw, 4.2rem); }
.section p{ max-width: var(--measure); margin: 0 0 1.1rem; }
.section p:last-child{ margin-bottom: 0; }
.section-label{ display: block; margin-bottom: 1.4rem; }

/* How it works — a genuine sequence, so the numerals carry information */
.steps{ list-style: none; margin: 0; padding: 0; }
.step{
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1.4rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--faint);
  max-width: var(--measure);
}
.step:first-child{ border-top: 0; padding-top: 0; }
.step:last-child{ padding-bottom: 0; }
.step-n{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding-top: 0.42rem;
}
.step h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.35;
  margin: 0 0 0.35rem;
  color: var(--bone);
}
.step p{
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

/* ---------- Contact ---------- */
.contact{ padding-block: clamp(3rem, 7vw, 4.6rem); }
.contact .say{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 1.5rem;
  max-width: 24ch;
  color: var(--bone);
}
a.link{
  color: var(--bone);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
a.link:hover{ color: var(--gold); }
.contact .mail{
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

/* ---------- Standing / footer ---------- */
.foot{
  padding-top: clamp(2.6rem, 6vw, 3.6rem);
  padding-bottom: clamp(2.6rem, 6vw, 3.6rem);
  border-top: 1px solid var(--faint);
  color: var(--muted-2);
}
.brand-of{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.brand-of a{
  color: var(--bone);
  border-bottom: 1px solid var(--faint);
  padding-bottom: 1px;
  transition: border-color 0.25s ease;
}
.brand-of a:hover{ border-bottom-color: var(--gold); }

.foot-links{
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-links li{ margin: 0; }
.foot-links a{ color: var(--muted); transition: color 0.25s ease; }
.foot-links a:hover{ color: var(--bone); }

.reg{
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--muted-2);
  line-height: 1.7;
}
.reg .sep{ padding: 0 0.5rem; opacity: 0.5; }

/* ---------- Inner pages: Site terms, Privacy policy, 404, fallbacks ----------
   The block editor writes these, so styling targets the plain tags
   the_content() emits. Kept in the same quiet register as the front. */
.prose{
  max-width: var(--measure-prose);
  padding: clamp(2.4rem, 6vw, 3.6rem) 0 clamp(3rem, 8vw, 4.6rem);
}
.prose-title{
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.prose h2, .prose h3{
  margin: 2.4em 0 0.7em;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.35;
  color: var(--bone);
}
.prose h2{ font-size: 1.32rem; }
.prose h3{ font-size: 1.1rem; }
.prose p, .prose li{ color: var(--bone); }
.prose p{ margin: 0 0 1.3em; }
.prose ul, .prose ol{ margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li{ margin-bottom: 0.5em; }
.prose a{
  color: var(--bone);
  border-bottom: 1px solid rgba(192,160,99,0.5);
  transition: border-color 0.25s ease;
}
.prose a:hover{ border-bottom-color: var(--gold); }
.prose strong{ color: var(--bone); font-weight: 500; }
.prose blockquote{
  margin: 1.8em 0;
  padding-left: 1.3em;
  border-left: 1px solid var(--faint);
  color: var(--muted);
}
.prose hr{ height: 1px; margin: 2.4em 0; background: var(--faint); border: 0; }
.prose img{ max-width: 100%; height: auto; }
.prose table{ width: 100%; border-collapse: collapse; margin: 0 0 1.3em; font-size: 0.95rem; }
.prose th, .prose td{ padding: 0.6em 0.9em 0.6em 0; text-align: left; border-bottom: 1px solid var(--faint); }
.prose th{ color: var(--bone); font-weight: 500; }

/* ---------- The one moment of motion ----------
   The echo settles in over ~1.5s on load, then nothing moves again.
   Layered on only where motion is welcome. */
@keyframes settle{
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: var(--o); transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  .echo span{ opacity: 0; transform: translateY(-3px); animation: settle 0.9s ease forwards; }
  .echo span:nth-child(1){ animation-delay: 0.15s; }
  .echo span:nth-child(2){ animation-delay: 0.45s; }
  .echo span:nth-child(3){ animation-delay: 0.75s; }
  .echo span:nth-child(4){ animation-delay: 1.05s; }
  .echo span:nth-child(5){ animation-delay: 1.35s; }
  .echo span:nth-child(6){ animation-delay: 1.65s; }
}

/* ---------- Small screens ---------- */
@media (max-width: 30rem){
  .top{ gap: 0.6rem; }
  .step{ grid-template-columns: 2.6rem 1fr; }
  .reg{ line-height: 1.9; }
}

/* ---------- Logged-in admin bar ----------
   Only ever seen by logged-in users. The page isn't viewport-locked, so
   the bar simply adds height; nothing to compensate. Left here as a note
   in case a future change pins the footer to the viewport. */