/* Quill & Paw — ink and paper. The brand promise is "written down plainly",
     so the typography IS the positioning: a reading serif, a plain grotesque,
     and a typewriter face reserved for the numbers nobody else publishes.
     Deliberately single-theme: a shop commits to one look. */
  :root {
    --ink:        #16212E;
    --ink-soft:   #3A4756;
    --ink-faint:  #6B7683;
    --paper:      #F3F2ED;
    --paper-warm: #E9E5DA;
    --card:       #FFFFFF;
    --line:       #DAD5C9;
    --line-soft:  #E7E3D9;
    --ochre:      #C97F2B;
    --ochre-ink:  #8A5313;
    --moss:       #35563F;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans:  "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --mono:  "Courier Prime", ui-monospace, Courier, monospace;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .shell { max-width: 1140px; margin: 0 auto; padding: 0 26px; }

  /* ── mockup disclosure strip ─────────────────────────────── */
  .demo {
    background: var(--ink); color: var(--paper); font-size: 11.5px;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
    text-align: center; padding: 7px 16px;
  }
  .demo b { color: var(--ochre); font-weight: 600; }
  /* The strip had no link rule at all, so this rendered as browser-default
     blue on navy — unreadable, and on the one line that has to be read. */
  .demo a {
    color: var(--paper); text-decoration: underline;
    text-decoration-color: var(--ochre); text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
  }
  .demo a:hover { color: var(--ochre); }
  .fnote a { color: var(--ochre); text-underline-offset: 3px; }

  /* ── nav ─────────────────────────────────────────────────── */
  nav { border-bottom: 1px solid var(--line); background: var(--paper); }
  .navin { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
  .mark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
  .mark svg { display: block; }
  .mark .wm {
    font-family: var(--serif); font-size: 25px; font-weight: 500;
    letter-spacing: -.01em; line-height: 1;
  }
  .mark .amp { color: var(--ochre); font-style: italic; }
  .navlinks { display: none; gap: 24px; margin-left: auto; }
  @media (min-width: 860px) { .navlinks { display: flex; } }
  .navlinks a {
    color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500;
    padding-bottom: 2px; border-bottom: 1.5px solid transparent;
  }
  .navlinks a:hover, .navlinks a:focus-visible { color: var(--ink); border-bottom-color: var(--ochre); }
  .cart {
    margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink);
    border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 15px;
    background: none; cursor: pointer; font-family: var(--sans); white-space: nowrap;
  }
  @media (min-width: 860px) { .cart { margin-left: 0; } }
  .cart:hover { background: var(--ink); color: var(--paper); }

  /* ── hero ────────────────────────────────────────────────── */
  .hero { padding: 56px 0 64px; }
  .herogrid { display: grid; gap: 40px; align-items: center; }
  @media (min-width: 900px) { .herogrid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
  .eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ochre-ink); margin: 0 0 18px;
  }
  h1 {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(2.6rem, 6.2vw, 4.15rem); line-height: 1.03;
    letter-spacing: -.021em; margin: 0 0 20px; text-wrap: balance;
  }
  h1 em { font-style: italic; color: var(--ochre-ink); }
  .lede { font-size: 1.14rem; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin: 0 0 28px; }
  .ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .btn {
    font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer;
    padding: 13px 26px; border-radius: 999px; border: 1.5px solid var(--ink);
    background: var(--ink); color: var(--paper); text-decoration: none;
    display: inline-block;
  }
  .btn:hover { background: #0E1721; }
  .btn.ghost { background: none; color: var(--ink); }
  .btn.ghost:hover { background: var(--paper-warm); }
  .trust {
    display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 26px 0 0;
    font-size: 13px; color: var(--ink-faint);
  }
  .trust span::before { content: "—"; color: var(--ochre); margin-right: 7px; }

  /* ── the panel: the brand's whole argument ───────────────── */
  .panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 3px; padding: 26px 26px 22px;
    box-shadow: 0 1px 0 var(--line-soft), 0 18px 40px -32px rgba(22,33,46,.5);
  }
  .panel .ph {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px;
  }
  .panel .ph h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0; }
  .panel .ph span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; }
  .ing { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  .ing:last-of-type { border-bottom: none; }
  .ing .nm { font-size: 14.5px; flex: 0 0 auto; width: 132px; }
  .ing .bar { flex: 1 1 auto; height: 7px; background: var(--paper-warm); border-radius: 2px; overflow: hidden; }
  .ing .bar i { display: block; height: 100%; background: var(--moss); border-radius: 2px; }
  .ing:first-of-type .bar i { background: var(--ochre); }
  .ing.fat .nm, .ing.fat .pc { color: var(--ochre-ink); font-weight: 600; }
  .ing .pc { font-family: var(--mono); font-size: 13px; width: 46px; text-align: right; font-weight: 700; }
  .panel .foot {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink-faint); line-height: 1.5;
  }

  /* ── section furniture ───────────────────────────────────── */
  section { padding: 62px 0; }
  .band { background: var(--paper-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .band-ink { background: var(--ink); color: var(--paper); }
  h2 {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.12;
    letter-spacing: -.016em; margin: 0 0 12px; text-wrap: balance;
  }
  h2 em { font-style: italic; color: var(--ochre-ink); }
  .band-ink h2 em { color: var(--ochre); }
  .sub { color: var(--ink-soft); max-width: 56ch; margin: 0 0 34px; font-size: 1.03rem; }
  .band-ink .sub { color: #B9C2CB; }

  /* ── product grid ─────────────────────────────────────────── */
  .grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 760px) { .grid { grid-template-columns: repeat(4, 1fr); } }
  .prod { text-decoration: none; color: inherit; display: block; }
  .prod img {
    display: block; width: 100%; height: auto; border-radius: 4px;
    transition: transform .18s ease;
  }
  .prod:hover img { transform: translateY(-4px); }
  @media (prefers-reduced-motion: reduce) { .prod:hover img { transform: none; } }
  .prow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 11px; }
  .pname { font-size: 14.5px; font-weight: 600; }
  .pprice { font-family: var(--mono); font-size: 13.5px; }
  .pmeta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

  /* ── subscription builder ────────────────────────────────── */
  .buildgrid { display: grid; gap: 34px; }
  @media (min-width: 900px) { .buildgrid { grid-template-columns: 1fr 380px; gap: 52px; } }
  fieldset { border: none; margin: 0 0 22px; padding: 0; }
  legend {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ochre); padding: 0; margin-bottom: 11px;
  }
  .opts { display: flex; flex-wrap: wrap; gap: 9px; }
  .opt {
    font-family: var(--sans); font-size: 14.5px; font-weight: 500; cursor: pointer;
    padding: 10px 17px; border-radius: 999px; background: none;
    border: 1.5px solid rgba(243,242,237,.32); color: var(--paper);
  }
  .opt:hover { border-color: rgba(243,242,237,.7); }
  .opt[aria-pressed="true"] { background: var(--ochre); border-color: var(--ochre); color: #1B1206; }
  .opt small { display: block; font-size: 11.5px; opacity: .74; font-weight: 400; }
  .opt[aria-pressed="true"] small { opacity: .72; }

  .quote { background: var(--card); color: var(--ink); border-radius: 4px; padding: 26px; }
  .quote .qh {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px;
  }
  .qbig { font-family: var(--serif); font-size: 2.9rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
  .qbig sup { font-size: 1.15rem; vertical-align: top; top: .5em; position: relative; margin-left: 2px; }
  .qsub { color: var(--ink-soft); font-size: 14.5px; margin-top: 7px; }
  .qline { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
  .qline:first-of-type { margin-top: 18px; }
  .qline b { font-family: var(--mono); font-weight: 700; }
  .qsave { color: var(--moss); }
  .quote .btn { width: 100%; text-align: center; margin-top: 18px; }

  /* ── three reasons ───────────────────────────────────────── */
  .three { display: grid; gap: 30px; }
  @media (min-width: 800px) { .three { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
  .rsn h3 { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; margin: 14px 0 7px; letter-spacing: -.01em; }
  .rsn p { margin: 0; color: var(--ink-soft); font-size: 15px; }
  .rsn .num {
    font-family: var(--mono); font-size: 12px; color: var(--ochre-ink);
    border-bottom: 2px solid var(--ochre); padding-bottom: 5px; display: inline-block;
  }


  /* ── founder portrait ────────────────────────────────────── */
  .storyhead { display: grid; gap: 28px; margin-bottom: 44px; }
  @media (min-width: 860px) {
    .storyhead { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: center; }
  }
  /* Rounded rather than circular: a circle discards the corners, and the
     harness and the grass are what make it a photograph of a dog who goes
     places rather than a headshot. The radius is generous — about 8% of the
     width — and the soft paper-warm band does the work a hairline border
     cannot, which is to sit gently against the fluffy edge of her coat. */
  .portrait { margin: 0; max-width: 340px; }
  .portrait img {
    display: block; width: 100%; height: auto;
    border-radius: 28px;
    box-shadow: 0 0 0 8px var(--paper-warm), 0 0 0 9px var(--line);
  }
  .portrait figcaption {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
    color: var(--ink-faint); margin-top: 20px;
  }
  .storyhead h2 { margin-top: 0; }
  .storyhead .sub { margin-bottom: 0; }

  /* ── reviews ─────────────────────────────────────────────── */
  .revs { display: grid; gap: 20px; }
  @media (min-width: 820px) { .revs { grid-template-columns: repeat(3, 1fr); } }
  .rev { background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 22px; }
  .stars { color: var(--ochre); font-size: 13px; letter-spacing: 3px; }
  .rev p { font-family: var(--serif); font-size: 1.06rem; line-height: 1.48; margin: 11px 0 14px; }
  .who { font-size: 13px; color: var(--ink-faint); }

  /* ── footer ──────────────────────────────────────────────── */
  footer { background: var(--ink); color: #AEB8C2; padding: 52px 0 34px; font-size: 14px; }
  .fgrid { display: grid; gap: 30px; }
  @media (min-width: 760px) { .fgrid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; } }
  footer h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--paper); margin: 0 0 12px; font-weight: 400;
  }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  footer a { color: #AEB8C2; text-decoration: none; }
  footer a:hover { color: var(--paper); }
  footer .mark .wm { color: var(--paper); }
  footer .mark svg { fill: var(--paper); }
  .fnote {
    margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(243,242,237,.16);
    font-size: 12.5px; line-height: 1.6; color: #8E99A4;
  }
  .fnote strong { color: var(--ochre); font-weight: 600; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }