/* Hilary Edwards — the concept picker.

   She has no brand, so the picker borrows concept 1's palette as the calmest
   neutral of the three rather than inventing a fourth look. The "worth knowing"
   block at the top is the lead item on purpose: for a lead with no website, the
   honest admission of what was NOT there reframes the call from "here are some
   designs" into "here is everything that has to be decided", which is both the
   truthful position and the better one. */

:root{
  --ink:#12383A;
  --ink-soft:#4A6365;
  --oat:#F2ECE1;
  --paper:#FBF7F0;
  --tint:#E8E0D2;
  --clay:#A9553B;
  --clay-deep:#8A422C;
  --sage-txt:#3F6151;
  --line:rgba(18,56,58,.16);
  --line-soft:rgba(18,56,58,.09);
  --accent:#A9553B;
  --r:6px;
  --wrapw:1180px;
  --hd:74px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--oat); color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.66; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--clay-deep)}
h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:500; line-height:1.1; margin:0 0 .5em; letter-spacing:-.012em}
h1{font-size:clamp(36px,5.6vw,62px); font-weight:400}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(20px,2.2vw,25px); font-weight:600; letter-spacing:0}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,var(--wrapw)); margin-inline:auto}
section[id]{scroll-margin-top:calc(var(--hd) + 12px)}

.eyebrow{font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--sage-txt); margin:0 0 14px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 26px; border-radius:var(--r); border:1px solid transparent;
  font-size:16px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.btn-pri{background:var(--clay); color:#fff}
.btn-pri:hover{background:var(--clay-deep)}

/* ---------------------------------------------------------------- header */
.hd{position:sticky; top:0; z-index:60; background:rgba(242,236,225,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.hd-in{display:flex; align-items:center; gap:22px; min-height:var(--hd); flex-wrap:wrap}
.brand{display:flex; align-items:center; min-height:44px; flex:0 0 auto}
.brand img{height:36px; width:auto}
.nav{display:flex; gap:24px; margin-left:auto; flex-wrap:wrap}
.nav a{color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; padding:13px 0; border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--clay)}

/* ---------------------------------------------------------------- top */
.top{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,34px)}
.lede{font-size:clamp(17px,1.8vw,20px); color:var(--ink-soft); max-width:62ch}

/* ---------------------------------------------------------------- the note */
.note{padding:clamp(26px,4vw,44px) 0}
.note .wrap{background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--clay); border-radius:var(--r); padding:clamp(24px,3.4vw,38px)}
.note h2{font-size:clamp(23px,2.8vw,30px); margin-bottom:.6em}
.notes{list-style:none; counter-reset:n; margin:0; padding:0; display:grid; gap:22px}
.notes li{counter-increment:n; display:grid; grid-template-columns:44px 1fr; gap:2px 16px; align-items:start}
/* the counter, the heading and the paragraph are three grid items, so without
   explicit placement the paragraph wraps back into the 44px counter column */
.notes li::before{
  content:counter(n,decimal-leading-zero);
  grid-column:1; grid-row:1 / span 2;
  font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600; color:var(--clay-deep);
}
.notes h3{grid-column:2; grid-row:1}
.notes li > p{grid-column:2; grid-row:2}
.notes h3{font-size:19px; margin:0 0 4px; font-weight:600}
.notes p{margin:0; color:var(--ink-soft); font-size:15.5px}
.notes b{color:var(--ink)}

/* ---------------------------------------------------------------- concepts */
.sec{padding:clamp(44px,6vw,84px) 0}
.cat{margin-bottom:.2em}
.cat-sub{color:var(--ink-soft); max-width:62ch; margin-bottom:clamp(24px,3vw,38px)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
}
.shot{display:block; border-bottom:1px solid var(--line); background:var(--tint)}
.shot img{width:100%; aspect-ratio:1200/630; object-fit:cover}
.card-b{padding:24px; display:flex; flex-direction:column; flex:1 1 auto; gap:2px}
.k{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-txt); margin:0 0 6px}
.card-b h3{margin:0 0 10px}
.card-b > p{color:var(--ink-soft); font-size:15.5px; margin:0 0 16px}
.specs{list-style:none; margin:0 0 20px; padding:0; border-top:1px solid var(--line-soft); display:grid}
.specs li{display:grid; grid-template-columns:90px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); align-items:baseline}
.specs b{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-txt)}
.specs span{font-size:14.5px; color:var(--ink-soft)}
.card-b .btn{margin-top:auto; width:100%}
.allthree{margin-top:26px; color:var(--ink-soft); font-size:15.5px; max-width:70ch}

/* ---------------------------------------------------------------- footer */
.ft{background:var(--ink); color:#CBD8D4; padding:clamp(34px,5vw,54px) 0 26px}
.ft-bar{display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10)}
.ft-bar p{font-size:13.5px; margin:0}
/* the attribution takes this page's own footer font and muted colour, with the
   name in the accent. never a fixed Scalus coloured chip */
.by{font-size:13.5px; color:#CBD8D4; text-decoration:none; padding:12px 0; display:inline-block}
.by b{color:#E4A188; font-weight:700}
.by:hover{text-decoration:underline}
.disc{margin-top:18px !important; font-size:12.5px !important; line-height:1.6; color:#93A7A4 !important}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .cards{grid-template-columns:1fr; gap:20px}
  .card{flex-direction:row}
  .shot{flex:0 0 42%; border-bottom:0; border-right:1px solid var(--line)}
  .shot img{height:100%}
}
@media (max-width:760px){
  .card{flex-direction:column}
  .shot{flex:none; border-right:0; border-bottom:1px solid var(--line)}
  .shot img{height:auto}
  /* three links wrapped onto three rows and ate about 200px of a 393px phone
     before any content. One row, tighter, and the labels are short enough to
     fit without a horizontal scroller. */
  .nav{margin-left:0; width:100%; gap:14px; padding-bottom:6px; flex-wrap:nowrap; justify-content:space-between}
  .nav a{font-size:13.5px; padding:13px 0; white-space:nowrap}
  .hd-in{padding-top:6px; row-gap:0}
}
@media (max-width:640px){
  :root{--hd:66px}
  body{font-size:16.5px}
  .brand img{height:30px}
  .notes li{grid-template-columns:34px 1fr; gap:12px}
  .specs li{grid-template-columns:1fr; gap:0; padding:8px 0}
}