/* ==========================================================================
   CraftNest — Base
   Element defaults and the four typography roles. Fredoka is scoped to a
   single badge class so it cannot leak into headings or buttons.
   ========================================================================== */

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

/*
 * The header is sticky, so every in-page jump -- the contents rail on an
 * article or a legal page, the reply link on a comment -- landed its target at
 * y 0 and the header sat straight on top of it. On a phone that hid the whole
 * heading you had just asked for. One line of scroll padding parks the target
 * below the header instead.
 */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cn-header) + var(--cn-space-4));
}

body {
  margin: 0;
  background: var(--cn-paper);
  color: var(--cn-ink);
  font-family: var(--cn-font-body);
  font-size: var(--cn-fs-16);
  font-weight: 400;
  line-height: var(--cn-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

body.cn-scroll-locked { overflow: hidden; }

/* --- Links ---------------------------------------------------------------- */

a {
  color: var(--cn-accent);
  text-decoration: none;
  transition: color var(--cn-ease);
}
a:hover { color: var(--cn-accent-dark); }
a:where(.cn-inline-link):hover,
.cn-prose a:hover { text-decoration: underline; }

/* --- Focus. One visible ring, accent, never removed ----------------------- */

:focus-visible {
  outline: 2px solid var(--cn-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.cn-on-ink :focus-visible { outline-color: var(--cn-on-fill); }

/* --- Headings. Instrument Sans 600, tracking tightens above 32px ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cn-font-display);
  font-weight: 600;
  color: inherit;
  margin: 0 0 var(--cn-space-4);
  text-wrap: pretty;
}

h1 { font-size: var(--cn-fs-60); line-height: 1.04; letter-spacing: var(--cn-track-tight); }
h2 { font-size: var(--cn-fs-32); line-height: 1.15; letter-spacing: var(--cn-track-tight); }
h3 { font-size: var(--cn-fs-24); line-height: var(--cn-lh-title); }
h4 { font-size: var(--cn-fs-20); line-height: 1.3; }
h5 { font-size: var(--cn-fs-18); line-height: 1.35; }
h6 { font-size: var(--cn-fs-16); line-height: 1.4; }

/* Display sizes, used on hero and specimen only. */
.cn-display-76 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-76); line-height: var(--cn-lh-tight); letter-spacing: var(--cn-track-tight); margin: 0; text-wrap: pretty; }
.cn-display-60 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-60); line-height: 1.05;             letter-spacing: var(--cn-track-tight); margin: 0; text-wrap: pretty; }
.cn-display-44 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-44); line-height: var(--cn-lh-head); letter-spacing: var(--cn-track-tight); margin: 0; text-wrap: pretty; }
.cn-display-32 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-32); line-height: 1.15;             letter-spacing: var(--cn-track-tight); margin: 0; text-wrap: pretty; }
.cn-display-24 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-24); line-height: var(--cn-lh-title); margin: 0; }
.cn-display-20 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-20); line-height: 1.3; margin: 0; }
.cn-display-18 { font-family: var(--cn-font-display); font-weight: 600; font-size: var(--cn-fs-18); line-height: 1.35; margin: 0; }

/* --- Body copy ------------------------------------------------------------ */

p { margin: 0 0 var(--cn-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.cn-lead   { font-size: var(--cn-fs-18); }
.cn-muted  { color: var(--cn-graphite); }
.cn-small  { font-size: var(--cn-fs-14); color: var(--cn-graphite); }
.cn-strong { font-weight: 500; color: var(--cn-ink); }

/* --- Mono meta. Uppercase, 0.06em, 12px. Every technical run uses this. --- */

.cn-mono {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  font-weight: 400;
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
}
.cn-mono--ink    { color: var(--cn-ink); }
.cn-mono--accent { color: var(--cn-accent); }
.cn-mono--stack  { line-height: var(--cn-lh-mono); }
.cn-mono--11     { font-size: 11px; }
.cn-mono--plain  { text-transform: none; }
.cn-mono a { color: inherit; }
.cn-mono a:hover { color: var(--cn-accent); }
.cn-on-ink .cn-mono { color: var(--cn-white-a60); }

/* Eyebrow above a section heading. */
.cn-eyebrow {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-accent);
  margin-bottom: var(--cn-space-2);
  display: block;
}
.cn-on-ink .cn-eyebrow { color: var(--cn-accent-soft); }

/* --- Lists ---------------------------------------------------------------- */

ul, ol { margin: 0 0 var(--cn-space-4); padding-inline-start: 20px; }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin-bottom: var(--cn-space-2); }
li:last-child { margin-bottom: 0; }

.cn-list-plain { list-style: none; padding: 0; margin: 0; }
.cn-list-2col  { columns: 2; column-gap: var(--cn-space-8); }
@media (max-width: 600px) { .cn-list-2col { columns: 1; } }

/* --- Media ---------------------------------------------------------------- */

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
svg { flex-shrink: 0; }

figure { margin: 0; }
figcaption {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-12);
  letter-spacing: var(--cn-track-mono);
  text-transform: uppercase;
  color: var(--cn-graphite);
  margin-top: var(--cn-space-3);
}

/* --- Forms inherit the page font ------------------------------------------ */

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* --- Tables --------------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; }

/* --- Details / summary. No native marker, ours is a plus and minus -------- */

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

/* --- Horizontal rule ------------------------------------------------------ */

hr {
  border: 0;
  border-top: 1px solid var(--cn-line);
  margin: var(--cn-space-8) 0;
}

/* --- Blockquote ----------------------------------------------------------- */

blockquote {
  margin: var(--cn-space-8) 0;
  padding: var(--cn-space-6) 28px;
  border-inline-start: 2px solid var(--cn-accent);
  background: var(--cn-surface);
  border-radius: 0 var(--cn-radius-card) var(--cn-radius-card) 0;
}
blockquote p {
  margin: 0;
  font-size: var(--cn-fs-20);
  line-height: 1.5;
}

/* --- Code ----------------------------------------------------------------- */

code, kbd, pre {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-fs-14);
}
pre {
  background: var(--cn-surface);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius-card);
  padding: var(--cn-space-5);
  overflow-x: auto;
}

/* --- Selection ------------------------------------------------------------ */

::selection { background: var(--cn-accent-a15); color: var(--cn-ink); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.cn-shell {
  max-width: var(--cn-max);
  margin-inline: auto;
  padding-inline: var(--cn-gutter);
  width: 100%;
}
.cn-shell--flush { padding-inline: 0; }

.cn-section        { padding-block: var(--cn-section); }
.cn-section--top   { padding-top: var(--cn-section); padding-bottom: 0; }

/* Sections carry their rhythm on the top edge, so the last one on any page has
   no bottom padding at all -- and the newsletter band, which is a sibling of
   main rather than a section inside it, sat directly on whatever ended the
   page. Every page did this, not only the product page. */
#cn-main { padding-bottom: var(--cn-section); }
.cn-section--tight { padding-block: var(--cn-space-16); }

.cn-stack > * + * { margin-top: var(--cn-space-4); }

/* Bands ------------------------------------------------------------------- */

.cn-band--surface { background: var(--cn-surface); border-top: 1px solid var(--cn-line); }
.cn-band--paper   { background: var(--cn-paper); }
.cn-band--rule    { border-top: 1px solid var(--cn-line); }

/* The dark band. Blueprint grid at 8 percent, 32px, on every one. */
.cn-band--ink,
.cn-on-ink {
  background-color: var(--cn-ink);
  color: var(--cn-on-fill);
}
.cn-blueprint {
  background-image:
    linear-gradient(var(--cn-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cn-grid-line) 1px, transparent 1px);
  background-size: var(--cn-grid-size) var(--cn-grid-size);
}
.cn-on-ink p,
.cn-on-ink .cn-muted { color: var(--cn-white-a72); }
.cn-on-ink a { color: var(--cn-on-fill); }
.cn-on-ink h1, .cn-on-ink h2, .cn-on-ink h3 { color: var(--cn-on-fill); }

/* Colour helpers ---------------------------------------------------------- */

.cn-text-accent  { color: var(--cn-accent); }
.cn-text-warm    { color: var(--cn-warm-text); }
.cn-text-success { color: var(--cn-success); }
.cn-on-ink .cn-text-success { color: var(--cn-success-ink); }

/* Save line is Inter 500 in success, never a pill. */
.cn-save {
  font-weight: 500;
  color: var(--cn-success);
}
.cn-on-ink .cn-save { color: var(--cn-success-ink); }

/* Grids ------------------------------------------------------------------- */

.cn-grid       { display: grid; gap: var(--cn-space-6); }
.cn-grid--250  { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.cn-grid--240  { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.cn-grid--300  { grid-template-columns: repeat(auto-fit,  minmax(min(300px, 100%), 1fr)); }
.cn-grid--280  { grid-template-columns: repeat(auto-fit,  minmax(min(280px, 100%), 1fr)); }
.cn-grid--320  { grid-template-columns: repeat(auto-fit,  minmax(min(320px, 100%), 1fr)); }

/*
 * Listings of cards, where auto-fit is wrong.
 *
 * auto-fit collapses the tracks nothing sits in and hands their width to what
 * is left, which is what two panels side by side want. A list of posts does
 * not: a category holding one article drew a single card 1232px wide with a
 * 16:9 cover 692px tall, which read as a banner rather than a result. auto-fill
 * keeps the empty tracks, so one card is the same size as the first of twelve.
 */
.cn-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.cn-grid--360  { grid-template-columns: repeat(auto-fit,  minmax(min(360px, 100%), 1fr)); }
.cn-grid--240f { grid-template-columns: repeat(auto-fit,  minmax(min(240px, 100%), 1fr)); }
.cn-grid--200  { grid-template-columns: repeat(auto-fit,  minmax(min(200px, 100%), 1fr)); }
.cn-grid--160  { grid-template-columns: repeat(auto-fit,  minmax(min(160px, 100%), 1fr)); }
.cn-grid--split{ grid-template-columns: repeat(auto-fit,  minmax(min(320px, 100%), 1fr)); gap: var(--cn-space-12); }

.cn-flex        { display: flex; gap: var(--cn-space-3); }
.cn-flex--wrap  { flex-wrap: wrap; }
.cn-flex--between { justify-content: space-between; }
.cn-flex--center  { align-items: center; }

/* Placeholder tile, only visible where no image has been set --------------- */

.cn-placeholder {
  background-color: var(--cn-preview);
  background-image: repeating-linear-gradient(135deg, var(--cn-ink-a05) 0 6px, transparent 6px 12px);
  border-radius: var(--cn-radius-card);
}
.cn-placeholder--43 { aspect-ratio: 4 / 3; }
.cn-placeholder--169 { aspect-ratio: 16 / 9; }
.cn-placeholder--1 { aspect-ratio: 1; }
.cn-on-ink .cn-placeholder {
  background-color: var(--cn-ink-100);
  background-image: repeating-linear-gradient(135deg, var(--cn-white-a06) 0 8px, transparent 8px 16px);
}

/* Accessibility ----------------------------------------------------------- */

.screen-reader-text,
.cn-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus,
.cn-skip-link:focus {
  position: fixed !important;
  top: var(--cn-space-4);
  inset-inline-start: var(--cn-space-4);
  z-index: 200;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  background: var(--cn-ink);
  color: var(--cn-on-fill);
  padding: var(--cn-space-3) var(--cn-space-5);
  border-radius: var(--cn-radius-button);
  font-family: var(--cn-font-display);
  font-weight: 600;
}

[hidden] { display: none !important; }

/* Motion. Marquees stop entirely, everything else loses its transition. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Responsive type. The scale compresses, the roles do not change.
   ========================================================================== */

@media (max-width: 1100px) {
  .cn-display-76 { font-size: var(--cn-fs-60); }
}

@media (max-width: 900px) {
  h1 { font-size: var(--cn-fs-44); }
  .cn-display-76 { font-size: var(--cn-fs-44); line-height: 1.06; }
  .cn-display-60 { font-size: var(--cn-fs-44); line-height: 1.06; }
  .cn-display-44 { font-size: var(--cn-fs-32); }
}

@media (max-width: 600px) {
  h1 { font-size: var(--cn-fs-32); line-height: 1.1; }
  h2, .cn-display-32 { font-size: var(--cn-fs-24); }
  .cn-display-76,
  .cn-display-60 { font-size: var(--cn-fs-32); line-height: 1.1; }
  .cn-display-44 { font-size: var(--cn-fs-24); }
  .cn-lead { font-size: var(--cn-fs-16); }
  blockquote { padding: var(--cn-space-5); }
  blockquote p { font-size: var(--cn-fs-18); }
}

/* ==========================================================================
   Forced colours (Windows High Contrast, and any OS that overrides the page)

   The whole visual language here is hairlines and tinted fills -- there is not
   a single shadow in the theme by design. Forced-colours mode throws every
   author colour away and paints from the user's own small palette, which is the
   right thing to do and takes the hairlines with it: a card, a buy box and the
   page behind them all end up the same flat Canvas with nothing between them.

   So the borders that carry the structure are restated in system colours, and
   the focus ring -- which is an outline everywhere except the form fields,
   where it is a box-shadow -- gets an outline it can actually draw.
   ========================================================================== */

@media (forced-colors: active) {

  /* The ring is a shadow on inputs, and shadows are dropped in this mode. */
  :focus-visible,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  /* Anything the design separates with a hairline needs a real one here. */
  .cn-card,
  .cn-product,
  .cn-buybox,
  .cn-banner,
  .cn-banner-b,
  .cn-drawer,
  .cn-sheet,
  .cn-overlay > *,
  .cn-accordion__item,
  .cn-helpcard,
  .cn-post-card,
  .cn-segmented,
  .cn-chip,
  .cn-badge,
  .cn-btn,
  .cn-icon-btn,
  .cn-field,
  input,
  select,
  textarea {
    border: 1px solid CanvasText;
  }

  /* A tinted fill is invisible here, so state has to be a border, not a wash. */
  .cn-segmented__option.is-active,
  .cn-chip--active,
  .cn-chip--accent,
  [aria-pressed="true"],
  [aria-current="true"],
  [aria-current="page"] {
    border: 2px solid Highlight;
    color: Highlight;
  }

  /* Decorative marks carry no meaning and should not add clutter. */
  .cn-marquee::before,
  .cn-marquee::after { display: none; }
}