/* Jungle Journal - shared site styles
 *
 * Aesthetic: "antiquarian field guide, refined for a gallery."
 * Cream/leather/ink naturalist identity from the app, elevated with finer
 * typographic rhythm, layered paper texture + grain, a sparing botanical-green
 * accent, hairline double-rules and small-caps eyebrows (vintage natural-history
 * plates), tactile controls, and a gallery-style print page.
 *
 * No build step. One stylesheet. Every class/id used by print.js is preserved.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Special+Elite&display=swap');

:root {
  --cream:           #FBF8F1;
  --paper:           #F4EDDD;
  --paper-dark:      #E8DEC6;
  --ink:             #2A1A0E;
  --ink-soft:        #4A3322;
  --ink-light:       #6B4E38;
  --leather:         #8B5E3C;
  --leather-dark:    #5E3D22;
  --leather-deep:    #4A2F19;
  --safari:          #B98742;
  --gold:            #C4954A;
  --forest:          #3F5742;   /* botanical green - sparing accent */
  --forest-soft:     #5C7460;
  --stamp-red:       #9A3B33;
  --stamp-blue:      #3A5A8B;

  --line:            rgba(94, 61, 34, 0.18);
  --line-soft:       rgba(94, 61, 34, 0.10);

  --font-display:    'Playfair Display', Georgia, serif;
  --font-serif:      'Cormorant Garamond', Georgia, serif;
  --font-body:       'Lora', Georgia, serif;
  --font-notes:      'Special Elite', 'Courier New', monospace;

  --content-max:     820px;

  --shadow-sm:       0 1px 2px rgba(42, 26, 14, 0.06), 0 2px 6px rgba(42, 26, 14, 0.06);
  --shadow-md:       0 2px 4px rgba(42, 26, 14, 0.08), 0 10px 28px rgba(42, 26, 14, 0.12);
  --shadow-lg:       0 8px 18px rgba(42, 26, 14, 0.10), 0 24px 60px rgba(42, 26, 14, 0.20);

  --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* ── Layered paper atmosphere ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(196, 149, 74, 0.10) 0, transparent 55%),
    radial-gradient(ellipse at 85% 8%,  rgba(139, 94, 60, 0.08) 0, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(63, 87, 66, 0.07) 0, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
}
/* Fine grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

a {
  color: var(--leather);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s var(--ease), color 0.2s ease;
}
a:hover {
  color: var(--leather-dark);
  background-size: 100% 1.5px;
}

::selection { background: rgba(196, 149, 74, 0.28); color: var(--ink); }

/* ── Layout containers ── */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Header / wordmark bar ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 237, 221, 0.82);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  color: var(--ink);
  letter-spacing: 0.2px;
  background-image: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wordmark::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--safari), var(--leather-dark));
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.14);
}
.wordmark:hover { color: var(--ink); }
.nav {
  display: flex;
  gap: 26px;
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink-light);
  padding-bottom: 4px;
  background-position: 0 100%;
}
.nav a:hover { color: var(--leather); }
.nav a.active {
  color: var(--leather-dark);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1.5px;
}

/* ── Entrance animation ── */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise {
  opacity: 0;
  animation: riseIn 0.9s var(--ease) forwards;
}

/* ── Hero ── */
.hero {
  position: relative;
  padding: 96px 0 76px;
  text-align: center;
}
.hero .container { position: relative; }
.hero .eyebrow {
  display: inline-block;
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--leather);
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(251, 248, 241, 0.6);
  margin-bottom: 26px;
  animation: riseIn 0.8s var(--ease) both;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 8vw, 82px);
  line-height: 1.02;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -1px;
  animation: riseIn 0.9s var(--ease) 0.08s both;
}
.hero .rule {
  position: relative;
  width: 120px;
  height: 1px;
  background: var(--leather);
  opacity: 0.5;
  margin: 26px auto;
  animation: riseIn 0.9s var(--ease) 0.16s both;
}
.hero .rule::before,
.hero .rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
}
.hero .rule::before { left: -3px; }
.hero .rule::after  { right: -3px; }
.hero .tagline {
  font-family: var(--font-notes);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--ink-light);
  margin: 0 0 24px;
  text-transform: uppercase;
  animation: riseIn 0.9s var(--ease) 0.16s both;
}
.hero .blurb {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.5;
  animation: riseIn 0.9s var(--ease) 0.24s both;
}

/* ── Buttons ── */
.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
  animation: riseIn 0.9s var(--ease) 0.32s both;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  background: linear-gradient(180deg, #946541, var(--leather) 60%, var(--leather-dark));
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  border: 1px solid var(--leather-dark);
  border-radius: 3px;
  letter-spacing: 0.3px;
  background-size: auto;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s ease;
}
.cta:hover {
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cta:active { transform: translateY(0); }
.cta.secondary {
  background: transparent;
  color: var(--leather-dark);
  border: 1px solid var(--leather);
  box-shadow: none;
}
.cta.secondary:hover {
  color: var(--leather-dark);
  background: rgba(139, 94, 60, 0.06);
  box-shadow: var(--shadow-sm);
}
.cta.coming-soon {
  background: var(--paper-dark);
  color: var(--ink-light);
  border-color: var(--line);
  box-shadow: none;
  cursor: default;
}
.cta.coming-soon:hover { transform: none; color: var(--ink-light); box-shadow: none; }

/* ── Feature grid ── */
.features {
  padding: 76px 0;
  border-top: 1px solid var(--line);
}
.features h2 {
  font-family: var(--font-notes);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--leather);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 44px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.feature {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%),
    var(--cream);
  border: 1px solid var(--line);
  padding: 30px 26px 28px;
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--leather) 50%, var(--forest));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.feature:hover::before { transform: scaleX(1); }
.feature h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  color: var(--ink);
  margin: 0 0 10px;
}
.feature .feature-eyebrow {
  font-family: var(--font-notes);
  font-size: 10px;
  letter-spacing: 2.6px;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.feature p {
  font-size: 15px;
  color: var(--ink-light);
  line-height: 1.6;
  margin: 0;
}

/* ── Quote / pull-block ── */
.pull {
  position: relative;
  margin: 72px auto;
  max-width: 600px;
  padding: 34px 40px 34px 44px;
  border-left: 2px solid var(--leather);
  background: linear-gradient(180deg, rgba(251, 248, 241, 0.85), rgba(244, 237, 221, 0.6));
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.55;
  border-radius: 0 3px 3px 0;
  box-shadow: var(--shadow-sm);
}
.pull::before {
  content: '\201C';
  position: absolute;
  top: 2px;
  left: 14px;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.4;
}
.pull cite {
  display: block;
  font-family: var(--font-notes);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--ink-light);
  margin-top: 16px;
  text-transform: uppercase;
}

/* ── Long-form content (privacy + support + order pages) ── */
.content {
  padding: 64px 0 90px;
}
.content .container { max-width: 720px; }
.content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 52px);
  margin: 0 0 10px;
  letter-spacing: -0.5px;
  line-height: 1.05;
}
.content .updated {
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 2.4px;
  color: var(--ink-light);
  text-transform: uppercase;
  margin: 0 0 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  color: var(--ink);
  margin: 48px 0 14px;
  letter-spacing: -0.2px;
}
.content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--leather-dark);
  margin: 30px 0 8px;
}
.content p, .content li {
  font-size: 16.5px;
  color: var(--ink-soft);
  line-height: 1.75;
}
.content strong { color: var(--ink); }
.content ul { padding-left: 24px; }
.content li { margin-bottom: 7px; }
.content li::marker { color: var(--leather); }
.content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}
.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14.5px;
}
.content table th, .content table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.content table th {
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--leather);
  text-transform: uppercase;
  background: rgba(232, 222, 198, 0.5);
}
.content table tr:last-child td { border-bottom: none; }
.tldr {
  background: linear-gradient(180deg, var(--cream), rgba(244, 237, 221, 0.7));
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  padding: 20px 24px;
  margin: 26px 0 34px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.55;
  border-radius: 0 3px 3px 0;
  box-shadow: var(--shadow-sm);
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  background: linear-gradient(180deg, var(--paper-dark), #DFD3B6);
  margin-top: 72px;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--ink-light);
  text-transform: uppercase;
}
.site-footer a {
  color: var(--ink-light);
  margin-right: 18px;
  padding-bottom: 3px;
}
.site-footer a:hover { color: var(--leather); }

/* ═══════════════════════════════════════════════════════════
   Print order page
   ═══════════════════════════════════════════════════════════ */
.print-note {
  font-family: var(--font-notes);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink-light);
  padding: 16px 0;
}
.print-note.small { font-size: 12px; }
.print-error {
  color: var(--stamp-red);
  border-left: 2px solid var(--stamp-red);
  background: rgba(154, 59, 51, 0.06);
  padding: 16px 20px;
  letter-spacing: 0.4px;
  border-radius: 0 3px 3px 0;
}
/* The print page runs wider and less boxed-in than the prose pages. */
.content .print-container { max-width: 1120px; }
.print-page h1 { font-size: clamp(40px, 6vw, 60px); }

/* Hero-on-top layout: large photo across the top, options in a row below. */
.print-layout {
  display: block;
  margin-top: 26px;
}
.print-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 4px;
  align-items: start;
}
.print-options > .span-all { grid-column: 1 / -1; }
.price-block { margin: 8px 0 18px; }

/* Visual product picker */
.product-grid {
  display: grid;
  /* Fewer, larger columns so the 9 products sit in ~2 balanced rows. A
     selected card spanning 2 columns then reflows within those rows instead
     of pushing a lone item onto a new row. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
  /* Top-align so cards don't stretch to the tallest in their row. */
  align-items: start;
  /* Dense packing lets the smaller cards flow into the cells around the
     enlarged (2x2) selected tile, so there's no dead whitespace beside it. */
  grid-auto-flow: row dense;
}
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s var(--ease), border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { border-color: var(--leather); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-card.active {
  border-color: var(--leather-dark);
  box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.30), var(--shadow-sm);
}
.product-illu { width: 64px; height: 52px; display: block; }
.product-photo {
  width: 100%;
  height: 96px;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}
/* The selected product card enlarges in place so the customer can see the
   chosen canvas in more detail. It spans two grid columns (more width) AND
   grows its image height, so the picture itself scales up rather than just
   sitting in a taller box. Neighbouring cards keep their size and reflow
   around it. */
.product-photo { transition: height 0.22s ease; }
/* Selected card becomes a 2x2 collage tile; neighbours pack around it. */
.product-card.active {
  grid-column: span 2;
  grid-row: span 2;
}
.product-card.active .product-photo {
  height: 252px;
}
.product-name {
  font-family: var(--font-notes);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.3;
}
.product-from { font-family: var(--font-body); font-size: 11px; color: var(--ink-light); }

/* Gallery-style photo preview - matted print under glass */
.print-preview {
  margin: 0 0 34px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  width: 100%;
  text-align: center;   /* centre the shrink-to-fit hero frame */
}
.preview-frame {
  position: relative;
  /* Soft placeholder shimmer while the full-res image streams in. */
  background:
    linear-gradient(110deg, var(--paper-dark) 30%, #f0e8d4 50%, var(--paper-dark) 70%)
    var(--paper-dark);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 1px;
  overflow: hidden;
  min-height: 120px;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.print-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.print-preview img.loaded { opacity: 1; }
.preview-frame.grabbing { cursor: grabbing; }
.preview-frame.grabbing img { cursor: grabbing; }

/* Simple, consistent canvas preview: the rectangle IS the print, nothing
 * else. A hairline edge + soft drop shadow makes it read as a physical print
 * without dressing it up in product-specific frames. */
.preview-frame {
  box-sizing: border-box;
  border: 1px solid rgba(42, 26, 14, 0.55);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 14px 34px rgba(0,0,0,0.22);
  /* Size from a bounded HEIGHT so tall portraits never overflow the viewport.
   * Width follows the aspect-ratio (set per size in JS) and clamps to the
   * column via max-width, so the caption + hint below always stay visible. */
  /* Exact width/height are computed in JS (applyPreviewFrame) so every shape -
   * including wide panoramas - fits the hero area at true proportions. */
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}
/* When zoomed in, the photo is scaled up and the frame clips the overflow. */
.preview-frame.zoomed { cursor: grab; }
.print-preview img { transition: opacity 0.5s var(--ease), transform 0.2s var(--ease); }
.drag-hint {
  font-family: var(--font-notes);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-light);
  text-align: center;
  margin: 12px 0 0;
  opacity: 0.75;
}
.zoom-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42, 26, 14, 0.62);
  color: var(--cream);
  border: 1px solid rgba(250, 246, 238, 0.25);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.15s var(--ease);
}
.zoom-btn:hover { background: rgba(42, 26, 14, 0.82); transform: scale(1.06); }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(28, 18, 10, 0.94);
  display: flex;
  overflow: auto;            /* scroll to inspect true-resolution pixels */
  padding: 28px;
  cursor: zoom-out;
  animation: riseIn 0.25s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  margin: auto;              /* centre when smaller than the viewport */
  max-width: none;           /* default: show at true pixel size */
  max-height: none;
  image-rendering: -webkit-optimize-contrast;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
  border: 6px solid var(--cream);
  border-radius: 2px;
  cursor: zoom-in;
}
.lightbox.fit img {          /* toggled: fit the whole photo on screen */
  max-width: 96vw;
  max-height: 88vh;
  cursor: zoom-out;
}
.lightbox-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  text-align: center;
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.8);
  pointer-events: none;
}
.print-preview figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.3px;
}

.print-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}
.print-fieldset legend {
  font-family: var(--font-notes);
  font-size: 11px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--leather);
  margin-bottom: 14px;
  padding: 0;
}
.print-fieldset label {
  display: block;
  font-family: var(--font-notes);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 14px;
}
.print-fieldset input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.print-fieldset input:focus {
  outline: none;
  border-color: var(--leather);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.12);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  font-family: var(--font-notes);
  font-size: 13px;
  letter-spacing: 0.8px;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px 17px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover { border-color: var(--leather); transform: translateY(-1px); }
.chip-active {
  background: linear-gradient(180deg, #946541, var(--leather) 70%, var(--leather-dark));
  color: var(--cream);
  border-color: var(--leather-dark);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.18);
}
.chip-size {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.2;
}
/* Orientation chips with a little shape icon for visual guidance */
.chip-orient {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.shape-glyph {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  flex: none;
  opacity: 0.85;
}
.shape-portrait  { width: 12px; height: 16px; }
.shape-landscape { width: 16px; height: 12px; }
.shape-pano      { width: 19px; height: 7px;  }
.shape-square    { width: 14px; height: 14px; }
.chip-dim {
  font-size: 10px;
  letter-spacing: 0.3px;
  opacity: 0.7;
}
.chip-price {
  font-size: 11px;
  opacity: 0.78;
}
.print-select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.print-select:focus { outline: none; border-color: var(--leather); box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.12); }
.print-blurb {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-light);
  margin: 10px 0 0;
}
.print-spec {
  font-family: var(--font-notes);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-light);
  margin: 6px 0 0;
}
/* Gift option */
.gift-block { margin: 4px 0 4px; }
.gift-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-notes);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.gift-toggle input { width: 16px; height: 16px; accent-color: var(--leather); }
#gift-fields { margin-top: 10px; }
#gift-fields textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  resize: vertical;
}
#gift-fields textarea:focus { outline: none; border-color: var(--leather); }
.print-warning {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--stamp-red);
  margin: 12px 0 0;
  line-height: 1.5;
}

.price-breakdown {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-light);
}
.price-sub {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  margin: 6px 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-notes);
  font-size: 12px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink-light);
}
.price-line strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.print-consent {
  font-size: 13.5px;
  color: var(--ink-light);
  line-height: 1.6;
  margin: 20px 0;
}
#submit-btn { width: 100%; justify-content: center; cursor: pointer; }
#submit-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .print-options { grid-template-columns: 1fr; column-gap: 0; }
  .print-preview { margin: 0 auto 26px; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .site-header { padding: 16px 0; }
  .nav { gap: 16px; letter-spacing: 1.8px; }
  .hero { padding: 60px 0 48px; }
  .features { padding: 48px 0; }
  .pull { margin: 48px 4px; padding: 26px 26px 26px 30px; font-size: 19px; }
  .content { padding: 40px 0 64px; }
}