:root {
  --ink: #231a19;
  --forest: #59604c;
  --moss: #676d57;
  --paper: #d5cdbf;
  --bone: #e3d2bd;
  --swamp: #aeb784;
  --port: #762b3b;
  --port-soft: #8a575b;
  --mustard: #c8aa56;
  --rust: #8a5a3f;
  --warm: #e6d9c8;
  --line: rgba(24, 33, 23, 0.2);
  --serif: "Newsreader", Georgia, serif;
  --logo-serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --plaster-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.4'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0;
}
body.menu-open, body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; width: 100%; }

.site-header {
  align-items: center;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 24px 34px;
  position: fixed;
  right: 0;
  top: 0;
  transition: background 300ms ease, color 300ms ease, padding 300ms ease;
  z-index: 20;
}
.site-header.scrolled {
  background: rgba(242, 240, 232, 0.94);
  color: var(--ink);
  padding-block: 15px;
  backdrop-filter: blur(12px);
}
.brand { display: flex; flex-direction: column; font-family: var(--serif); font-size: 28px; line-height: .9; text-transform: uppercase; }
.brand-line { align-items: center; display: flex; gap: 9px; }
.wordmark { align-items: baseline; display: inline-flex; }
.a-mark { display: inline-block; height: .8em; overflow: visible; position: relative; top: .06em; width: .76em; }
.a-mark path { fill: currentColor; }
.brand small { font-family: var(--sans); font-size: 8px; font-weight: 500; letter-spacing: .16em; margin-top: 8px; text-transform: uppercase; }
.leaf-mark { display: inline-block; height: 22px; position: relative; width: 18px; }
.leaf-mark::after { background: currentColor; bottom: 1px; content: ""; height: 17px; left: 8px; position: absolute; transform: rotate(-8deg); width: 1px; }
.leaf-mark b { background: currentColor; border-radius: 100% 0 100% 0; height: 7px; position: absolute; transform-origin: bottom left; width: 11px; }
.leaf-mark b:nth-child(1) { left: 9px; top: 1px; transform: rotate(-25deg); }
.leaf-mark b:nth-child(2) { left: 0; top: 6px; transform: rotate(42deg); }
.leaf-mark b:nth-child(3) { left: 8px; top: 11px; transform: rotate(-20deg) scale(.8); }
.main-nav { display: flex; gap: 34px; }
.main-nav a { font-size: 11px; font-weight: 500; text-transform: uppercase; }
.main-nav a::after { background: currentColor; content: ""; display: block; height: 1px; transform: scaleX(0); transform-origin: right; transition: transform 220ms ease; }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; }

.hero { align-items: center; background: var(--warm); color: var(--port); display: flex; flex-direction: column; justify-content: center; min-height: 760px; height: 100svh; max-height: 1040px; overflow: hidden; padding: 100px clamp(28px, 7vw, 110px); position: relative; text-align: center; }
.hero-eyebrow { color: var(--moss); }
.hero-mark { align-items: center; display: flex; gap: clamp(14px, 3vw, 34px); margin-bottom: 22px; }
.hero-mark-estd, .hero-mark-year { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero-sprout { fill: currentColor; height: clamp(60px, 8.5vw, 90px); width: auto; }
.hero-wordmark { color: var(--port); font-family: var(--logo-serif); font-size: clamp(64px, 11.5vw, 168px); font-weight: 500; letter-spacing: .05em; line-height: .95; margin: 0 0 20px; text-transform: uppercase; }
.hero-tagline { font-size: 12px; font-weight: 600; letter-spacing: .3em; margin: 0 0 6px; text-transform: uppercase; }
.hero-tagline-sub { color: var(--moss); font-family: var(--serif); font-size: 15px; font-style: italic; font-weight: 300; letter-spacing: .02em; margin: 0 0 48px; text-transform: none; }
.hero-scroll { color: var(--ink); }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .18em; margin: 0 0 25px; text-transform: uppercase; }
.eyebrow.dark { color: var(--moss); }
h1, h2, h3, p { letter-spacing: 0; }
h1 { font-family: var(--serif); font-size: clamp(54px, 7.1vw, 108px); font-weight: 300; letter-spacing: -.03em; line-height: .88; margin: 0 0 44px; }
h1 em, h2 em { font-weight: 300; }
.text-link { align-items: center; background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 500; gap: 28px; padding: 0 0 8px; text-transform: uppercase; }
.text-link span { transition: transform 220ms ease; }
.text-link:hover span { transform: translate(3px, -3px); }
.hero-side { bottom: 24px; color: var(--moss); font-size: 9px; letter-spacing: .18em; margin: 0; position: absolute; right: 30px; text-transform: uppercase; writing-mode: vertical-rl; }
.photo-journal-seal { animation: seal-spin 18s linear infinite; height: clamp(110px, 12vw, 170px); position: absolute; right: clamp(24px, 6vw, 90px); top: 20%; transform: translateY(-50%); width: auto; }
@keyframes seal-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }

.section { padding: 120px clamp(28px, 7vw, 110px); }
.section-index { border-top: 1px solid var(--line); font-size: 9px; font-weight: 600; letter-spacing: .14em; padding-top: 14px; text-transform: uppercase; }
.intro { display: grid; gap: clamp(50px, 9vw, 150px); grid-template-columns: minmax(120px, .5fr) 2fr; }
.intro-copy { max-width: 1040px; }
.intro-copy h2 { color: var(--port); }
.place-name { font-family: var(--serif); font-size: clamp(25px, 3vw, 42px); font-style: italic; font-weight: 300; line-height: 1; margin: 0 0 24px; text-align: center; text-transform: uppercase; }
h2 { font-family: var(--serif); font-size: clamp(45px, 5.7vw, 82px); font-weight: 300; line-height: .98; margin: 0; }
.two-col-copy { display: grid; gap: 45px; grid-template-columns: 1fr 1fr; margin: 70px 0 0 auto; max-width: 720px; }
.two-col-copy p, .story-copy > p, .dialog-copy > p { font-size: 15px; line-height: 1.75; margin: 0; }
.story-copy > p.place-name { font-size: clamp(25px, 3vw, 42px); line-height: 1; margin: 0 0 24px; }

.landscape-band { background-color: #565a49; background-image: var(--plaster-texture); background-size: cover; min-height: 690px; overflow: hidden; padding: 70px clamp(28px, 7vw, 110px); position: relative; }
.landscape-image { height: 550px; margin-left: auto; overflow: hidden; width: 72%; }
.landscape-image img { filter: saturate(.82); height: 100%; object-fit: cover; object-position: center 62%; }
.landscape-quote { bottom: 80px; color: white; left: clamp(28px, 7vw, 110px); margin: 0; position: absolute; }
.landscape-quote p { font-family: var(--serif); font-size: clamp(38px, 5vw, 70px); font-weight: 300; line-height: .95; margin: 10px 0 0; }

.photo-journal { background-color: #565a49; background-image: var(--plaster-texture); background-size: cover; overflow: hidden; padding: 75px 0 85px; position: relative; }
.photo-journal-layout { align-items: center; display: flex; gap: clamp(14px, 2vw, 28px); justify-content: center; }
.photo-journal-flank { color: white; flex: 0 1 auto; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 26px); font-style: italic; font-weight: 300; line-height: 1.2; margin: 0; max-width: 190px; text-align: center; }
.photo-stack-frame { flex: 0 0 auto; height: clamp(275px, 30vw, 475px); position: relative; width: clamp(220px, 24vw, 380px); }
.photo-stack-frame::before, .photo-stack-frame::after { background: var(--paper); border-radius: 2px; content: ""; inset: 0; position: absolute; z-index: -1; }
.photo-stack-frame::before { transform: rotate(-6deg); }
.photo-stack-frame::after { transform: rotate(5deg); }
.photo-stack-slide { border-radius: 2px; box-shadow: 0 20px 45px rgba(10,15,9,.35); filter: saturate(.85); height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transform: rotate(-2deg); transition: opacity 700ms ease; width: 100%; }
.photo-stack-slide.is-active { opacity: 1; }
.photo-stack-slide:nth-child(2) { transform: rotate(2deg); }
.photo-stack-slide:nth-child(3) { transform: rotate(-1.5deg); }
.photo-stack-slide:nth-child(4) { transform: rotate(1.5deg); }
.photo-stack-slide:nth-child(5) { transform: rotate(-2.5deg); }
.photo-stack-slide:nth-child(6) { transform: rotate(2.5deg); }
.photo-stack-slide:nth-child(7) { transform: rotate(-1deg); }
.photo-stack-slide:nth-child(8) { transform: rotate(1deg); }
.photo-stack-slide:nth-child(9) { transform: rotate(-3deg); }
.photo-stack-slide:nth-child(10) { transform: rotate(3deg); }

.story { display: grid; gap: clamp(50px, 9vw, 150px); grid-template-columns: minmax(120px, .5fr) 2fr; }
.story-layout { align-items: end; display: grid; gap: clamp(45px, 7vw, 100px); grid-template-columns: .88fr 1fr; }
.story-collage { aspect-ratio: 4 / 5; position: relative; }
.collage-photo { border: 6px solid var(--paper); box-shadow: 0 16px 38px rgba(35,26,25,.22); filter: saturate(.85); object-fit: cover; position: absolute; }
.collage-past { height: 38%; left: 0; top: 1%; transform: rotate(-7deg); width: 56%; z-index: 1; }
.collage-transition { height: 40%; right: 0; top: 27%; transform: rotate(5deg); width: 54%; z-index: 2; }
.collage-present { bottom: 0; height: 46%; left: 13%; transform: rotate(-3deg); width: 66%; z-index: 3; }
.portrait-frame span { display: block; font-size: 9px; letter-spacing: .12em; margin-top: 16px; text-transform: uppercase; }
.story-copy h2 { color: var(--port); font-size: clamp(42px, 4.5vw, 68px); margin-bottom: 38px; }
.story-copy > p + p { margin-top: 18px; }
.story-copy .text-link { margin-top: 38px; }

.tagline-accent { color: var(--forest); font-family: var(--serif); font-size: 17px; font-style: italic; margin: 14px 0 0; }

.oil { background: var(--port); color: var(--warm); display: grid; gap: 60px clamp(50px, 9vw, 150px); grid-template-columns: minmax(120px, .5fr) 2fr; }
.oil .eyebrow.dark { color: var(--mustard); }
.oil .section-index { border-top-color: rgba(230,217,200,.25); }
.oil-heading { grid-column: 2; position: relative; }
.oil-heading-seal { right: clamp(-10px, 1vw, 10px); }
.oil-heading h2 { color: white; }
.oil .tagline-accent { color: var(--mustard); }
.oil .size-selector { border-bottom-color: rgba(230,217,200,.25); border-top-color: rgba(230,217,200,.25); }
.oil .size-selector button { border-right-color: rgba(230,217,200,.25); }
.oil .size-selector button.active { background: var(--mustard); color: var(--ink); }
.product-showcase { align-items: stretch; display: grid; gap: clamp(45px, 7vw, 100px); grid-column: 1 / -1; grid-template-columns: 1.1fr .9fr; margin-top: 20px; }
.product-stage { align-items: center; background: var(--paper); color: var(--ink); display: flex; justify-content: center; min-height: 680px; overflow: hidden; position: relative; }
.product-stage img { height: 590px; mix-blend-mode: multiply; object-fit: contain; transition: height 450ms cubic-bezier(.2,.8,.2,1), transform 450ms cubic-bezier(.2,.8,.2,1); width: 80%; }
.product-stage img[data-format="250"] { height: 545px; transform: scaleX(.92); }
.product-stage img[data-format="1000"] { height: 625px; }
.product-stage img[data-format="3000"] { height: 660px; transform: scaleX(1.06); }
.product-stage img[data-format="5000"] { height: 690px; transform: scaleX(1.12); }
.product-origin, .product-volume { font-size: 8px; font-weight: 600; letter-spacing: .16em; position: absolute; text-transform: uppercase; z-index: 1; }
.product-origin { left: 22px; top: 22px; }
.product-volume { bottom: 22px; right: 22px; }
.product-info { align-self: center; max-width: 520px; }
.product-info h3 { font-family: var(--serif); font-size: clamp(50px, 6vw, 82px); font-weight: 300; line-height: .93; margin: 0 0 30px; }
.product-description { font-size: 14px; line-height: 1.7; min-height: 48px; }
.size-selector { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); margin: 35px 0; }
.size-selector button { background: transparent; border: 0; border-right: 1px solid var(--line); cursor: pointer; font-size: 10px; font-weight: 600; padding: 18px 8px; text-transform: uppercase; transition: background 180ms ease, color 180ms ease; }
.size-selector button:last-child { border-right: 0; }
.size-selector button.active { background: var(--port); color: white; }
.oil-grid { border-top: 1px solid var(--line); grid-column: 2; }
.story-principles { margin-top: 10px; }
.oil-card { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 50px 1fr 54px; min-height: 250px; padding: 35px 0; }
.oil-card-number { align-self: start; }
.oil-card-icon { fill: none; height: 36px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 36px; }
.oil-card:nth-of-type(1) .oil-card-number { color: var(--forest); }
.oil-card:nth-of-type(2) .oil-card-number { color: var(--rust); }
.oil-card:nth-of-type(3) .oil-card-number { color: var(--mustard); }
.oil-card h3 { color: var(--port); font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); font-weight: 300; line-height: 1; margin: 0 0 12px; }
.oil-card p:not(.eyebrow) { font-size: 13px; line-height: 1.6; margin: 0; max-width: 480px; }
.circle-button { align-items: center; background: transparent; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer; display: flex; font-size: 20px; height: 54px; justify-content: center; transition: background 200ms ease, color 200ms ease; width: 54px; }
.circle-button:hover { background: var(--ink); color: var(--paper); }

.contact { background-color: #565a49; background-image: var(--plaster-texture); background-size: cover; color: white; display: grid; gap: 80px; grid-template-columns: 1fr 1fr; padding: 130px clamp(28px, 7vw, 110px); }
.contact-heading h2 { margin-bottom: 40px; }
.contact-heading > p:last-child { font-size: 14px; line-height: 1.7; max-width: 330px; }
.contact-form { align-self: end; }
.contact-form label { border-bottom: 1px solid rgba(255,255,255,.25); display: grid; grid-template-columns: 80px 1fr; padding: 22px 0; }
.contact-form label span { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { background: transparent; border: 0; color: white; outline: 0; resize: none; width: 100%; }
.submit-button { background: white; border: 0; cursor: pointer; display: flex; font-size: 10px; font-weight: 600; justify-content: space-between; margin-top: 30px; padding: 17px 18px; text-transform: uppercase; width: 100%; }
.form-status { font-size: 12px; min-height: 20px; }

footer { align-items: flex-end; background: var(--ink); color: white; display: grid; gap: 50px; grid-template-columns: 1fr 1fr 1fr; padding: 55px clamp(28px, 7vw, 110px); }
.footer-brand { align-items: center; display: flex; font-family: var(--serif); font-size: 42px; gap: 12px; text-transform: uppercase; }
footer p, .footer-links { font-size: 9px; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; }
.footer-links { display: flex; gap: 20px; justify-content: flex-end; }
.social-icon { align-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; display: flex; height: 38px; justify-content: center; transition: background 180ms ease, color 180ms ease; width: 38px; }
.social-icon:hover { background: white; color: var(--ink); }
.social-icon svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 17px; }
.social-icon svg .fill-dot { fill: currentColor; stroke: none; }
.copyright { align-self: center; }

.story-dialog { background: var(--paper); border: 0; color: var(--ink); height: 100%; margin: 0 0 0 auto; max-height: none; max-width: 780px; padding: 80px clamp(30px, 6vw, 90px); width: min(100%, 780px); }
#organic.story-dialog, #land.story-dialog, #elevation.story-dialog { max-width: 1120px; padding-inline: clamp(38px, 5vw, 72px); width: min(100%, 1120px); }
.land-collage-wrap { align-self: center; }
.land-collage { aspect-ratio: 4 / 5; position: relative; }
.land-collage .collage-photo { border: 6px solid var(--paper); box-shadow: 0 16px 38px rgba(35,26,25,.22); filter: saturate(.85); object-fit: cover; position: absolute; }
.land-before { height: 58%; left: 0; top: 2%; transform: rotate(-6deg); width: 74%; z-index: 1; }
.land-after { bottom: 0; height: 58%; right: 0; transform: rotate(4deg); width: 74%; z-index: 2; }
.land-collage-wrap span { display: block; font-size: 9px; letter-spacing: .12em; margin-top: 16px; text-align: center; text-transform: uppercase; }
.story-dialog[open] { animation: slide-in 400ms cubic-bezier(.2,.8,.2,1); display: grid; grid-template-columns: 55px 1fr; }
.story-dialog::backdrop { background: rgba(10,15,9,.67); backdrop-filter: blur(5px); }
.dialog-close { background: transparent; border: 0; cursor: pointer; font-family: var(--serif); font-size: 45px; position: absolute; right: 28px; top: 18px; }

.collage-photo { cursor: zoom-in; }
.photo-lightbox { background: transparent; border: 0; height: 100%; margin: auto; max-height: none; max-width: none; padding: 0; width: 100%; }
.photo-lightbox[open] { align-items: center; animation: lightbox-in 260ms ease; display: flex; justify-content: center; }
.photo-lightbox::backdrop { background: rgba(10,15,9,.86); backdrop-filter: blur(6px); }
.photo-lightbox img { box-shadow: 0 30px 80px rgba(0,0,0,.45); max-height: 88vh; max-width: 88vw; object-fit: contain; }
.photo-lightbox .dialog-close { color: white; z-index: 1; }
.land-lightbox-grid { align-items: center; display: flex; flex-direction: column; gap: clamp(14px, 2.5vh, 28px); max-width: 92vw; }
.land-lightbox-grid figure { margin: 0; }
.land-lightbox-grid img { box-shadow: 0 30px 80px rgba(0,0,0,.45); max-height: 42vh; max-width: 88vw; object-fit: contain; }
.land-lightbox-grid figcaption { color: white; font-size: 10px; letter-spacing: .14em; margin-top: 12px; text-align: center; text-transform: uppercase; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-number { font-family: var(--serif); font-size: 18px; }
.dialog-copy { align-self: center; }
.dialog-copy h2 { font-size: clamp(44px, 6vw, 75px); margin-bottom: 45px; }
.dialog-copy > p + p { margin-top: 22px; }
.organic-dialog-copy { align-items: center; display: grid; gap: clamp(34px, 5vw, 70px); grid-template-columns: minmax(270px, .8fr) minmax(390px, 1.2fr); }
.elevation-collage-wrap { align-self: center; }
.elevation-collage-wrap span { display: block; font-size: 9px; letter-spacing: .12em; margin-top: 16px; text-align: center; text-transform: uppercase; }
.elevation-collage { aspect-ratio: 4 / 5; position: relative; }
.elevation-collage .collage-photo { border: 6px solid var(--paper); box-shadow: 0 16px 38px rgba(35,26,25,.22); object-fit: cover; position: absolute; }
.elevation-village { height: 58%; left: 0; top: 2%; transform: rotate(-5deg); width: 76%; z-index: 1; }
.elevation-sign { bottom: 0; height: 58%; right: 0; transform: rotate(4deg); width: 58%; z-index: 2; }
.organic-dialog-copy h2 { font-size: clamp(42px, 5vw, 68px); }
.organic-text > p + p { margin-top: 22px; }
.organic-collage { height: min(70vh, 610px); min-height: 510px; position: relative; }
.organic-photo { border: 5px solid var(--paper); box-shadow: 0 18px 45px rgba(35,26,25,.17); object-fit: cover; opacity: 0; position: absolute; }
.organic-photo.buds { height: 55%; left: 0; top: 2%; width: 48%; }
.organic-photo.blossom { height: 48%; right: 0; top: 8%; width: 49%; }
.organic-photo.fruit { bottom: 1%; height: 47%; left: 20%; width: 55%; }
#organic[open] .organic-photo.buds { animation: organic-photo-in 650ms 180ms ease forwards; }
#organic[open] .organic-photo.blossom { animation: organic-photo-in 650ms 320ms ease forwards; }
#organic[open] .organic-photo.fruit { animation: organic-photo-in 650ms 460ms ease forwards; }
.oil-card-heading-row { align-items: center; display: flex; gap: 18px; margin-bottom: 12px; }
.oil-card-heading-row h3 { margin-bottom: 0; }
.organic-seal-logo-inline { box-shadow: 0 8px 20px rgba(35,26,25,.25); flex-shrink: 0; width: 76px; }
@keyframes organic-photo-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(25px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-image { clip-path: inset(0 0 100% 0); transition: clip-path 900ms cubic-bezier(.6,0,.2,1); }
.reveal-image.visible { clip-path: inset(0); }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }

.pens-full-hero { color: var(--port); }
.pens-hero-wordmark { color: var(--port); font-family: var(--logo-serif); font-size: clamp(38px, 6.4vw, 96px); font-weight: 500; letter-spacing: .05em; line-height: 1.05; margin: 0 0 28px; text-align: center; text-transform: uppercase; }
.pens-hero { position: relative; }
.pens-hero .photo-journal-seal { top: 44%; }
.pens-hero .intro-copy { max-width: 1040px; }
.pens-hero h1 { color: var(--port); }
.pen-steps { display: flex; flex-direction: column; gap: clamp(70px, 10vw, 130px); }
.pen-step { align-items: center; display: grid; gap: clamp(40px, 6vw, 90px); grid-template-columns: .9fr 1.1fr; }
.pen-step-reverse { grid-template-columns: 1.1fr .9fr; }
.pen-step-reverse .pen-step-image, .pen-step-reverse .pen-step-image-wrap { order: 2; }
.pen-step-reverse .pen-step-copy { order: 1; }
.pen-step-image { aspect-ratio: 3 / 4; overflow: hidden; position: relative; }
.pen-step-image img { filter: saturate(.85); height: 100%; object-fit: cover; }
.pen-step-photo-caption { color: var(--moss); font-family: var(--serif); font-size: 15px; font-style: italic; margin: 16px 0 0; text-align: center; }
.pen-step-number { color: var(--rust); font-family: var(--serif); font-size: 32px; margin-bottom: 8px; }
.pen-step-copy p:not(.eyebrow) { font-size: 15px; line-height: 1.75; max-width: 460px; }
.pen-order-info { max-width: 640px; }
#pen-order { position: relative; }
.pen-order-logo { height: auto; opacity: .9; position: absolute; right: clamp(24px, 6vw, 90px); top: 15%; transform: translateY(-50%); width: clamp(130px, 14vw, 210px); }

@media (max-width: 800px) {
  .site-header { padding: 18px 20px; }
  .brand { font-size: 20px; }
  .menu-toggle { background: transparent; border: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 0 10px 15px; position: relative; z-index: 2; }
  .menu-toggle span { background: currentColor; height: 1px; transition: transform 200ms ease; width: 26px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .main-nav { align-items: flex-start; background: var(--paper); color: var(--ink); flex-direction: column; gap: 12px; inset: 0; justify-content: center; opacity: 0; padding: 28px; pointer-events: none; position: fixed; transition: opacity 220ms ease; }
  .main-nav.open { opacity: 1; pointer-events: auto; }
  .main-nav a { font-family: var(--serif); font-size: 46px; font-weight: 300; text-transform: none; }
  .hero { min-height: 680px; padding: 70px 22px; }
  .hero-mark { gap: 12px; }
  .hero-side { display: none; }
  .photo-journal-seal { display: none; }
  .pen-order-logo { display: none; }
  .section { padding: 85px 22px; }
  .intro, .story, .oil { display: block; }
  .section-index { margin-bottom: 65px; }
  .two-col-copy { display: block; margin-top: 45px; }
  .two-col-copy p + p { margin-top: 20px; }
  .landscape-band { min-height: 620px; padding: 35px 22px; }
  .landscape-image { height: 430px; width: 100%; }
  .landscape-quote { bottom: 55px; left: 22px; }
  .photo-journal { padding-block: 60px; }
  .photo-journal-layout { flex-direction: column; gap: 18px; }
  .photo-journal-flank { max-width: none; padding: 0 22px; }
  .photo-stack-frame { flex: 0 0 auto; height: 275px; width: 220px; }
  .story-layout { display: flex; flex-direction: column; }
  .portrait-frame { width: 82%; }
  .oil-heading, .oil-grid { grid-column: auto; }
  .oil-heading { margin-bottom: 60px; }
  .product-showcase { display: block; }
  .product-stage { min-height: 530px; }
  .product-stage img, .product-stage img[data-format="1000"], .product-stage img[data-format="3000"], .product-stage img[data-format="5000"] { height: 480px; max-width: 90%; }
  .product-info { margin: 55px 0 85px; }
  .oil-card { grid-template-columns: 35px 1fr 44px; min-height: 220px; }
  .circle-button { height: 44px; width: 44px; }
  .contact { display: block; padding: 90px 22px; }
  .contact-form { margin-top: 80px; }
  footer { align-items: start; display: flex; flex-direction: column; padding: 50px 22px; }
  .footer-links { flex-wrap: wrap; justify-content: flex-start; }
  .story-dialog[open] { display: block; padding: 85px 28px 55px; }
  .dialog-number { margin-bottom: 60px; }
  .organic-dialog-copy { display: block; }
  .organic-collage { height: 490px; margin-top: 55px; min-height: 0; }
  .pen-step, .pen-step-reverse { display: flex; flex-direction: column; gap: 28px; grid-template-columns: none; }
  .pen-step-reverse .pen-step-image, .pen-step-reverse .pen-step-image-wrap, .pen-step-reverse .pen-step-copy { order: initial; }
  .pen-step-image { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}