/* Sylva — a garden journal: warm paper, forest ink, a vermilion annotation. */
:root {
  --paper:#f3efdf;
  --ground:#f1ebda;
  --ink:#2d432f;
  --dim:#626951;
  --red:#b84427;
  --rule:#2d432f33;
  --gutter:clamp(24px,5.6vw,88px);
  --serif:'DM Serif Display',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1)}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  color:inherit;
  border:0;
  cursor:pointer}
img {
  display:block;
  width:100%;
  height:auto}
p,h1,h2,h3,figure {
  margin:0}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--red);
  outline-offset:6px}
::selection {
  background:#d9bd68;
  color:var(--ink)}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--paper);
  padding:12px;
  z-index:100}
.skip:focus {
  top:20px}
.sheet {
  position:relative;
  z-index:1}
.masthead {
  position:sticky;
  top:0;
  z-index:1;
  transform:translate3d(0,var(--sylva-stage,0px),0);
  will-change:transform;
  filter:var(--sylva-stage-filter,none);
  opacity:var(--sylva-stage-fade,1);

  margin:0 var(--gutter);
  padding:24px 0 20px;
  display:flex;
  align-items:center;
  gap:35px;
  border-bottom:1px solid var(--rule)}
.wordmark {
  font-family:var(--serif);
  font-size:56px;
  letter-spacing:-4px;
  line-height:1}
.wordmark span {
  display:inline-block;
  font-family:Georgia,serif;
  font-size:25px;
  color:var(--red);
  margin-left:8px;
  vertical-align:top;
  letter-spacing:0}
.masthead-note {
  font-size:12px;
  color:var(--dim);
  margin-left:18px}
.masthead nav {
  margin-left:auto;
  display:flex;
  gap:32px;
  font-size:13px}
.masthead nav a:hover,.back-top:hover {
  color:var(--red)}
.hero {
  position:sticky;
  top:var(--masthead-h,88px);
  z-index:1;
  overflow:hidden;
  transform:translate3d(0,var(--sylva-stage,0px),0);
  will-change:transform;
  padding:54px var(--gutter) 11vw;
  min-height:min(92svh,1000px);
  display:flex;
  flex-direction:column;
  justify-content:center}
.eyebrow,.plant-index {
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500}
.lede {
  position:relative;
  z-index:2;
  filter:var(--sylva-stage-filter,none);
  opacity:var(--sylva-stage-fade,1);

  max-width:min(50%,620px)}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400}
h1 {
  font-size:clamp(58px,6.9vw,110px);
  line-height:.99;
  letter-spacing:-.045em;
  margin-bottom:26px}
em {
  font-weight:400;
  color:var(--red)}
.intro {
  font-size:15px;
  line-height:1.8;
  color:var(--dim)}
.buy {
  display:inline-flex;
  gap:36px;
  align-items:center;
  border-bottom:1px solid var(--ink);
  padding:10px 0;
  margin-top:24px;
  font-size:14px}
.buy span {
  color:var(--red);
  font-size:23px;
  transition:transform .2s}
.buy:hover span {
  transform:translate(3px,-3px)}
.margin-note {
  margin-top:34px;
  font-family:var(--serif);
  font-size:19px;
  font-style:italic;
  color:var(--red);
  transform:rotate(-4deg);
  transform-origin:left center}
.margin-note span {
  margin-right:6px}
/* Layer two of three. The shader behind is near-still, the page ahead scrolls
   at full speed, and the bottle sits between them. */
.ground {
  position:relative;
  z-index:2;
  background:var(--ground);
  border-radius:48px 48px 0 0}
footer {
  position:relative;
  z-index:2;
  background:var(--ground)}

/* The plinth is a cut-out on transparent ground, bled past the gutter and
   pinned to the foot of the hero. It sits behind the copy and takes no clicks,
   so the bottle can rise alongside the headline without trapping the links. */
.plate {
  position:absolute;
  left:-40px;
  right:-40px;
  bottom:0;
  opacity:var(--sylva-stage-fade,1);

  margin:0;
  z-index:1;
  pointer-events:none}
.plate-light {
  position:absolute;
  inset:0;
  pointer-events:none;
  -webkit-mask-image:url(/examples/sylva/bottle.webp);
  mask-image:url(/examples/sylva/bottle.webp);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat}
/* The bottle softens as it recedes; the light playing over it does not. Blur
   over a still image re-rasterises only when the radius steps, so the cost is
   spent once per step rather than on every frame the shader draws. */
.plate img {
  display:block;
  width:100%;
  height:auto;
  filter:var(--sylva-stage-filter,none)}

.field-notes {
  margin:0 var(--gutter);
  padding:78px 0 88px;
  display:grid;
  grid-template-columns:1fr 2fr .45fr;
  gap:30px;
  align-items:start;
  border-bottom:1px solid var(--rule)}
.field-notes>.eyebrow {
  padding-top:12px}
.field-notes h2 {
  font-size:clamp(38px,4.5vw,64px);
  line-height:1.08;
  letter-spacing:-.025em}
.field-notes p:not(.eyebrow) {
  max-width:43ch;
  color:var(--dim);
  margin-top:26px}
.field-mark {
  font-family:var(--serif);
  font-style:italic;
  font-size:120px;
  color:var(--red);
  line-height:1;
  transform:rotate(-10deg);
  align-self:center}
.formula {
  padding:80px var(--gutter)}
.section-head {
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  gap:36px;
  align-items:start;
  margin-bottom:48px}
.section-head>.eyebrow {
  padding-top:10px}
h2 {
  font-size:clamp(38px,4vw,59px);
  line-height:1.07;
  letter-spacing:-.025em}
.section-head>p:last-child {
  color:var(--dim);
  font-size:14px;
  max-width:30ch;
  padding-top:6px}
.ingredients {
  display:grid;
  grid-template-columns:repeat(3,1fr)}
.ingredient {
  padding:28px 32px 0 0;
  border-top:1px solid var(--ink);
  position:relative}
.ingredient+.ingredient {
  padding-left:32px;
  border-left:1px solid var(--rule)}
.plant-index {
  color:var(--red);
  font-size:9px}
.ingredient h3 {
  font-size:43px;
  margin:21px 0 10px}
.ingredient p {
  max-width:30ch;
  font-size:14px;
  color:var(--dim);
  min-height:90px}
.amount {
  display:block;
  font-family:var(--serif);
  font-size:70px;
  line-height:1.2;
  margin-top:22px;
  letter-spacing:-.05em}
.amount span {
  font-size:25px;
  vertical-align:top;
  display:inline-block;
  padding-top:12px;
  margin-left:4px}
.formula-foot {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--rule);
  padding-top:20px;
  margin-top:28px;
  font-size:11px;
  color:var(--dim)}
.method {
  background:var(--ink);
  color:var(--paper);
  padding:76px var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%}
.method .eyebrow {
  color:#c6cdb6;
  margin-bottom:30px}
.method h2 {
  font-size:clamp(46px,5.2vw,76px)}
.method em {
  color:#dcc890}
.ritual-heading>p:not(.eyebrow) {
  margin-top:28px;
  color:#c6cdb6;
  font-size:14px}
.ritual-flower {
  font-size:80px;
  color:#dcc890;
  display:block;
  line-height:1;
  margin-top:36px}
.steps {
  padding:0;
  margin:0;
  list-style:none;
  align-self:center}
.steps li {
  display:flex;
  gap:24px;
  padding:26px 0;
  border-top:1px solid #f3efdf40}
.steps li:last-child {
  border-bottom:1px solid #f3efdf40}
.n {
  font-size:10px;
  color:#dcc890;
  padding-top:10px}
.steps h3 {
  font-size:28px}
.steps p {
  max-width:35ch;
  margin-top:8px;
  font-size:13px;
  color:#c6cdb6}
footer {
  padding:48px var(--gutter) 90px}
.footer-top {
  display:flex;
  align-items:center;
  gap:40px;
  padding-bottom:40px}
.footer-top>p {
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  line-height:1.2}
.back-top {
  margin-left:auto;
  font-size:12px}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--rule);
  padding-top:20px;
  font-size:10px;
  color:var(--dim)}
.footer-bottom>p {
  max-width:50ch}
.pill {
  position:fixed;
  right:22px;
  bottom:20px;
  z-index:40;
  display:flex;
  align-items:center;
  background:var(--ink);
  color:var(--paper);
  border:1px solid #f3efdf44;
  border-radius:99px;
  font-size:11px;
  box-shadow:0 3px 15px #0002}
.pill button,.pill a {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 13px;
  background:none;
  border-radius:99px}
.pill a {
  border-left:1px solid #f3efdf33}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#cad798}
.pill[data-on=false] .dot {
  background:#888}
.pill button:hover,.pill a:hover {
  color:#dcc890}
iframe[data-phasmatic] {
  transition:opacity .55s}
body[data-effect=off] iframe[data-phasmatic] {
  opacity:0}

@media(min-width:1600px) {
  .hero {
  padding-top:70px}
}

@media(max-width:1000px) {
  .masthead-note {
  display:none}
.hero {
  gap:0 6%}
h1 {
  font-size:clamp(54px,7.2vw,75px)}
.margin-note {
  font-size:16px;
  margin-top:24px}
.section-head {
  grid-template-columns:1fr 2fr}
.section-head>p:last-child {
  grid-column:2;
  max-width:40ch}
.field-notes {
  grid-template-columns:1fr 2fr}
.field-mark {
  display:none}
}

@media(max-width:680px) {
  .masthead {
  padding:20px 0}
.wordmark {
  font-size:45px}
.masthead nav {
  gap:20px;
  font-size:12px}
.ground {
  border-radius:28px 28px 0 0}
.masthead {
  position:static;
  transform:none}
.masthead,.lede,.plate,.plate img {
  filter:none;
  opacity:1}
.plate {
  left:0;
  right:0}
.hero {
  position:static;
  top:auto;
  overflow:visible;
  transform:none;
  min-height:0;
  padding-top:37px;
  padding-bottom:0}
.lede {
  max-width:none}
h1 {
  font-size:clamp(61px,12vw,80px)}
.intro {
  font-size:14px}
.margin-note {
  margin-top:24px}
/* Too narrow to sit copy beside the bottle — let the plinth follow the text. */
.plate {
  position:static;
  margin:36px calc(var(--gutter) * -1) 0}
.field-notes {
  padding:50px 0;
  grid-template-columns:1fr;
  gap:24px}
.field-notes h2 {
  font-size:44px}
.formula {
  padding-block:52px}
.section-head {
  grid-template-columns:1fr;
  gap:22px;
  margin-bottom:32px}
.section-head>p:last-child {
  grid-column:auto}
.ingredients {
  grid-template-columns:1fr}
.ingredient,.ingredient+.ingredient {
  padding:25px 75px 25px 0;
  border-left:0}
.ingredient h3 {
  margin:12px 0 8px;
  font-size:36px}
.ingredient p {
  min-height:0;
  font-size:13px;
  max-width:32ch}
.amount {
  position:absolute;
  right:0;
  top:50px;
  font-size:49px;
  margin:0}
.amount span {
  font-size:18px;
  padding-top:7px}
.formula-foot {
  flex-direction:column;
  gap:8px;
  margin-top:0}
.method {
  grid-template-columns:1fr;
  gap:34px;
  padding-block:52px}
.ritual-flower {
  display:none}
.method h2 {
  font-size:56px}
.method .eyebrow {
  margin-bottom:22px}
.footer-top {
  gap:24px;
  flex-wrap:wrap}
.back-top {
  margin-left:0;
  flex-basis:100%}
.footer-bottom {
  flex-direction:column;
  gap:12px}
.pill {
  right:14px;
  bottom:14px}
.steps li {
  padding:22px 0}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  transition:none!important}
}


/* BEGIN scroll atmosphere experiment. Overscan keeps blurred edges off screen. */
body > iframe[data-phasmatic="Dappled"] {
  top: -48px !important;
  left: -48px !important;
  width: calc(100% + 96px) !important;
  height: calc(100% + var(--sylva-travel, 240px) + 96px) !important;
  transform: translate3d(0, var(--sylva-drift, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body > iframe[data-phasmatic="Dappled"] {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none;
    will-change: auto;
  }
}
/* END scroll atmosphere experiment. */