/* Verbena & Vine — Field Journal
   Scene: a botanical field journal left open on a potting bench. Warm paper
   with a grain over everything, ink-drawn specimens, and one coral pencil that
   marks the things worth marking. Structure comes from herbarium sheets:
   a plate, a Latin name, a hand-lettered note. */

:root{
  --paper:#F4EFE2;
  --sheet:#FBF8F0;
  --wash:#E7EADD;
  --ink:#1F3326;
  --ink-2:rgba(31,51,38,.74);
  --ink-3:rgba(31,51,38,.5);
  --coral:#E4572E;
  --sage:#6B7A6A;

  --display:'Fraunces',Georgia,serif;
  --body:'Nunito Sans',system-ui,sans-serif;
  --page:1180px;
  --pad:clamp(20px,5vw,68px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img{ max-width:100%; height:auto; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.62;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* paper grain over the whole page — the thing that stops it looking printed by a laser */
body::after{
  content:''; position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.19; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

h1,h2,h3{
  font-family:var(--display); margin:0; font-weight:700;
  font-variation-settings:'SOFT' 50,'WONK' 1;
  line-height:1.04; letter-spacing:-.022em;
}
a{ color:inherit; }
:focus-visible{ outline:2.5px solid var(--coral); outline-offset:3px; }

/* hand-lettered label — italic, coral, the pencil note in the margin */
.hand{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:15px; letter-spacing:.01em; color:var(--coral); margin:0 0 16px;
}

.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--ink); color:var(--paper); border:2px solid var(--ink);
  border-radius:40px 40px 38px 42px;      /* never quite a perfect pill — drawn, not generated */
  padding:12px 26px;
  font-family:var(--body); font-weight:700; font-size:15px;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px) rotate(-.6deg); background:var(--coral); border-color:var(--coral); }
.btn-lg{ padding:15px 32px; font-size:16.5px; }
.btn-line{ background:transparent; color:var(--ink); }

/* ---- nav */
.nav{ max-width:var(--page); margin:0 auto; padding:20px var(--pad); display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.mark{ width:26px; height:26px; }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-size:15px; font-weight:600; text-decoration:none; color:var(--ink-2); }
.links a:hover{ color:var(--coral); }
@media (max-width:860px){ .links{ display:none; } .nav .btn{ margin-left:auto; } }

/* ---- hero: a journal spread — text on the left leaf, plate on the right */
.hero{
  max-width:var(--page); margin:0 auto;
  padding:clamp(30px,4.5vw,64px) var(--pad) clamp(48px,6vw,84px);
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,4.5vw,64px); align-items:center;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(38px,5.6vw,74px); margin-bottom:24px; }

/* circled word — drawn with a border-radius that doesn't match on any corner */
.circled{
  position:relative; display:inline-block; padding:0 .12em;
  font-style:italic; color:var(--coral);
}
.circled::after{
  content:''; position:absolute; inset:-14% -9% -12% -9%;
  border:3px solid var(--coral); border-radius:47% 53% 44% 56% / 58% 42% 56% 44%;
  transform:rotate(-2.4deg); opacity:.85; pointer-events:none;
}

.hero .lede{ font-size:clamp(17px,1.45vw,20px); color:var(--ink-2); max-width:44ch; margin:0 0 30px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.squiggle{ display:block; width:min(300px,80%); height:auto; margin-top:34px; opacity:.85; }

.plate{ margin:0; }
.plate img{ width:100%; aspect-ratio:9/11; object-fit:cover; display:block; border-radius:4px; box-shadow:0 18px 42px rgba(31,51,38,.14); }
.plate figcaption{
  margin-top:14px; font-family:var(--display); font-style:italic;
  font-size:14.5px; color:var(--sage); text-align:center;
}

/* ---- sections */
.section{ max-width:var(--page); margin:0 auto; padding:clamp(50px,6.5vw,96px) var(--pad); }
.section--wash{ max-width:none; background:var(--wash); }
.section--wash > *{ max-width:var(--page); margin-inline:auto; }
.head{ max-width:52ch; margin-bottom:clamp(30px,4vw,50px); }
.head h2{ font-size:clamp(30px,4vw,52px); }
.head .sub{ color:var(--ink-2); margin:16px 0 0; }

/* ---- specimen sheets */
.specimens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.spec{
  background:var(--sheet); border:1px solid rgba(31,51,38,.16); border-radius:3px;
  padding:20px 22px 26px;
  transition:transform .2s ease;
}
.spec:hover{ transform:translateY(-4px) rotate(-.5deg); }
.spec-art{ background:var(--paper); border-radius:2px; padding:12px; margin-bottom:18px; }
.spec-art svg{ width:100%; height:auto; display:block; }
.spec h3{ font-size:22px; margin-bottom:3px; }
.latin{
  font-family:var(--display); font-style:italic; font-size:14.5px;
  color:var(--sage); margin:0 0 12px;
}
.spec p{ margin:0 0 14px; color:var(--ink-2); font-size:15.5px; }
.tag{
  margin:0 !important; padding-top:12px; border-top:1px dashed rgba(31,51,38,.28);
  font-weight:700; font-size:13.5px !important; color:var(--coral) !important;
}

/* ---- workshops */
.shops{ list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.shops li{
  background:var(--sheet); padding:24px clamp(20px,2.4vw,30px);
  display:grid; grid-template-columns:110px 1fr; gap:8px 26px; align-items:baseline;
}
@media (max-width:640px){ .shops li{ grid-template-columns:1fr; } }
.date{
  font-family:var(--display); font-style:italic; font-weight:700;
  font-size:17px; color:var(--coral); margin:0;
}
.shops h3{ font-size:21px; }
.shops p:last-child{ margin:0; color:var(--ink-2); font-size:15.5px; grid-column:2; }
@media (max-width:640px){ .shops p:last-child{ grid-column:1; } }

/* ---- visit */
.visit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:start; }
@media (max-width:860px){ .visit{ grid-template-columns:1fr; } }
.visit h2{ font-size:clamp(28px,3.6vw,46px); margin-bottom:28px; }
.info{ display:grid; grid-template-columns:auto 1fr; gap:16px 28px; margin:0; }
.info dt{ font-family:var(--display); font-style:italic; font-weight:600; font-size:15px; color:var(--coral); padding-top:2px; }
.info dd{ margin:0; color:var(--ink-2); }

.note-card{
  background:var(--sheet); border:1px solid rgba(31,51,38,.16);
  border-radius:3px; padding:clamp(24px,3vw,38px);
  transform:rotate(.7deg);
  box-shadow:0 14px 34px rgba(31,51,38,.12);
}
.note-card p{ margin:0 0 16px; color:var(--ink-2); }
.sign{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink) !important; margin:0 !important; }

/* ---- footer */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(40px,5vw,70px) var(--pad); border-top:1px solid rgba(31,51,38,.18); color:var(--ink-2); font-size:15.5px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-family:var(--display); font-weight:700; font-size:27px; letter-spacing:-.02em; color:var(--ink); }
.fine{ margin-top:20px; font-size:12.5px; color:var(--ink-3); line-height:1.7; max-width:64ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:101;
  display:flex; flex-direction:column; gap:1px;
  background:var(--coral); color:#fff;
  padding:11px 18px; border-radius:34px 34px 32px 36px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
  box-shadow:0 8px 22px rgba(228,87,46,.36);
}
.demo-tag span{ opacity:.8; text-transform:uppercase; font-size:9.5px; letter-spacing:.12em; }
.demo-tag strong{ font-weight:700; font-size:12px; }
.demo-tag:hover{ background:var(--ink); }


/* ---- photographed specimens sit in the same paper frame as the drawn ones */
.spec-art--photo{ padding:0; overflow:hidden; border-radius:2px; }
.spec-art--photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }