/* ============================================================
   MALAVIKA'S ART STUDIO — art licensing portfolio
   Palette: gallery neutral. Warm paper, soft ink, hairline rules.
   The artwork supplies every colour on the page.
   ============================================================ */

:root{
  color-scheme: light;

  --paper:        #FCFBF8;
  --paper-2:      #F2ECDC;  /* deep enough that the .edge curve reads without a shadow */
  --paper-3:      #EFEBE1;

  --ink:          #1A1917;
  --ink-2:        rgba(26,25,23,.70);
  --ink-3:        rgba(26,25,23,.50);
  --ink-4:        rgba(26,25,23,.34);

  --rule:         rgba(26,25,23,.12);
  --rule-2:       rgba(26,25,23,.22);

  /* ---- bold palette, pulled from the collections themselves ----
     clay + marigold from Destination California and Pasta Love,
     olive from Pasta Love, violet from Bloom & Believe.          */
  --cream:        #FBF3E2;
  --banner-bg: #FFFFFF;     /* the home banner sits on plain white */
  --clay:         #BE4728;
  --clay-deep:    #8E3319;
  --marigold:     #EFA71B;
  --butter:       #FBD87F;  /* lighter marigold — for text on the clay band */
  --olive:        #3F5A2A;
  --violet:       #5C2FC0;
  --on-dark:      #FDF6E7;
  --on-dark-2:    rgba(253,246,231,.80);
  --on-dark-3:    rgba(253,246,231,.60);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* the curve used by the .edge divider (see bottom of file) */
  --edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0H1200V17C1181.0 15.4 1170.8 5.8 1086.3 7.4C1001.7 9.1 819.7 26.9 692.6 26.8C565.5 26.7 438.9 8.5 323.5 6.8C208.1 5.2 53.9 15.3 0.0 17.0L0 17Z'/%3E%3C/svg%3E");

  --pad:   clamp(1.25rem, 5vw, 4rem);
  --max:   1220px;
  --gap:   clamp(1rem, 2.2vw, 1.75rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block; height:auto}
a{color:inherit}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* Fraunces is variable: SOFT rounds the terminals, WONK swaps in the
   whimsical italic-ish forms, opsz is the optical size — large for
   display sizes, smaller for the wordmark and the step numerals. */
h1,h2{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96;
  color:var(--clay);
  margin:0;
  line-height:1.06;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h3{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 36;
  margin:0;
  line-height:1.16;
  letter-spacing:-.005em;
}

/* keep the sticky nav from covering whatever an anchor link jumps to */
section[id], header[id]{scroll-margin-top:84px}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.narrow{max-width:66ch; margin-inline:auto}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; z-index:200; font-size:.85rem;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ---------- small caps label ---------- */
.label{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 1.1rem;
  display:block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);   /* uppercase UI stays in the sans */
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.92rem 1.75rem;
  border:2px solid var(--ink);
  border-radius:100px;
  background:none;
  color:var(--ink);
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  line-height:1.3;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn-solid{background:var(--ink); color:var(--paper)}
.btn-solid:hover{background:var(--clay); border-color:var(--clay); color:var(--on-dark)}

/* a filled marigold button, for use on dark bands */
.btn-accent{
  background:var(--marigold);
  border-color:var(--marigold);
  color:#2A1B06;
}
.btn-accent:hover{background:var(--on-dark); border-color:var(--on-dark); color:var(--ink)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(252,251,248,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav .wrap{
  display:flex; align-items:center; gap:1.5rem;
  min-height:72px;
}
.wordmark{
  font-family:var(--display);
  font-size:1.18rem;
  font-weight:600;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 24;
  text-transform:uppercase;
  letter-spacing:.015em;
  text-decoration:none;
  margin-right:auto;
  white-space:nowrap;
}
.navlinks{display:flex; align-items:center; gap:1.9rem}
.navlinks a:not(.btn){
  text-decoration:none;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.navlinks a:not(.btn):hover{color:var(--ink); border-bottom-color:var(--ink)}
.navlinks .btn{padding:.72rem 1.25rem}
@media (max-width:900px){
  .navlinks a:not(.btn){display:none}
}
@media (max-width:560px){
  .nav .wrap{gap:.75rem; min-height:62px}
  .wordmark{
    font-size:.86rem;
    white-space:normal;
    line-height:1.15;
    max-width:13ch;
  }
  .navlinks .btn{padding:.6rem 1rem; font-size:.7rem}
}

/* ---------- hero ----------
   A flat cream band. The watercolour florals run at full size off
   the right edge, cropped top and bottom by the band, and cross
   behind the type — the text layer sits above them. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(3rem,7vw,5.5rem);
  background:var(--banner-bg);
}
.hero .wrap{position:relative; z-index:1}
.hero-text{max-width:min(46ch,56%)}
.hero-art{
  position:absolute;
  z-index:0;
  top:50%;
  right:clamp(-6rem,-4vw,0rem);
  transform:translateY(-50%);
  width:clamp(460px,66vw,1000px);
  margin:0;
  pointer-events:none;
}
.hero-art img{
  width:100%;
  height:auto;
  /* soften only the far-left sliver, where the copy runs over it */
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 9%,#000 20%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 9%,#000 20%);
}
@media (max-width:860px){
  /* stacked: the florals drop below the copy at full width.
     column-reverse puts the copy first, since the figure comes
     first in the markup so it can sit behind the type on desktop. */
  .hero{
    display:flex;
    flex-direction:column-reverse;
    overflow:visible;
    padding-bottom:0;
  }
  .hero-text{max-width:none}
  .hero-art{
    position:static;
    transform:none;
    width:auto;
    margin-top:clamp(1.25rem,4vw,2rem);
  }
  .hero-art img{
    height:clamp(220px,52vw,340px);
    width:auto;
    margin-inline:auto;
    -webkit-mask-image:none;
    mask-image:none;
  }
}
.hero h1{
  color:var(--clay-deep);
  font-size:clamp(2.2rem,5.4vw,4.2rem);
  max-width:16ch;
  line-height:1.04;
}
.hero h1 em{font-style:italic; color:var(--clay)}
.hero .lede{
  margin-top:1.4rem;
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--ink-2);
  max-width:46ch;
}
@media (max-width:820px){
  .hero h1{max-width:none}
}
.hero .actions{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:2.4rem;
}

/* hero strip — one single print from each collection */
.strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  margin-top:clamp(2.75rem,6vw,4.5rem);
}
.strip a{
  display:block;
  text-decoration:none;
  background:#fff;
  border:0;
  padding:clamp(.9rem,2vw,1.6rem);
}
.strip img{
  aspect-ratio:1/1;
  object-fit:contain;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.strip a:hover img{transform:scale(1.03)}
.strip .cap{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:clamp(.7rem,1.5vw,1rem);
}
@media (max-width:640px){
  .strip{grid-template-columns:1fr; gap:1rem}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(3.5rem,8vw,6.5rem)}
.sec-alt{background:var(--paper-2); border-block:1px solid var(--rule)}
.sec-head{text-align:center; max-width:64ch; margin:0 auto clamp(2.5rem,5vw,3.75rem)}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.sec-head p{margin-top:1.2rem; color:var(--ink-2)}
.sec-head .note{
  margin-top:1.4rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- the one title that opens the run of collections ---------- */
.coll-title{
  padding-block:clamp(3rem,7vw,5.5rem) 0;
  text-align:center;
}
/* clearly bigger than the collection names it sits over */
.coll-title h2{font-size:clamp(2.8rem,6.5vw,4.8rem)}
/* the first collection tucks straight under the title, no dividing rule */
.coll-title + .coll{
  border-top:0;
  padding-top:clamp(2.5rem,5vw,4rem);
}

/* ---------- collections grid (home) ----------
   Four big square cards, 2×2. Each card holds a 2×2 preview of the
   collection and links through to that collection's own page.      */
.coll-grid-sec{padding-block:clamp(2.5rem,5vw,4rem) clamp(3.5rem,8vw,6rem)}
.coll-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);
}
.coll-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--rule);
  padding:clamp(.75rem,1.6vw,1.25rem);
  transition:border-color .2s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.coll-card .quad{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(.4rem,.9vw,.7rem);
  aspect-ratio:1/1;
}
.coll-card .quad > *{
  width:100%; height:100%;
  min-height:0;
  object-fit:cover;
  background:var(--paper-3);
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.coll-card-meta{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:.2rem 1rem;
  padding:clamp(1rem,2vw,1.4rem) .2rem .2rem;
}
.coll-card-meta .label{grid-column:1 / -1; margin:0}
.coll-card-meta h3{
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  color:var(--clay);
}
/* each card's name takes a colour from its own collection */
.coll-dest .coll-card-meta h3{color:var(--olive)}
.coll-bloom .coll-card-meta h3{color:var(--violet)}
.coll-card-meta .view{
  font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
  padding-bottom:.3rem;
  transition:color .2s ease;
}
a.coll-card:hover{
  border-color:var(--rule-2);
  box-shadow:0 22px 50px -30px rgba(26,25,23,.35);
  transform:translateY(-3px);
}
a.coll-card:hover .quad > *{transform:scale(1.02)}
a.coll-card:hover .view{color:var(--ink)}
.coll-card.is-soon{background:transparent; border-style:dashed; border-color:var(--rule-2)}
.coll-card.is-soon .quad > *{background:var(--paper-2); display:block}
.coll-card.is-soon h3{color:var(--ink-4)}
@media (max-width:700px){
  .coll-grid{grid-template-columns:1fr}
  .coll-card-meta{grid-template-columns:1fr}
}

/* ---------- a single collection page ---------- */
.backlink{
  display:inline-block;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  text-decoration:none;
}
.backlink:hover{color:var(--ink)}
.coll.coll-page{border-top:0; padding-top:clamp(1.5rem,3vw,2.5rem)}
.coll-page .coll-head h2{font-size:clamp(2.6rem,6vw,4.4rem)}
.coll-pager{border-top:1px solid var(--rule); padding-block:clamp(2rem,4vw,3rem)}
.coll-pager .wrap{display:flex; justify-content:space-between; gap:1.5rem}
.coll-pager a{
  text-decoration:none;
  font-family:var(--display); font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 36;
  font-size:clamp(1.1rem,2vw,1.45rem);
  color:var(--clay);
}
.coll-pager a .label{margin-bottom:.35rem}
.coll-pager .next{text-align:right}
.coll-pager a:hover{color:var(--clay-deep)}

/* ---------- a collection, laid out in full ---------- */
.coll{padding-block:clamp(3.5rem,8vw,6rem); border-top:1px solid var(--rule)}
.coll-head{
  text-align:center;
  margin:0 auto clamp(2.25rem,4.5vw,3.25rem);
}
.coll-head h2{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.coll-head .blurb{
  margin:1.2rem auto 0;
  max-width:62ch;
  color:var(--ink-2);
}

/* compact spec line under the collection title */
.specs{
  margin:1.6rem 0 0;
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 0;
  font-size:.82rem;
}
.specs div{display:flex; align-items:baseline; gap:.5rem; padding-inline:1.15rem}
.specs div + div{border-left:1px solid var(--rule-2)}
.specs dt{
  font-size:.64rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4);
}
.specs dd{margin:0; color:var(--ink-2)}
@media (max-width:700px){
  .specs{flex-direction:column; align-items:center; gap:.4rem}
  .specs div + div{border-left:0}
}

/* group heading above each run of artwork */
.grouphead{
  font-family:var(--sans);
  font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:1.1rem;
  margin:clamp(2.25rem,4.5vw,3.25rem) 0 1.4rem;
}
.grouphead::after{content:""; flex:1; height:1px; background:var(--rule)}

/* the artwork grids — everything visible, nothing to click through */
.art{display:grid; gap:var(--gap)}
.art.prints{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.art.reps{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.art.mock{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.art figure{margin:0}
.art button.shot{
  display:block; width:100%; padding:0;
  border:0;
  background:#fff;
  cursor:zoom-in;
  overflow:hidden;
  position:relative;
}
.art img{
  aspect-ratio:1/1;
  width:100%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.art.prints img{object-fit:contain}
.art.reps img,
.art.mock img{object-fit:cover}
.art.mock img{aspect-ratio:4/3}
.art button.shot:hover img{transform:scale(1.03)}
.art figcaption{
  font-size:.76rem;
  color:var(--ink-3);
  margin-top:.55rem;
  letter-spacing:.015em;
  line-height:1.45;
}
@media (max-width:520px){
  .art.prints{grid-template-columns:1fr 1fr}
  .art.reps,.art.mock{grid-template-columns:1fr}
}
.coll .cta{margin-top:clamp(2.25rem,4.5vw,3rem); text-align:center}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,19,17,.93);
  display:none;
  align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.lightbox[open],
.lightbox.is-open{display:flex}
.lightbox img{
  max-width:100%; max-height:88vh;
  object-fit:contain;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.lightbox .close{
  position:absolute; top:1rem; right:1.25rem;
  background:none; border:1px solid rgba(252,251,248,.45);
  color:#FCFBF8; font:inherit;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1rem; cursor:pointer;
}
.lightbox .close:hover{background:rgba(252,251,248,.12)}
.lightbox .cap{
  position:absolute; bottom:1.1rem; left:0; right:0;
  text-align:center; color:rgba(252,251,248,.7);
  font-size:.76rem; padding-inline:2rem;
}

/* ---------- what the artwork goes on ----------
   Real mockups rather than a list of words — an art director can see
   the artwork on product in one glance.                             */
.applications{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.1rem,2.4vw,2rem) var(--gap);
}
.applications figure{margin:0}
.applications img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#fff;
}
.applications figcaption{
  margin-top:.85rem;
  font-family:var(--display);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-align:center;
}
.also{
  margin:clamp(2.25rem,4.5vw,3rem) auto 0;
  max-width:58ch;
  text-align:center;
  color:var(--ink-2);
  font-size:.96rem;
}
#licensing .cta{margin-top:1.75rem; text-align:center}
@media (max-width:560px){
  .applications{grid-template-columns:1fr 1fr; gap:1rem .75rem}
  .applications figcaption{font-size:.6rem; letter-spacing:.12em; margin-top:.6rem}
}

/* ---------- terms / process ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
.step .num{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  font-size:2.6rem;
  color:var(--clay);
  line-height:1;
  display:block;
  margin-bottom:.7rem;
}
.step h3{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:.6rem;
}
.step p{font-size:.92rem; color:var(--ink-2)}

/* ---------- about ---------- */
.about{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about h2{font-size:clamp(2rem,4vw,2.9rem); margin-bottom:1.3rem}
.about p{color:var(--ink-2)}
/* The portrait is cut to a wobbly, hand-drawn shape, with a loose
   clay pencil line of the same shape sitting slightly off-register
   behind it — like a sketch outline that didn't quite line up. */
.portrait{
  --wobble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath d='M30 22C90 6 150 18 205 10C265 2 330 14 372 20C396 40 386 110 392 170C398 240 384 310 391 380C396 440 392 478 366 486C300 496 240 482 180 490C120 497 60 486 28 482C6 460 14 400 9 330C4 260 16 190 8 120C4 70 10 36 30 22Z'/%3E%3C/svg%3E");
  position:relative;
  isolation:isolate;
  margin:0;
  border:0;
}
.portrait::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  transform:translate(12px,14px) rotate(1.2deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cpath d='M26 26C84 10 152 22 210 12C270 4 328 10 370 24C392 46 384 112 390 176C394 244 386 312 388 378C392 438 390 474 362 482C298 494 236 486 176 492C118 496 58 490 30 478C10 456 16 398 12 326C8 258 18 188 12 118C8 72 8 40 26 26Z' fill='none' stroke='%23BE4728' stroke-width='2.2' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events:none;
}
.portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 28%;
  background:var(--paper-3);
  -webkit-mask:var(--wobble) center / 100% 100% no-repeat;
          mask:var(--wobble) center / 100% 100% no-repeat;
}
@media (max-width:820px){
  .about{grid-template-columns:1fr}
  .portrait{max-width:300px}
}

/* ---------- enquiry form ---------- */
.enq-head{text-align:center; max-width:60ch; margin:0 auto clamp(2.5rem,5vw,3.5rem)}
.enq-head h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.enq-head p{margin-top:1.2rem; color:var(--ink-2)}

form{max-width:760px; margin-inline:auto; display:grid; gap:1.35rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1.35rem}
.field label,
fieldset legend{
  display:block;
  font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.55rem;
  padding:0;
}
.hint{
  font-size:.82rem;
  color:var(--ink-3);
  margin:-.25rem 0 .55rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
}
input, select, textarea{
  width:100%;
  font:inherit; font-size:.95rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule-2);
  border-radius:0;
  padding:.8rem .85rem;
  transition:border-color .18s ease;
}
.sec-alt input, .sec-alt select, .sec-alt textarea{background:#fff}
input:hover, select:hover, textarea:hover{border-color:var(--ink-3)}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(26,25,23,.09);
}
textarea{min-height:150px; resize:vertical; line-height:1.6}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
    linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 54%, calc(100% - 14px) 54%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.6rem;
}
fieldset{border:0; padding:0; margin:0}
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.5rem .9rem}
.checks label{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; font-weight:400;
  letter-spacing:0; text-transform:none;
  color:var(--ink-2);
  margin:0; cursor:pointer;
}
.checks input{width:auto; padding:0; accent-color:var(--ink)}
.formfoot{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:.4rem}
.formnote{font-size:.8rem; color:var(--ink-3); margin:0; flex:1 1 16rem}
@media (max-width:640px){ .row{grid-template-columns:1fr} }

/* ---------- footer ---------- */
footer{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.foot{
  display:flex; flex-wrap:wrap;
  gap:1.75rem 3rem;
  justify-content:space-between;
  align-items:flex-start;
}
.foot h3{
  font-family:var(--sans);
  font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.7rem;
}
.foot p, .foot a{font-size:.9rem; color:var(--ink-2); margin:0; line-height:1.9}
.foot a{text-decoration:none; border-bottom:1px solid var(--rule-2)}
.foot a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.foot .col{display:flex; flex-direction:column; align-items:flex-start}
.legal{
  margin-top:2.5rem; padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-size:.76rem; color:var(--ink-4);
}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0; transform:translateY(16px)}
  .rise.in{
    opacity:1; transform:none;
    transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
  }
}

@media print{
  .nav, .lightbox, form, .hero .actions{display:none}
  body{background:#fff}
}

/* ---------- soft edge divider ----------------------------------
   A smooth, uneven edge — swells of different width and depth, like
   the edge of a watercolour wash where it pooled unevenly. Not a
   scallop: nothing here repeats on a fixed beat.

   One curve stretched across the full width, so there is never a
   visible tile seam. The curve reads purely as a change of colour —
   no line, no shadow — so the two band colours have to differ enough
   to see.

   Usage: <div class="edge from-paper to-cream" aria-hidden="true">
   ---------------------------------------------------------------- */
.edge{
  --edge-from:var(--paper);
  --edge-to:var(--cream);
  position:relative;
  height:clamp(18px,2.2vw,30px);
  background:var(--edge-to);
  pointer-events:none;
}
.edge::before{
  content:"";
  position:absolute; inset:0;
  background:var(--edge-from);
  -webkit-mask-image:var(--edge-shape);  mask-image:var(--edge-shape);
  -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;           mask-size:100% 100%;
}

/* which colour is above, which below */
.edge.from-paper {--edge-from:var(--paper)}
.edge.from-paper2{--edge-from:var(--paper-2)}
.edge.from-cream {--edge-from:var(--cream)}
.edge.from-clay  {--edge-from:var(--clay)}
.edge.from-olive {--edge-from:var(--olive)}
.edge.from-ink   {--edge-from:#1C1815}
.edge.to-paper   {--edge-to:var(--paper)}
.edge.to-paper2  {--edge-to:var(--paper-2)}
.edge.to-cream   {--edge-to:var(--cream)}
.edge.to-clay    {--edge-to:var(--clay)}
.edge.to-olive   {--edge-to:var(--olive)}
.edge.to-ink     {--edge-to:#1C1815}

/* a curved edge replaces the hairline it sits on */
.edge + .sec-alt, .edge + .band-cream, .edge + .coll, .edge + footer{border-top:0}
.sec-alt:has(+ .edge), .band-cream:has(+ .edge), .coll:has(+ .edge){border-bottom:0}