/* ============================================================
   HERITAGE WRITING INSTRUMENTS — style.css
   Prefix: nib-   |   Palette: paper / ink-black / ink-blue / oxblood
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Caveat:wght@400;600&family=Inter:wght@300;400;500&display=swap');

/* ── Custom Properties ── */
:root {
  --nib-paper:       #fbfaf6;
  --nib-ink:         #15130d;
  --nib-blue:        #26395c;
  --nib-oxblood:     #7a2f2a;
  --nib-warm-mid:    #6b6457;
  --nib-rule:        #d8d3c5;
  --nib-rule-heavy:  #b0a990;
  --nib-paper-deep:  #f0ede3;

  --ff-display: 'Cormorant Garamond', 'Georgia', serif;
  --ff-body:    'Spectral', 'Georgia', serif;
  --ff-ui:      'Inter', system-ui, sans-serif;
  --ff-hand:    'Caveat', cursive;

  --space-xs:  0.4rem;
  --space-sm:  0.8rem;
  --space-md:  1.6rem;
  --space-lg:  3.2rem;
  --space-xl:  6.4rem;
  --space-2xl: 10rem;

  --transition: 240ms ease;
  --header-h: 88px;
  --header-slim-h: 52px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--nib-paper);
  color: var(--nib-ink);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ── Typography Scale ── */
h1,h2,h3,h4,h5 { font-family: var(--ff-display); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
p  { font-size: 1.0625rem; }

.nib-ui-label {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
}
.nib-caveat { font-family: var(--ff-hand); }

/* ─────────────────────────────────────────
   HEADER — Centered masthead
──────────────────────────────────────── */
.nib-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--nib-paper);
  transition: var(--transition);
}
.nib-header::after {
  content: '';
  display: block;
  height: 3px;
  border-top: 1px solid var(--nib-ink);
  border-bottom: 1px solid var(--nib-ink);
  margin: 0 var(--space-lg);
}
.nib-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--space-lg);
  gap: var(--space-md);
  transition: height var(--transition);
}
.nib-header.scrolled .nib-header-inner { height: var(--header-slim-h); }
.nib-header.scrolled::after { margin: 0; }

/* Nav halves */
.nib-nav-left,
.nib-nav-right {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}
.nib-nav-right { justify-content: flex-end; }
.nib-nav-left a,
.nib-nav-right a {
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nib-ink);
  position: relative;
  padding-bottom: 2px;
}
.nib-nav-left a::after,
.nib-nav-right a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--nib-blue);
  transition: width var(--transition);
}
.nib-nav-left a:hover::after,
.nib-nav-right a:hover::after { width: 100%; }

/* Brand */
.nib-brandslot {
  display: block;
  text-align: center;
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--nib-ink);
}
.nib-header.scrolled .nib-brandslot { font-size: 1.2rem; }

/* Cart badge */
.nib-cart-link { position: relative; }
.nib-cart-count {
  position: absolute;
  top: -8px; right: -12px;
  background: var(--nib-blue);
  color: #fff;
  font-family: var(--ff-ui);
  font-size: .6rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 99px;
  min-width: 16px;
  text-align: center;
  display: none;
}
.nib-cart-count.visible { display: block; }

/* Mobile menu toggle */
.nib-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-sm);
  flex-direction: column;
  gap: 5px;
}
.nib-menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--nib-ink);
  transition: var(--transition);
}

/* ─────────────────────────────────────────
   HERO
──────────────────────────────────────── */
.nib-hero {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-xl);
  background: var(--nib-paper);
  overflow: hidden;
  position: relative;
}
.nib-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 30% 50%, var(--nib-paper-deep) 0%, transparent 70%);
  pointer-events: none;
}
.nib-hero-text { position: relative; z-index: 1; }
.nib-hero-eyebrow {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nib-blue);
  margin-bottom: var(--space-md);
}
.nib-hero-headline {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1.08;
  margin-bottom: var(--space-md);
  color: var(--nib-ink);
}
.nib-hero-flourish-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.nib-hero-flourish {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.nib-hero-flourish path {
  stroke: var(--nib-blue);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.nib-hero-flourish path.animated {
  animation: nib-draw-stroke 2.2s cubic-bezier(.25,.8,.25,1) .6s forwards;
}
@keyframes nib-draw-stroke {
  to { stroke-dashoffset: 0; }
}
.nib-hero-sub {
  margin-top: var(--space-md);
  font-size: 1.125rem;
  color: var(--nib-warm-mid);
  max-width: 38ch;
  line-height: 1.65;
}
.nib-hero-cta {
  margin-top: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-paper);
  background: var(--nib-blue);
  padding: .875rem 2rem;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
}
.nib-hero-cta:hover { background: var(--nib-ink); }
.nib-hero-cta-arrow { font-size: 1rem; transition: transform var(--transition); }
.nib-hero-cta:hover .nib-hero-cta-arrow { transform: translateX(4px); }

/* Hero images */
.nib-hero-images {
  position: relative;
  height: 520px;
}
.nib-hero-pen-main {
  position: absolute;
  width: 78%;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  border-radius: 2px;
  box-shadow: 12px 24px 60px rgba(21,19,13,.14);
  object-fit: cover;
  height: 420px;
}
.nib-hero-nib-inset {
  position: absolute;
  width: 44%;
  left: 0;
  bottom: 30px;
  border-radius: 2px;
  box-shadow: 6px 12px 32px rgba(21,19,13,.18);
  object-fit: cover;
  height: 240px;
  border: 3px solid var(--nib-paper);
}
.nib-hero-est {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--ff-ui);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  border: 1px solid var(--nib-rule);
  padding: 6px 12px;
}

/* ─────────────────────────────────────────
   SECTION SHARED
──────────────────────────────────────── */
.nib-section {
  padding: var(--space-xl) var(--space-xl);
}
.nib-section-alt { background: var(--nib-paper-deep); }
.nib-section-dark {
  background: var(--nib-ink);
  color: var(--nib-paper);
}
.nib-section-dark .nib-section-label { color: var(--nib-rule); }

.nib-section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.nib-section-label {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  display: block;
  margin-bottom: var(--space-sm);
}
.nib-section-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.nib-section-rule::before,
.nib-section-rule::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--nib-rule-heavy);
}
.nib-section-rule span {
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--nib-rule-heavy);
}
.nib-section-dark .nib-section-rule::before,
.nib-section-dark .nib-section-rule::after { background: rgba(255,255,255,.2); }
.nib-section-dark .nib-section-rule span { color: rgba(255,255,255,.3); }

/* ─────────────────────────────────────────
   INK LIBRARY
──────────────────────────────────────── */
.nib-ink-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-xl);
}
.nib-ink-swatch {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  border: 2px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 8px rgba(21,19,13,.15);
}
.nib-ink-swatch:hover,
.nib-ink-swatch.active {
  transform: scale(1.18);
  box-shadow: 0 6px 20px rgba(21,19,13,.25);
}
.nib-ink-swatch::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.nib-ink-reveal {
  background: var(--nib-paper);
  border: 1px solid var(--nib-rule);
  border-radius: 4px;
  padding: var(--space-lg) var(--space-xl);
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: center;
  min-height: 120px;
  transition: var(--transition);
}
.nib-ink-reveal-swatch {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(21,19,13,.15);
}
.nib-ink-reveal-name {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  margin-bottom: .25rem;
}
.nib-ink-reveal-series {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
}
/* brushed ink sample line */
.nib-ink-brushed {
  width: 100%;
  height: 16px;
  margin-top: var(--space-sm);
  border-radius: 99px;
  opacity: .5;
}

/* ─────────────────────────────────────────
   NIB GUIDE
──────────────────────────────────────── */
.nib-guide-grid {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}
.nib-guide-card {
  background: var(--nib-paper);
  border: 1px solid var(--nib-rule);
  padding: var(--space-md) var(--space-lg);
  width: 160px;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.nib-guide-card:hover {
  border-color: var(--nib-blue);
  box-shadow: 0 4px 20px rgba(38,57,92,.1);
}
.nib-guide-card svg { margin: 0 auto var(--space-sm); display: block; }
.nib-guide-name {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  margin-bottom: .25rem;
}
.nib-guide-desc {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  color: var(--nib-warm-mid);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────
   FEATURED PENS
──────────────────────────────────────── */
.nib-pens-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.nib-pen-card {
  background: var(--nib-paper);
  border: 1px solid var(--nib-rule);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.nib-pen-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(21,19,13,.12);
}
.nib-pen-card-img {
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100%;
  transform: rotate(-3deg) scale(1.06);
  transition: transform .4s ease;
}
.nib-pen-card:hover .nib-pen-card-img {
  transform: rotate(0deg) scale(1.02);
}
.nib-pen-card-body {
  padding: var(--space-md);
  border-top: 1px solid var(--nib-rule);
}
.nib-pen-nib-badge {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--nib-rule-heavy);
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--nib-warm-mid);
}
.nib-pen-name {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  margin-bottom: .25rem;
}
.nib-pen-price {
  font-family: var(--ff-ui);
  font-size: .8125rem;
  color: var(--nib-warm-mid);
}

/* ─────────────────────────────────────────
   PAPER SECTION
──────────────────────────────────────── */
.nib-paper-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.nib-paper-col {
  border-top: 3px solid var(--nib-rule-heavy);
  padding-top: var(--space-md);
}
.nib-paper-col.featured { border-top-color: var(--nib-blue); }
.nib-paper-gsm {
  font-family: var(--ff-display);
  font-size: 3rem;
  color: var(--nib-blue);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.nib-paper-gsm span {
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: top;
  margin-top: .5rem;
  display: inline-block;
  color: var(--nib-warm-mid);
}
.nib-paper-note {
  font-style: italic;
  font-size: .9375rem;
  color: var(--nib-warm-mid);
  margin-top: var(--space-sm);
}

/* ─────────────────────────────────────────
   RITUAL STEPS
──────────────────────────────────────── */
.nib-ritual-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,.1);
}
.nib-ritual-step {
  padding: var(--space-xl);
  text-align: center;
  position: relative;
}
.nib-ritual-step + .nib-ritual-step {
  border-left: 1px solid rgba(255,255,255,.1);
}
.nib-ritual-num {
  font-family: var(--ff-display);
  font-size: 4rem;
  font-weight: 300;
  color: rgba(255,255,255,.08);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.nib-ritual-title {
  font-family: var(--ff-display);
  font-size: 2rem;
  color: var(--nib-paper);
  margin-bottom: var(--space-sm);
}
.nib-ritual-desc { color: rgba(251,250,246,.65); font-size: .9375rem; }

/* ─────────────────────────────────────────
   TESTIMONIAL
──────────────────────────────────────── */
.nib-testimonial {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.nib-testimonial blockquote {
  font-family: var(--ff-hand);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.5;
  color: var(--nib-ink);
  margin-bottom: var(--space-md);
}
.nib-testimonial cite {
  font-family: var(--ff-ui);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  font-style: normal;
}

/* ─────────────────────────────────────────
   FOOTER
──────────────────────────────────────── */
.nib-footer {
  background: var(--nib-ink);
  color: var(--nib-paper);
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--nib-blue) 0%, var(--nib-oxblood) 100%) 1;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}
.nib-footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.nib-footer h4 {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
  color: var(--nib-paper);
  letter-spacing: .02em;
}
.nib-footer ul li { margin-bottom: var(--space-xs); }
.nib-footer ul a {
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(251,250,246,.6);
  transition: color var(--transition);
}
.nib-footer ul a:hover { color: var(--nib-paper); }

.nib-footer-newsletter {
  margin-top: var(--space-md);
}
.nib-footer-newsletter-label {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
  display: block;
}
.nib-footer-form {
  display: flex;
  gap: 0;
  margin-top: var(--space-sm);
}
.nib-footer-form input {
  flex: 1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-right: none;
  padding: .6rem .9rem;
  font-family: var(--ff-ui);
  font-size: .75rem;
  color: var(--nib-paper);
  letter-spacing: .03em;
}
.nib-footer-form input::placeholder { color: rgba(251,250,246,.35); }
.nib-footer-form button {
  background: var(--nib-blue);
  border: 1px solid var(--nib-blue);
  color: var(--nib-paper);
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  transition: background var(--transition);
}
.nib-footer-form button:hover { background: var(--nib-oxblood); border-color: var(--nib-oxblood); }

.nib-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.nib-footer-stamp {
  font-family: var(--ff-ui);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251,250,246,.25);
  border: 1px solid rgba(255,255,255,.12);
  padding: .4rem .9rem;
}
.nib-footer-fine {
  font-family: var(--ff-ui);
  font-size: .625rem;
  color: rgba(251,250,246,.3);
  letter-spacing: .04em;
}

/* Lang switcher */
.nib-lang-switcher {
  display: flex;
  gap: var(--space-sm);
}
.nib-lang-switcher button {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(251,250,246,.4);
  padding: .25rem .5rem;
  transition: var(--transition);
}
.nib-lang-switcher button.active,
.nib-lang-switcher button:hover {
  border-color: var(--nib-blue);
  color: var(--nib-paper);
}

/* ─────────────────────────────────────────
   SHOP PAGE
──────────────────────────────────────── */
.nib-shop-header {
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--nib-rule);
}
.nib-shop-filters {
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  border-bottom: 1px solid var(--nib-rule);
  background: var(--nib-paper);
}
.nib-filter-btns {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.nib-filter-btn {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--nib-rule);
  color: var(--nib-warm-mid);
  padding: .4rem 1.1rem;
  transition: var(--transition);
}
.nib-filter-btn.active,
.nib-filter-btn:hover {
  background: var(--nib-blue);
  border-color: var(--nib-blue);
  color: var(--nib-paper);
}
.nib-sort-select {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .05em;
  background: none;
  border: 1px solid var(--nib-rule);
  color: var(--nib-warm-mid);
  padding: .4rem .8rem;
  cursor: pointer;
}
.nib-shop-grid {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-xl);
}
.nib-shop-card {
  cursor: pointer;
  transition: transform var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}
.nib-shop-card:hover { transform: translateY(-3px); }
.nib-shop-card-img-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--nib-paper-deep);
  margin-bottom: var(--space-sm);
  position: relative;
}
.nib-shop-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.nib-shop-card:hover .nib-shop-card-img { transform: scale(1.04); }
.nib-ink-swatch-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nib-ink-swatch-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(21,19,13,.2);
}
.nib-shop-card-name {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  margin-bottom: .25rem;
}
.nib-shop-card-price {
  font-family: var(--ff-ui);
  font-size: .75rem;
  color: var(--nib-warm-mid);
  letter-spacing: .04em;
}
.nib-shop-card-cat {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-blue);
  margin-bottom: .25rem;
}

/* ─────────────────────────────────────────
   PRODUCT PAGE
──────────────────────────────────────── */
.nib-product-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
  align-items: start;
}
.nib-gallery {
  position: sticky;
  top: calc(var(--header-slim-h) + var(--space-md));
}
.nib-gallery-main {
  aspect-ratio: 4/5;
  width: 100%;
  object-fit: cover;
  background: var(--nib-paper-deep);
  margin-bottom: var(--space-sm);
}
.nib-gallery-thumbs {
  display: flex;
  gap: var(--space-sm);
}
.nib-gallery-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition);
  background: var(--nib-paper-deep);
}
.nib-gallery-thumb.active { border-color: var(--nib-blue); }

/* Product info panel */
.nib-product-info {}
.nib-product-cat {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nib-blue);
  margin-bottom: var(--space-sm);
  display: block;
}
.nib-product-name {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: var(--space-sm);
}
.nib-product-price {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  color: var(--nib-warm-mid);
  margin-bottom: var(--space-md);
}
.nib-product-short {
  font-size: 1.0625rem;
  margin-bottom: var(--space-md);
  border-left: 3px solid var(--nib-blue);
  padding-left: var(--space-md);
  color: var(--nib-warm-mid);
}
.nib-product-divider {
  height: 1px;
  background: var(--nib-rule);
  margin: var(--space-md) 0;
}

/* Nib selector */
.nib-selector-group { margin-bottom: var(--space-md); }
.nib-selector-label {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nib-selector-label span { color: var(--nib-ink); font-weight: 500; }
.nib-btn-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.nib-size-btn {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--nib-rule);
  color: var(--nib-ink);
  padding: .45rem .9rem;
  transition: var(--transition);
}
.nib-size-btn.active,
.nib-size-btn:hover {
  background: var(--nib-blue);
  border-color: var(--nib-blue);
  color: var(--nib-paper);
}
.nib-trim-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--nib-rule);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
}
.nib-trim-swatch.active,
.nib-trim-swatch:hover {
  transform: scale(1.15);
  border-color: var(--nib-blue);
}
[data-trim="Gold"]  { background: linear-gradient(135deg,#d4a843,#f0cf7e); }
[data-trim="Silver"]{ background: linear-gradient(135deg,#9a9a9a,#d8d8d8); }
[data-trim="Black"] { background: linear-gradient(135deg,#2a2a2a,#555); }

/* Nib width sample */
.nib-line-sample {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--nib-paper-deep);
  border: 1px solid var(--nib-rule);
  margin-top: var(--space-sm);
}
.nib-line-sample.visible { display: flex; }
.nib-line-sample svg { flex-shrink: 0; }
.nib-line-sample-desc {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  color: var(--nib-warm-mid);
  letter-spacing: .04em;
}

/* Qty + Add to cart */
.nib-add-row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-lg);
}
.nib-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--nib-rule);
}
.nib-qty-btn {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  color: var(--nib-ink);
  transition: background var(--transition);
}
.nib-qty-btn:hover { background: var(--nib-paper-deep); }
.nib-qty-val {
  width: 36px;
  text-align: center;
  font-family: var(--ff-ui);
  font-size: .875rem;
}
.nib-btn-add-cart {
  flex: 1;
  background: var(--nib-blue);
  border: none;
  color: var(--nib-paper);
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .875rem 1.5rem;
  transition: background var(--transition);
}
.nib-btn-add-cart:hover { background: var(--nib-ink); }

/* Product meta table */
.nib-product-meta {
  margin-top: var(--space-lg);
}
.nib-meta-row {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--nib-rule);
  font-size: .875rem;
}
.nib-meta-key {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  width: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Long description + writing sample */
.nib-product-long {
  padding: var(--space-xl);
  max-width: 860px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.nib-writing-sample {
  padding: var(--space-xl);
  background: var(--nib-paper-deep);
  text-align: center;
  border-top: 1px solid var(--nib-rule);
  border-bottom: 1px solid var(--nib-rule);
}
.nib-writing-sample p {
  font-family: var(--ff-hand);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--nib-blue);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* Ink product: big swatch + brushed */
.nib-ink-product-swatch {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 8px 40px rgba(21,19,13,.2);
  display: block;
  margin: 0 auto var(--space-lg);
}
.nib-brushed-sample {
  height: 24px;
  border-radius: 99px;
  width: 100%;
  max-width: 400px;
  display: block;
  margin: var(--space-sm) auto;
  opacity: .55;
}
.nib-pairs-note {
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--nib-warm-mid);
  margin-top: var(--space-md);
}

/* ─────────────────────────────────────────
   CART DRAWER
──────────────────────────────────────── */
.nib-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,19,13,.35);
  z-index: 990;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.nib-cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.nib-cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 95vw);
  background: var(--nib-paper);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--nib-rule);
}
.nib-cart-drawer.open { transform: translateX(0); }
.nib-cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--nib-rule);
}
.nib-cart-drawer-title {
  font-family: var(--ff-display);
  font-size: 1.3rem;
}
.nib-cart-close-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--nib-warm-mid);
  line-height: 1;
  transition: color var(--transition);
}
.nib-cart-close-btn:hover { color: var(--nib-ink); }
.nib-cart-items { flex: 1; overflow-y: auto; padding: var(--space-md) var(--space-lg); }
.nib-cart-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--nib-rule);
}
.nib-cart-item-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  background: var(--nib-paper-deep);
  flex-shrink: 0;
}
.nib-cart-item-info { flex: 1; }
.nib-cart-item-name {
  font-family: var(--ff-display);
  font-size: 1rem;
  margin-bottom: .25rem;
}
.nib-cart-item-variant {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--nib-warm-mid);
}
.nib-cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-sm);
}
.nib-cart-item-price {
  font-family: var(--ff-display);
  font-size: 1rem;
}
.nib-cart-remove-btn {
  background: none;
  border: none;
  color: var(--nib-warm-mid);
  font-size: .75rem;
  font-family: var(--ff-ui);
  letter-spacing: .04em;
  transition: color var(--transition);
}
.nib-cart-remove-btn:hover { color: var(--nib-oxblood); }
.nib-cart-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--nib-rule);
}
.nib-cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-display);
  font-size: 1.2rem;
  margin-bottom: var(--space-md);
}
.nib-btn-checkout {
  display: block;
  width: 100%;
  background: var(--nib-blue);
  color: var(--nib-paper);
  border: none;
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .9rem;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition);
}
.nib-btn-checkout:hover { background: var(--nib-ink); }
.nib-cart-empty-msg {
  text-align: center;
  padding: var(--space-xl);
  color: var(--nib-warm-mid);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-style: italic;
}

/* ─────────────────────────────────────────
   TOAST
──────────────────────────────────────── */
.nib-toast {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--space-lg)));
  background: var(--nib-ink);
  color: var(--nib-paper);
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .08em;
  padding: .7rem 1.6rem;
  z-index: 1100;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  white-space: nowrap;
}
.nib-toast.visible {
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────
   SCROLL REVEAL
──────────────────────────────────────── */
.nib-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.nib-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .nib-reveal { transition: none; }
  .nib-hero-flourish path { animation: none; stroke-dashoffset: 0; }
}

/* ─────────────────────────────────────────
   PAGE HEADERS (shop / about / contact / cart)
──────────────────────────────────────── */
.nib-page-head {
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg,transparent,var(--nib-rule-heavy),transparent) 1;
  text-align: center;
}
.nib-page-head h1 {
  font-weight: 300;
  letter-spacing: .04em;
}
.nib-page-head p {
  color: var(--nib-warm-mid);
  max-width: 50ch;
  margin: var(--space-sm) auto 0;
  font-style: italic;
}

/* ─────────────────────────────────────────
   ABOUT PAGE
──────────────────────────────────────── */
.nib-about-editorial {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl);
  font-size: 1.0625rem;
  line-height: 1.85;
}
.nib-about-editorial h2 {
  font-size: 2.2rem;
  margin: var(--space-xl) 0 var(--space-md);
}
.nib-about-editorial p { margin-bottom: var(--space-md); }
.nib-about-editorial blockquote {
  border-left: 3px solid var(--nib-blue);
  padding-left: var(--space-md);
  font-style: italic;
  margin: var(--space-md) 0;
  color: var(--nib-warm-mid);
}
.nib-about-values {
  background: var(--nib-paper-deep);
  padding: var(--space-xl);
}
.nib-about-values-inner {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}
.nib-about-value h3 {
  font-size: 1.6rem;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--nib-rule);
}

/* ─────────────────────────────────────────
   CONTACT PAGE
──────────────────────────────────────── */
.nib-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
}
.nib-contact-form { }
.nib-form-group { margin-bottom: var(--space-md); }
.nib-form-label {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  display: block;
  margin-bottom: .35rem;
}
.nib-form-input,
.nib-form-textarea,
.nib-form-select {
  width: 100%;
  background: var(--nib-paper);
  border: 1px solid var(--nib-rule);
  padding: .65rem .9rem;
  font-family: var(--ff-body);
  font-size: .9375rem;
  color: var(--nib-ink);
  transition: border-color var(--transition);
}
.nib-form-input:focus,
.nib-form-textarea:focus,
.nib-form-select:focus {
  outline: none;
  border-color: var(--nib-blue);
}
.nib-form-textarea { resize: vertical; min-height: 140px; }
.nib-btn-send {
  background: var(--nib-blue);
  border: none;
  color: var(--nib-paper);
  font-family: var(--ff-ui);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .875rem 2.2rem;
  transition: background var(--transition);
}
.nib-btn-send:hover { background: var(--nib-ink); }
.nib-contact-aside h3 {
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}
.nib-contact-aside p {
  margin-bottom: var(--space-md);
  font-size: .9375rem;
  color: var(--nib-warm-mid);
  line-height: 1.7;
}
.nib-atelier-address {
  background: var(--nib-paper-deep);
  border: 1px solid var(--nib-rule);
  padding: var(--space-md);
  font-style: italic;
  font-size: .9375rem;
  line-height: 1.8;
  margin-top: var(--space-lg);
}
.nib-form-success {
  display: none;
  background: rgba(38,57,92,.08);
  border: 1px solid var(--nib-blue);
  padding: var(--space-md);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-top: var(--space-md);
}

/* ─────────────────────────────────────────
   CART PAGE
──────────────────────────────────────── */
.nib-cart-page { padding: var(--space-xl); max-width: 900px; margin: 0 auto; }
.nib-cart-page-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-xl); }
.nib-cart-page-table th {
  font-family: var(--ff-ui);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nib-warm-mid);
  border-bottom: 2px solid var(--nib-rule);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}
.nib-cart-page-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--nib-rule);
  vertical-align: middle;
}
.nib-cart-page-img {
  width: 64px;
  height: 64px;
  min-width: 64px;
  max-width: none;
  object-fit: cover;
  background: var(--nib-paper-deep);
}
.nib-cart-page-name {
  font-family: var(--ff-display);
  font-size: 1.1rem;
}
.nib-cart-page-total-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xl);
  font-family: var(--ff-display);
  font-size: 1.4rem;
  border-top: 2px solid var(--nib-rule);
  padding-top: var(--space-md);
}
.nib-cart-cta-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ─────────────────────────────────────────
   LEGAL PAGES
──────────────────────────────────────── */
.nib-legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-xl);
  font-size: 1rem;
  line-height: 1.85;
}
.nib-legal-body h2 {
  font-size: 1.6rem;
  margin: var(--space-xl) 0 var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--nib-rule);
}
.nib-legal-body p,
.nib-legal-body ul { margin-bottom: var(--space-md); }
.nib-legal-body ul { padding-left: var(--space-md); list-style: disc; }

/* ─────────────────────────────────────────
   RELATED PENS
──────────────────────────────────────── */
.nib-related {
  padding: var(--space-xl);
  border-top: 1px solid var(--nib-rule);
}
.nib-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ─────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────── */
@media (max-width: 1024px) {
  .nib-pens-row { grid-template-columns: repeat(2,1fr); }
  .nib-product-layout { grid-template-columns: 1fr; }
  .nib-gallery { position: static; }
  .nib-footer-inner { grid-template-columns: repeat(2,1fr); }
  .nib-hero { padding: var(--space-lg) var(--space-lg); gap: var(--space-lg); }
  .nib-section { padding: var(--space-xl) var(--space-lg); }
}
@media (max-width: 768px) {
  .nib-header-inner { grid-template-columns: auto 1fr auto; height: 60px; }
  .nib-nav-left { display: none; }
  .nib-nav-right { display: none; }
  .nib-menu-toggle { display: flex; }
  .nib-header.menu-open .nib-nav-left,
  .nib-header.menu-open .nib-nav-right {
    display: flex;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    background: var(--nib-paper);
    border-bottom: 1px solid var(--nib-rule);
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    gap: var(--space-lg);
    z-index: 800;
  }
  .nib-header.menu-open .nib-nav-right { top: calc(60px + 220px); }
  .nib-hero { grid-template-columns: 1fr; min-height: auto; padding: var(--space-lg); }
  .nib-hero-images { height: 280px; }
  .nib-pens-row { grid-template-columns: 1fr; }
  .nib-paper-columns { grid-template-columns: 1fr; }
  .nib-ritual-steps { grid-template-columns: 1fr; }
  .nib-ritual-step + .nib-ritual-step { border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
  .nib-footer-inner { grid-template-columns: 1fr 1fr; }
  .nib-contact-layout { grid-template-columns: 1fr; }
  .nib-about-values-inner { grid-template-columns: 1fr; }
  .nib-section { padding: var(--space-xl) var(--space-md); }
  .nib-shop-grid { padding: var(--space-lg) var(--space-md); }
  .nib-shop-filters { padding: var(--space-md); justify-content: flex-start; }

  /* Cart table → stacked cards on mobile (avoids off-screen columns) */
  .nib-cart-page-table thead { display: none; }
  .nib-cart-page-table,
  .nib-cart-page-table tbody,
  .nib-cart-page-table tr,
  .nib-cart-page-table td { display: block; width: 100%; }
  .nib-cart-page-table tr {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-column-gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--nib-rule);
  }
  .nib-cart-page-table td {
    border-bottom: none;
    padding: 0;
  }
  /* image cell spans both rows on the left */
  .nib-cart-page-table td:first-child {
    grid-row: 1 / span 5;
    align-self: start;
  }
  .nib-cart-page-table td:not(:first-child) {
    grid-column: 2;
    padding: 2px 0;
  }
  .nib-cart-page-table .nib-cart-page-name { font-size: 1.15rem; }
}
@media (max-width: 480px) {
  .nib-footer-inner { grid-template-columns: 1fr; }
  .nib-footer-bottom { flex-direction: column; align-items: flex-start; }
  .nib-header-inner { padding: 0 var(--space-md); }
  .nib-cart-page { padding: var(--space-md); }
}