/* The Yarn design system.
   Every value here is transcribed from docs/BRAND.md in the app repository. Change it there
   first, then here, or the site and the app drift apart and nobody can say which is right. */

:root {
  /* Colour, dark ground (BRAND.md 2) */
  --y-background: #121110;
  --y-surface: #1C1A18;
  --y-line: #2E2B28;
  --y-text: #F4F0EA;
  --y-quiet: #A09A92;
  --y-accent: #EF4F4F;
  --y-accent-pressed: #C93A3A;
  --y-written: #D9C9A8;
  --y-saved: #6F7D5F;

  /* Paper ground */
  --y-paper: #F4F0EA;
  --y-paper2: #E6E0D6;
  --y-paper-text: #4A453F;
  --y-paper-quiet: #5C564E;
  --y-paper-line: #C9C1B4;
  --y-paper-accent: #A82C2C;

  /* Type (BRAND.md 3) */
  --y-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --y-neutral: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --y-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (BRAND.md 4) */
  --y-s1: 4px;  --y-s2: 8px;  --y-s3: 12px; --y-s4: 20px;
  --y-s5: 32px; --y-s6: 52px; --y-s7: 84px;
  --y-margin: 24px;

  /* Radii */
  --y-r-sm: 12px; --y-r-media: 16px; --y-r-card: 18px; --y-r-sheet: 28px;

  --y-tap: 44px;
  --y-measure: 68ch;
  --y-band: clamp(56px, 9vw, 116px);   /* vertical rhythm of a section */
  --y-gutter: clamp(20px, 5.5vw, 48px);
  --y-maxw: 1120px;
}

/* ---------------------------------------------------------------- type
   Elementor's generated post-N.css sets Roboto at a specificity this has to beat.
   That is what the !important flags are for; they are not laziness. */

body,
body p, body li, body td,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--y-neutral) !important;
}

h1, h2, h3,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--y-display) !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: none;      /* the wordmark and headings are lowercase (BRAND.md 3) */
  line-height: 1.04;
}

h4, h5, h6,
.elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--y-neutral) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

body {
  background: var(--y-background);
  color: var(--y-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fluid scale. Clamped so a phone never gets a headline that wraps to six lines
   and a desktop never gets one that looks timid. */
h1, .y-display { font-size: clamp(2.35rem, 7.5vw, 4.6rem); }
h2             { font-size: clamp(1.85rem, 5vw, 3rem); }
h3             { font-size: clamp(1.3rem, 3.2vw, 1.75rem); }

p { max-width: var(--y-measure); }

/* The mono eyebrow (BRAND.md 3: 10-11px, uppercase, 0.08em) */
.y-eyebrow {
  font-family: var(--y-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--y-quiet);
  margin: 0 0 var(--y-s3);
  display: block;
}
.y-paper .y-eyebrow { color: var(--y-paper-quiet); }

/* ---------------------------------------------------------------- grounds */

.y-dark  { background: var(--y-background); color: var(--y-text); }
.y-paper { background: var(--y-paper);      color: var(--y-paper-text); }
.y-paper h1, .y-paper h2, .y-paper h3, .y-paper h4 { color: var(--y-background); }
.y-paper a { color: var(--y-paper-accent); }

/* ---------------------------------------------------------------- spacing
   The reported problem. Bands get real vertical rhythm and a gutter that grows
   with the viewport rather than a fixed 20px that suffocates a phone. */

.y-band {
  padding-block: var(--y-band);
  padding-inline: var(--y-gutter);
}
.y-wrap {
  max-width: var(--y-maxw);
  margin-inline: auto;
  width: 100%;
}
.y-band > * + * { margin-top: var(--y-s5); }

/* Elementor's own sections, brought onto the same rhythm */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--y-maxw); }
main .elementor-top-section { padding-inline: var(--y-gutter); }

/* ---------------------------------------------------------------- the one action
   Coral marks the thread and the one action, nothing else (BRAND.md 2). */

.y-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--y-s2);
  min-height: 52px;                 /* above the 44 minimum: this is the one action */
  padding: 0 var(--y-s5);
  border-radius: 999px;
  background: var(--y-accent);
  color: var(--y-background);
  font-family: var(--y-neutral);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  transition: background 140ms ease, transform 140ms ease;
}
.y-cta:hover, .y-cta:focus-visible { background: var(--y-accent-pressed); color: var(--y-background); }
.y-cta:active { transform: translateY(1px); }
.y-paper .y-cta { background: var(--y-paper-accent); color: var(--y-paper); }

/* The quiet second option beside it. Never a second coral. */
.y-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--y-s4);
  color: var(--y-quiet);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.y-ghost:hover, .y-ghost:focus-visible { color: var(--y-text); border-bottom-color: var(--y-line); }
.y-paper .y-ghost { color: var(--y-paper-quiet); }
.y-paper .y-ghost:hover { color: var(--y-background); }

.y-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y-s3) var(--y-s4);
  margin-top: var(--y-s5);
}

/* ---------------------------------------------------------------- the thread
   The one illustration the brand owns (BRAND.md 1). Once per page, never more. */

.y-thread {
  display: block;
  width: 100%;
  height: 3px;
  border: 0;
  margin: var(--y-s6) 0 0;
  background: linear-gradient(to right,
              var(--y-accent) 0 var(--y-thread-live, 38%),
              var(--y-line) var(--y-thread-live, 38%) 100%);
  border-radius: 999px;
}
.y-paper .y-thread {
  background: linear-gradient(to right,
              var(--y-paper-accent) 0 var(--y-thread-live, 38%),
              var(--y-paper-line) var(--y-thread-live, 38%) 100%);
}

/* ---------------------------------------------------------------- cards */

.y-cards {
  display: grid;
  gap: var(--y-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: var(--y-s5);
}
.y-card {
  background: var(--y-surface);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-card);
  padding: var(--y-s5);
}
.y-card h3 { margin: 0 0 var(--y-s3); }
.y-card p  { margin: 0; color: var(--y-quiet); }
/* Audience cards go on paper2 and never on white (BRAND.md 7) */
.y-paper .y-card { background: var(--y-paper2); border-color: var(--y-paper-line); }
.y-paper .y-card p { color: var(--y-paper-quiet); }

/* ---------------------------------------------------------------- header and nav */

.y-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--y-s4);
  padding: var(--y-s4) var(--y-gutter);
  max-width: var(--y-maxw);
  margin-inline: auto;
  flex-wrap: wrap;
}
.y-nav-links { display: flex; align-items: center; gap: var(--y-s4); flex-wrap: wrap; }
.y-nav-links a {
  color: var(--y-quiet);
  text-decoration: none;
  font-size: 0.95rem;
  min-height: var(--y-tap);
  display: inline-flex;
  align-items: center;
}
.y-nav-links a:hover, .y-nav-links a[aria-current="page"] { color: var(--y-text); }

/* ---------------------------------------------------------------- writing (the blog) */

.y-article { padding-block: var(--y-band); padding-inline: var(--y-gutter); }
.y-article-head { max-width: 760px; margin-inline: auto; }
.y-prose { max-width: 68ch; margin-inline: auto; font-size: 1.0625rem; }
.y-prose > * + *  { margin-top: var(--y-s4); }
.y-prose h2 { margin-top: var(--y-s6); font-size: clamp(1.5rem, 3.6vw, 2rem); }
.y-prose h3 { margin-top: var(--y-s5); }
.y-prose ul, .y-prose ol { padding-left: 1.25em; }
.y-prose li + li { margin-top: var(--y-s2); }
.y-prose a { color: var(--y-accent); text-underline-offset: 3px; }
.y-paper .y-prose a { color: var(--y-paper-accent); }
.y-prose blockquote {
  margin: var(--y-s5) 0;
  padding-left: var(--y-s4);
  border-left: 2px solid var(--y-accent);
  color: var(--y-quiet);
  font-size: 1.15rem;
}
/* Tables in the posts: the existing ones use them well, and they must scroll on a phone
   rather than pushing the page sideways. */
.y-prose .y-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.y-prose table { border-collapse: collapse; width: 100%; min-width: 380px; font-size: 0.95rem; }
/* The scroller is only obvious if its edge is: a hairline says there is more to the right. */
.y-prose .y-tablewrap { border-radius: var(--y-r-sm); }
@media (max-width: 640px) {
  .y-prose table { font-size: 0.9rem; }
  .y-prose th, .y-prose td { padding: var(--y-s2) var(--y-s3); }
}
.y-prose th, .y-prose td { text-align: left; padding: var(--y-s3); border-bottom: 1px solid var(--y-line); vertical-align: top; }
.y-prose th { font-family: var(--y-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--y-quiet); font-weight: 400; }
.y-paper .y-prose th, .y-paper .y-prose td { border-bottom-color: var(--y-paper-line); }

/* The index */
.y-posts { display: grid; gap: var(--y-s4); margin-top: var(--y-s6); }
.y-post-row {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--y-s5);
  border: 1px solid var(--y-line);
  border-radius: var(--y-r-card);
  background: var(--y-surface);
  transition: border-color 140ms ease;
}
.y-post-row:hover { border-color: var(--y-accent); }
.y-post-row h2 { font-size: clamp(1.3rem, 3.4vw, 1.9rem); margin: 0 0 var(--y-s3); }
.y-post-row p { margin: 0; color: var(--y-quiet); }
.y-post-cover { border-radius: var(--y-r-media); width: 100%; height: auto; display: block; margin-bottom: var(--y-s4); }

/* ---------------------------------------------------------------- mobile
   Every one of these is a defect somebody would have reported. */

@media (max-width: 640px) {
  :root { --y-band: 52px; }
  body { font-size: 16.5px; }
  h1, .y-display { letter-spacing: -0.03em; }   /* tight tracking hurts more at small sizes */
  .y-actions { gap: var(--y-s3); }
  .y-cta, .y-ghost { width: 100%; }             /* thumb-sized, not a 120px target */
  .y-card { padding: var(--y-s4); }
  .y-prose { font-size: 1.05rem; }              /* body copy does not shrink on a phone */
  .y-nav { padding-block: var(--y-s3); }
  .y-nav-links { gap: var(--y-s3); width: 100%; }
}

/* Nothing may push the page sideways. */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe, svg { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- a11y */

a:focus-visible, button:focus-visible, .y-cta:focus-visible {
  outline: 2px solid var(--y-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.y-skip {
  position: absolute; left: -9999px;
}
.y-skip:focus {
  left: var(--y-gutter); top: var(--y-s3); z-index: 100;
  background: var(--y-accent); color: var(--y-background);
  padding: var(--y-s3) var(--y-s4); border-radius: var(--y-r-sm);
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ------------------------------------------------------------------ the page's own system
   The homepage, privacy and support pages carry an inline stylesheet using `yarn-*` classes and
   `--y-ground` tokens. It is well built and already correct on colour and type. Its one fault was
   that nothing ever LOADED the three faces, so every font-family in it fell through to Impact and
   Arial and the browser painted Elementor's Roboto instead. The theme loads them, so that sheet
   now renders as it was written.

   What follows only fixes what that sheet cannot fix from where it sits. Nothing here restyles it. */

/* Its tokens, mapped to ours, so one change moves both. */
.yarn-wrap {
  --y-ground: var(--y-background);
  --y-coral: var(--y-accent);
  --y-coral-deep: var(--y-paper-accent);
  --y-wool: var(--y-written);
  --y-ink: var(--y-background);
  --y-ink-body: var(--y-paper-text);
  --y-ink-quiet: var(--y-paper-quiet);
  --y-rule: var(--y-paper-line);
}

/* Long words and URLs must wrap rather than push the page sideways on a phone. */
.yarn-wrap p, .yarn-wrap h1, .yarn-wrap h2, .yarn-wrap h3, .yarn-wrap li {
  overflow-wrap: break-word;
}

/* Buttons: full width on a phone so they are thumb sized and cannot overflow the gutter. */
@media (max-width: 640px) {
  .yarn-cta, .yarn-cta-2 { width: 100%; justify-content: center; margin-right: 0; }
  .yarn-band { padding: 52px 20px; }
  .yarn-grid-3, .yarn-grid-2 { gap: 24px; }
  .yarn-display { letter-spacing: -0.025em; }   /* tight tracking hurts most at small sizes */
}

/* The site header. It carried the WordPress title in the theme's own colour, which rendered
   magenta against the brand ground; and the site had no navigation at all, so three published
   posts were reachable only by typing their URL. */
.site-header, .site-header.dynamic-header {
  background: var(--y-background);
  border-bottom: 1px solid var(--y-line);
  padding: 0;
}
.site-header .site-title, .site-header .site-title a {
  font-family: var(--y-display) !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--y-text) !important;
  text-transform: lowercase;
  text-decoration: none;
}
.site-header .site-description { color: var(--y-quiet); font-family: var(--y-neutral); }

/* Never a horizontal scrollbar, whatever a page puts in a table. */
body { overflow-x: hidden; }


/* The theme header duplicated the wordmark above our own nav, so every page opened with the
   name twice. Our nav carries the wordmark and the links, so the parent header stands down on
   the pages that render it. */
body.blog .site-header,
body.single .site-header { display: none; }

/* The nav's own action is a small pill, not the page's full-width primary button. */
.y-nav .y-cta { width: auto; min-height: 44px; padding: 0 20px; font-size: 0.95rem; }
@media (max-width: 640px) {
  .y-nav { gap: var(--y-s2); }
  .y-nav-links { justify-content: flex-start; }
  .y-nav .y-cta { margin-left: auto; }
}

/* Cover art is 16:9 and must not be letterboxed inside the card. */
.y-post-cover { aspect-ratio: 16 / 9; object-fit: cover; background: var(--y-surface); }


/* ------------------------------------------------------------------ the header
   Was: a wordmark alone, no navigation, the mark nowhere on the site. */

.y-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--y-s4) var(--y-s5); flex-wrap: wrap;
  max-width: var(--y-maxw); margin-inline: auto;
  padding: var(--y-s3) var(--y-gutter);
}
.y-head-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--y-text); text-decoration: none;
  font-family: var(--y-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.035em;
}
.y-head-brand svg { display: block; color: var(--y-accent); }
.y-head-nav { display: flex; align-items: center; gap: var(--y-s4); flex-wrap: wrap; }
.y-head-nav a {
  color: var(--y-quiet); text-decoration: none; font-size: 0.95rem;
  min-height: var(--y-tap); display: inline-flex; align-items: center;
}
.y-head-nav a:hover, .y-head-nav a[aria-current="page"] { color: var(--y-text); }
.y-cta-sm { min-height: 40px; padding: 0 18px; font-size: 0.95rem; width: auto; }

/* The parent theme's own header is replaced by ours. */
.site-header { display: none !important; }

/* ------------------------------------------------------------------ the app, shown
   A visual product with no picture of it was the biggest gap on the page. */

.y-phones {
  display: grid; gap: var(--y-s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: var(--y-s6);
}
.y-phone { margin: 0; }
.y-phone img {
  display: block; width: 100%; height: auto;
  border-radius: 26px;
  border: 1px solid var(--y-line);
  background: var(--y-surface);
}
.y-phone figcaption { display: block; margin-top: var(--y-s4); }
.y-phone figcaption strong { display: block; font-weight: 600; font-size: 1.05rem; }
.y-phone figcaption span { display: block; margin-top: 6px; color: var(--y-quiet); font-size: 0.95rem; }

/* Three across on the home page, so the cards do not stretch. */
.y-posts-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.y-posts-3 .y-post-row h3 { font-size: 1.15rem; margin: var(--y-s3) 0; line-height: 1.25; }
.y-paper .y-post-row { background: var(--y-paper2); border-color: var(--y-paper-line); }
.y-paper .y-post-row p { color: var(--y-paper-quiet); }
.y-paper .y-post-row:hover { border-color: var(--y-paper-accent); }

@media (max-width: 640px) {
  .y-head { padding-block: var(--y-s2); }
  .y-head-nav { gap: var(--y-s3); width: 100%; }
  .y-head-nav .y-cta-sm { margin-left: auto; }
  .y-phones { gap: var(--y-s5); }
}

/* Apple's App Store badge: shown as Apple draws it, never restyled. */
.y-badge { display: inline-block; line-height: 0; border: 0 !important; background: none !important; }
.y-badge img { display: block; height: 54px; width: auto; max-width: none; }