/* ============================================================
   PlannerHead — The Year · paper system · 2026-09-29
   CANONICAL HOME: github.com/n3v1h5/plannerhead-site

   Approval host: https://demo.plannerhead.co.uk
   Do not paste this onto plannerhead.co.uk until that demo is approved.
   Paste the WHOLE file into: Squarespace → Design → Custom CSS
   Font file: squarespace/font-link.html → Code Injection → HEADER
   Home sheet: squarespace/home-year-block.html → a Code block on Home

   Tokens from the 2027 design system:
     paper #F6F3EC · sheet #FFFCF6 · ink #1A1A1A
     blue #0072A8 · press #005A85 · rule #C4BDB3 · tint #EAEEF6
   Type: IBM Plex Sans 400 / 500. Never 300. Tabular lining figures
   on prices. Page cap 1440. Buttons square, 48px, blue.

   Section ids verified on the live DOM, 2026-09-29:
     cabin hero  61ae22483065ef49364e5885
     newsletter  6a291a1c2d0acbd9c53d1628
   ============================================================ */


/* ── 1. PAPER, TYPE, WIDTH ─────────────────────────────────── */
:root {
  --maxPageWidth: 1440px;
  --pagePadding: 32px;
  --siteBackgroundColor: #F6F3EC;
  --body-font-font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --heading-font-font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --meta-font-font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --primary-button-font-font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --secondary-button-font-font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --tertiary-button-font-font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --body-font-font-weight: 400;
  --heading-font-font-weight: 500;
  --primaryButtonBackgroundColor: #0072A8;
  --primaryButtonTextColor: #FFFFFF;
  --secondaryButtonBackgroundColor: #0072A8;
  --secondaryButtonTextColor: #FFFFFF;
  --tweak-product-basic-item-sale-price-color: #0072A8;
}

html, body, #siteWrapper {
  background: #F6F3EC !important;
  color: #1A1A1A;
}

body, button, input, textarea, select, .header-nav-item a {
  font-family: "IBM Plex Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
}

body {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
}

h1, h2, h3, .header-title-text, #site-title {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

#site-title {
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: lowercase !important;
  font-weight: 500 !important;
}

.product-price,
.product-list-item-price,
.sqs-money-native {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 500;
}

/* Cap the sprawl. Body stays paper so a wide window does not flash grey. */
.content-wrapper,
.sections .page-section > .content-wrapper,
.header-inner {
  max-width: 1440px;
}

.header {
  background: #F6F3EC !important;
  border-bottom: 1px solid #C4BDB3;
}

.header-nav-item a,
.header-menu-nav-item a,
#site-title {
  text-decoration: none !important;
}

.header-nav-item a,
.header-menu-nav-item a {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
}

.header-nav-item a {
  position: relative;
}

.header-nav-item--active a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #1A1A1A;
}

.header-burger-btn .top-bun,
.header-burger-btn .patty,
.header-burger-btn .bottom-bun {
  height: 2px !important;
  background: #1A1A1A !important;
}

/* Entrance fades fight the sheet. One still page. */
[data-animation-role],
.product-list-item {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.product-list-item-link:focus-visible,
.sqs-block-button-element:focus-visible {
  outline: 3px solid #1A1A1A !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sqs-block-button-element,
  .newsletter-form-button,
  .sqs-add-to-cart-button {
    transition: none !important;
  }
}


/* ── 2. BUTTONS ──────────────────────────────────────────────
   Live buttons are silver #C0C0C0. Blue is the ink on the sheet.
   Square corners. 48px. Press darkens to #005A85. No scale. */
.sqs-block-button-element,
.newsletter-form-button,
.sqs-add-to-cart-button,
.sqs-editable-button {
  background-color: #0072A8 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 48px;
  padding: 0 28px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color 80ms ease;
}

.sqs-block-button-element:hover,
.newsletter-form-button:hover,
.sqs-add-to-cart-button:hover,
.sqs-editable-button:hover {
  background-color: #005A85 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

.sqs-add-to-cart-button {
  width: 100%;
  max-width: 420px;
}


/* ── 3. SHOP CARDS ───────────────────────────────────────────
   Interim, until the family sheets replace this grid.
   Every published product stays. Cards become sheets:
   paper, a rule, square corners, the photograph contained. */
[data-product-list-layout="grid"] {
  --product-list-num-columns-desktop: 3 !important;
  --product-list-num-columns-mobile: 2 !important;
  --product-list-column-spacing: 24px !important;
  --product-list-row-spacing: 32px !important;
}

.product-list-item-image {
  background: #FFFCF6;
  border: 1px solid #C4BDB3;
  border-radius: 0;
  overflow: hidden;
}

.product-list-item-image img {
  object-fit: contain !important;
}

.product-list-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
  color: #1A1A1A;
}

@media screen and (max-width: 767px) {
  :root { --pagePadding: 16px; }
  body { font-size: 16px; }
  .product-list-item-title { font-size: 0.9rem; line-height: 1.35; }
  .product-list-item-price { font-size: 0.9rem; font-weight: 500; }
  #site-title { font-size: 16px !important; }
}


/* ── 4. NEWSLETTER ───────────────────────────────────────────
   The block sits on an eBay photograph. Flat paper, ink type,
   blue button. The form stays. */
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .section-background img {
  display: none !important;
}
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .section-background {
  background: #F6F3EC !important;
}
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .newsletter-form-header-title,
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .newsletter-form-header-description,
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .newsletter-form-header-description *,
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .newsletter-form-footnote {
  color: #1A1A1A !important;
}
section[data-section-id="6a291a1c2d0acbd9c53d1628"] .newsletter-form-field-element {
  border-color: #C4BDB3 !important;
  background: #FFFCF6 !important;
  color: #1A1A1A !important;
  border-radius: 0 !important;
}
@media screen and (max-width: 767px) {
  section[data-section-id="6a291a1c2d0acbd9c53d1628"] .fluid-engine {
    min-height: unset !important;
  }
}

.newsletter-block .newsletter-form-field-label {
  visibility: visible !important;
  height: 1px !important;
  width: 1px;
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ── 5. CABIN ────────────────────────────────────────────────
   Squarespace demo photograph (Aro Ha, New Zealand). Hidden.
   The year sheet in the code block is the hero. */
[data-section-id="61ae22483065ef49364e5885"] .section-background img {
  display: none !important;
}
[data-section-id="61ae22483065ef49364e5885"] .section-background {
  background: #F6F3EC !important;
}
[data-section-id="61ae22483065ef49364e5885"] .sqsrte-text-color--black,
[data-section-id="61ae22483065ef49364e5885"] .sqsrte-text-color--white {
  color: #1A1A1A !important;
}


/* ── 6. PRODUCT PAGE ───────────────────────────────────────── */
.product-description {
  max-width: 62ch;
}
.product-description p {
  margin: 0 0 0.6em;
}
.product-description strong {
  font-weight: 500;
}

.product-variants .variant-option {
  margin-bottom: 16px;
}
.variant-option-title {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #1A1A1A;
  opacity: 1;
}
.variant-radiobtn-wrapper .radio-label {
  border-radius: 6px;
  border: 1px solid #C4BDB3;
  padding: 9px 14px;
  min-height: 44px;
  background: transparent;
  color: #1A1A1A;
}
.variant-radiobtn-wrapper input:checked + .radio-label,
.variant-radiobtn-wrapper .radio-label.selected {
  border-color: #0072A8;
  color: #0072A8;
}

/* Footer rule */
footer, .footer, #footer-sections {
  background: #F6F3EC !important;
  border-top: 1px solid #C4BDB3;
  color: #5C656C;
}