/* Plum & Petal — studio.css
   Design language: they moved into the back half of a hardware store and didn't
   renovate. Pegboard, tile, ledger rules, mono for anything checkable, serif for
   anything human. Facts are set in mono so they read as facts.
   The tulip keeps its own stylesheet (tulip-v23.css) and is untouched. */

:root{
  --paper:#f7f3ec;        /* warm off-white, not white */
  --paper-2:#efe8dd;
  --ink:#231f1c;
  --ink-2:#5c534b;
  --rule:#d5cabb;
  --plum:#79566f;         /* the one inherited brand colour */
  --plum-deep:#4a3243;
  --clay:#b5643f;         /* order deadlines, anything time-sensitive */
  --leaf:#5e6b4f;         /* in-season */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.04}
h2{font-size:clamp(1.55rem,2.7vw,2.15rem);line-height:1.12}
h3{font-size:1.12rem;line-height:1.25}
p{margin:0}
.lede{font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.36rem);line-height:1.5;color:var(--ink)}
/* mono label: used for anything the reader could check or verify */
.label{font:400 .7rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.label--plum{color:var(--plum)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead-inner{max-width:1140px;margin-inline:auto;padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;justify-content:space-between}
.wordmark{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.wordmark b{font:600 1.24rem/1 var(--serif);letter-spacing:-.02em}
.wordmark span{font:400 .66rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.masthead nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.masthead nav a{font:400 .8rem/1 var(--mono);letter-spacing:.06em;text-decoration:none;color:var(--ink-2);padding:8px 0;border-bottom:1px solid transparent}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--plum)}
.masthead nav a[aria-current="page"]{color:var(--plum);border-bottom-color:var(--plum)}

/* ---------- status strip: the live order cutoff ---------- */
.status{background:var(--ink);color:var(--paper)}
.status-inner{max-width:1140px;margin-inline:auto;padding:11px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font:400 .82rem/1.45 var(--mono)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);flex:none}
.status[data-past="true"] .dot{background:var(--clay)}
.status b{font-weight:400;color:#fff}
.status .verdict{color:#c9bfae}

/* ---------- hero: no 50/50 split ---------- */
.hero{padding-block:52px 40px;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);gap:28px 56px;align-items:start}
.hero h1 em{font-style:italic;color:var(--plum)}
.hero-body{margin-top:20px;display:grid;gap:14px;max-width:56ch}
.hero-body p{color:var(--ink-2)}
.hero-body p:first-child{color:var(--ink);font-size:1.12rem}
/* the facts panel: a spec sheet, not a card */
.spec{border-top:2px solid var(--ink);padding-top:14px}
.spec dl{margin:0;display:grid;gap:0}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule)}
.spec dt{font:400 .74rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.spec dd{margin:0;font:400 .84rem/1.5 var(--mono);text-align:right;color:var(--ink)}
.spec dd.hot{color:var(--clay)}

/* ---------- generic section ---------- */
.band{padding-block:52px;border-bottom:1px solid var(--rule)}
.band--tint{background:var(--paper-2)}
.band-head{display:grid;gap:10px;margin-bottom:26px;max-width:62ch}
.band-head p{color:var(--ink-2)}

/* ---------- the tulip keeps its wrapper ---------- */
.bloom{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:30px 54px;align-items:center}
.bloom-copy{display:grid;gap:15px;max-width:54ch}
.bloom-copy p{color:var(--ink-2)}
.bloom-copy p.first{color:var(--ink);font-family:var(--serif);font-size:1.2rem;line-height:1.5}

/* ---------- price ledger ---------- */
.ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ledger caption{text-align:left;font:400 .7rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-bottom:10px}
.ledger th{text-align:left;font:400 .7rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:0 0 9px;border-bottom:2px solid var(--ink)}
.ledger th:last-child{text-align:right}
.ledger td{padding:13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger td:last-child{text-align:right;font:400 1rem/1.4 var(--mono);white-space:nowrap}
.ledger .item{font-family:var(--serif);font-size:1.06rem;font-weight:600}
.ledger .note{display:block;font-size:.9rem;color:var(--ink-2);margin-top:3px;max-width:44ch}

/* ---------- the rules / constraints ---------- */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.rule-cell{background:var(--paper);padding:20px 22px;display:grid;gap:7px;align-content:start}
.band--tint .rule-cell{background:var(--paper-2)}
.rule-cell b{font:400 1.7rem/1 var(--mono);color:var(--plum);letter-spacing:-.02em}
.rule-cell p{font-size:.95rem;color:var(--ink-2)}
.rule-cell h3{font-size:1rem}

/* ---------- in season ---------- */
.season{display:flex;flex-wrap:wrap;gap:9px}
.season li{list-style:none;font:400 .82rem/1 var(--mono);letter-spacing:.04em;padding:9px 13px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);color:var(--ink)}
.band--tint .season li{background:var(--paper-2)}
.season li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-right:8px;vertical-align:1px}
.season-note{margin-top:16px;font-size:.95rem;color:var(--ink-2);max-width:60ch}

/* ---------- things we don't do ---------- */
.nope{display:grid;gap:0;border-top:2px solid var(--ink)}
.nope li{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:17px 0;border-bottom:1px solid var(--rule);align-items:start}
.nope .x{font:400 1rem/1.5 var(--mono);color:var(--clay)}
.nope h3{margin-bottom:4px}
.nope p{color:var(--ink-2);font-size:.98rem;max-width:62ch}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.person{display:grid;gap:11px;align-content:start}
.person .label{margin-bottom:-4px}
.person p{color:var(--ink-2);font-size:.99rem}
.person img{border-radius:2px;filter:grayscale(.15)}

/* ---------- call to action ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:2px;text-decoration:none;
  font:400 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ink);transition:background .14s,color .14s}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--plum-deep);border-color:var(--plum-deep)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#d9d0c4;padding-block:40px 26px;font-size:.95rem}
.foot-inner{max-width:1140px;margin-inline:auto;padding-inline:24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.foot h2{color:var(--paper);font-size:1.3rem;margin-bottom:9px}
.foot p{color:#b6aca0;max-width:40ch}
.foot .label{color:var(--plum);opacity:.95;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot a{color:#d9d0c4;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.foot address{font-style:normal;font-family:var(--mono);font-size:.82rem;line-height:1.7;color:#b6aca0}
.foot-legal{max-width:1140px;margin:26px auto 0;padding:15px 24px 0;border-top:1px solid #3a342e;font:400 .72rem/1.6 var(--mono);color:#8e857a}

@media(max-width:900px){
  .hero-grid,.bloom,.people,.foot-inner{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .bloom{gap:26px}
}
@media(max-width:560px){
  .ledger td:last-child{font-size:.92rem}
  .masthead nav{gap:4px 16px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- work grid: every picture carries a caption with facts in it ---------- */
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px}
.work figure{margin:0;display:grid;gap:10px;align-content:start}
.work img{border-radius:2px;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.work figcaption{display:grid;gap:5px}
.work .meta{font:400 .7rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.work p{font-size:.95rem;color:var(--ink-2);max-width:40ch}
.work .tall img{aspect-ratio:2/3}
@media(max-width:900px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.work{grid-template-columns:1fr}}

/* ---------- order form ---------- */
.order{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:30px 54px;align-items:start}
.form{display:grid;gap:18px}
.field{display:grid;gap:6px}
.field > span{font:400 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--rule);border-radius:2px;background:#fff;color:var(--ink);font:1rem/1.45 var(--sans)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 1px var(--plum)}
.field .hint{font-size:.85rem;color:var(--ink-2)}
.field .hint b{color:var(--clay);font-weight:400}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.form-note{font-size:.9rem;color:var(--ink-2);max-width:48ch}
button.btn{cursor:pointer;font-family:var(--mono)}