/* Heart Eco sketch site · shared look for every inner page.
   The inner pages read like a newspaper: a photograph, a headline, a large first paragraph,
   and the type gets smaller as the detail grows. */
:root{
  --purple:#421052;      /* the fifth heart, belonging */
  --yellow:#F4DA0D;      /* discover abundance */
  --red:#E02B20;         /* save your cash */
  --green:#8CC63F;       /* save the planet */
  --blue:#29ABE2;        /* have fun */
  --ink:#20102a;
  --soft:#5a4b63;
  --paper:#fffdf6;
  --rule:#e4dccb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:Archivo,"Segoe UI",Roboto,Arial,sans-serif;font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Archivo Black",Archivo,Arial,sans-serif;line-height:1.04;letter-spacing:-.5px;margin:0;color:var(--purple)}
a{color:var(--purple)}

/* ---------- the sketch notice ---------- */
.sketch{background:var(--purple);color:#fff;font-size:13.5px;letter-spacing:.5px;text-align:center;padding:6px 12px}
.sketch b{color:var(--yellow)}

/* ---------- masthead and menu ---------- */
.mast{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0 12px;border-bottom:3px solid var(--purple);flex-wrap:wrap}
.mast img{width:150px;display:block}
.menu{display:flex;flex-wrap:wrap;gap:4px 16px;font-weight:600;font-size:15.5px}
.menu a{text-decoration:none;color:var(--purple);padding:4px 0;border-bottom:3px solid transparent}
.menu a:hover,.menu a.here{border-bottom-color:var(--yellow)}
.menu a.join{background:var(--yellow);padding:4px 12px;border-radius:9px;border:0}

/* ---------- the photograph slot ---------- */
.photo{position:relative;background:repeating-linear-gradient(135deg,#efe8d8 0 14px,#f6f1e4 14px 28px);
  border:2px dashed #cbbfa6;border-radius:14px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#8a7c64;font-weight:600;font-size:16px;padding:20px}
.photo span{max-width:40ch}
.photo span::before{content:"\1F4F7  ";}
.photo.hero{aspect-ratio:16/7;margin-top:26px}
.photo.mid{aspect-ratio:16/9}
.photo.small{aspect-ratio:4/3;font-size:14px}
.photo.video span::before{content:"\1F3A5  ";}

/* ---------- the lead story ---------- */
.kicker{font-size:13.5px;letter-spacing:4px;font-weight:700;text-transform:uppercase;margin:22px 0 8px}
.kicker.red{color:var(--red)} .kicker.green{color:#4f8a14} .kicker.yellow{color:#a88f00} .kicker.blue{color:#1d7fb0} .kicker.purple{color:var(--purple)}
.story h1{font-size:clamp(36px,6vw,68px)}
.lead{font-size:clamp(21px,2.3vw,27px);line-height:1.38;font-weight:600;margin:16px 0 0;max-width:62ch}
.body{font-size:19px;margin:16px 0 0;max-width:66ch}
.detail{font-size:15.5px;line-height:1.55;color:#3b2c45;columns:2 300px;column-gap:34px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.detail p{margin:0 0 10px;break-inside:avoid}
.detail h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 4px;color:var(--purple)}
.fine{font-size:13.5px;color:var(--soft);margin:14px 0 0}

/* ---------- the invitation to act ---------- */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;align-items:center}
.act{display:inline-block;background:var(--yellow);color:var(--purple);font-family:"Archivo Black",Arial,sans-serif;font-size:19px;padding:13px 22px;border-radius:12px;text-decoration:none}
.act.ghost{background:none;border:3px solid var(--purple);padding:10px 19px}

/* ---------- the stories below ---------- */
.more{margin:54px 0 0;padding-top:18px;border-top:3px double var(--purple)}
.more > h2{font-size:15px;letter-spacing:4px;text-transform:uppercase;margin-bottom:18px}
.col{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 28px}
.item h3{font-size:26px;margin:14px 0 0}
.item .lead{font-size:18.5px;margin-top:8px}
.item .body{font-size:15.5px;margin-top:8px}
.item .fine{font-size:13px}
.item a.go{display:inline-block;margin-top:10px;font-weight:700;font-size:15.5px}

/* a row story: photograph beside the words */
.row{display:grid;grid-template-columns:5fr 7fr;gap:28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row h3{font-size:30px}
.row .lead{font-size:20px;margin-top:8px}
.row .body{font-size:16px;margin-top:8px}
.row .fine{font-size:13.5px}
.row .says{font-size:15px;color:var(--soft);font-style:italic;margin:6px 0 0}

/* ---------- honesty marks: what is still to fill ---------- */
.todo{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--purple);border:1.5px dashed var(--purple);border-radius:20px;padding:1px 9px;vertical-align:middle;white-space:nowrap;font-family:Archivo,Arial,sans-serif;font-style:normal}

/* ---------- the club, at the foot of every page ---------- */
.club{margin:60px 0 0;background:var(--purple);color:#fff;border-radius:22px;padding:36px 36px}
.club h2{color:#fff;font-size:clamp(26px,3.6vw,40px)}
.club p{max-width:60ch;font-size:18px;margin:12px 0 0}
.club .act{margin-top:18px}
footer{margin:40px 0 44px;font-size:15px;color:var(--soft)}
footer b{color:var(--purple)}

@media (max-width:760px){
  body{font-size:17px}
  .row{grid-template-columns:1fr;gap:12px}
  .photo.hero{aspect-ratio:4/3}
  .club{padding:26px 22px}
}

/* ---------- print: A4 portrait, compact, design kept ---------- */
@media print{
  @page{size:A4 portrait;margin:11mm}
  body{background:#fff;font-size:10.5pt;line-height:1.35}
  .wrap{max-width:none;padding:0}
  .sketch,.menu{display:none}
  .photo.hero{aspect-ratio:16/5}
  .photo.mid,.photo.small{aspect-ratio:16/6}
  .story h1{font-size:28pt}
  .lead{font-size:13pt}
  .body{font-size:10.5pt}
  .detail{font-size:9pt}
  .row{padding:10px 0;gap:14px;break-inside:avoid}
  .row h3,.item h3{font-size:15pt}
  .item{break-inside:avoid}
  .col{gap:14px}
  .club{padding:14px 18px;margin-top:16px;break-inside:avoid}
  .more{margin-top:18px}
  a{text-decoration:none}
}
.detail > div{margin:0 0 10px;break-inside:avoid}

/* ---------- the four heart pages ---------- */
.heartnav{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.heartnav a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:15px;color:var(--purple);padding:6px 14px 6px 8px;border-radius:30px;border:2px solid var(--rule);background:#fff}
.heartnav a.here{border-color:var(--purple)}
.heartnav img{width:26px;height:26px;object-fit:contain}
img.h-red{rotate:-90deg} img.h-yellow{rotate:90deg} img.h-blue{rotate:180deg}
.proof{margin:30px 0 0;border-radius:18px;padding:24px 26px}
.proof.red{background:#fdecea} .proof.green{background:#eef7e2} .proof.yellow{background:#fdf8d4} .proof.blue{background:#e6f5fc}
.proof h2{font-size:clamp(22px,2.6vw,30px)}
.proof table{width:100%;border-collapse:collapse;margin-top:14px;font-size:16px}
.proof th,.proof td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(66,16,82,.15)}
.proof th{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--purple)}
.big-number{font-family:"Archivo Black",Arial,sans-serif;font-size:clamp(46px,7vw,84px);color:var(--purple);line-height:1;margin-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:14px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 10px;border-radius:20px;color:#fff;margin-top:14px}
.tag.red{background:var(--red)} .tag.green{background:#4f8a14} .tag.yellow{background:#a88f00} .tag.blue{background:#1d7fb0}

/* ---------- real photographs, once they arrive ---------- */
/* Photographs live on the Desktop (WEBSITE/FOR THE SKETCH) while the site is a sketch,
   so faces stay off the backup until everyone in them has said yes. */
img.pic{display:block;width:100%;object-fit:cover;border-radius:14px;background:#efe8d8}
img.pic.hero{aspect-ratio:16/8;margin-top:26px;object-position:50% 55%}
img.pic.mid{aspect-ratio:16/9}
img.pic.small{aspect-ratio:4/3}
@media (max-width:760px){img.pic.hero{aspect-ratio:4/3}}
@media print{img.pic.hero{aspect-ratio:16/6}}
img.pic.fit{object-fit:contain;background:#fff;border:1px solid var(--rule)}
/* four small photos in one product row */
.four{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.four img.pic{aspect-ratio:4/3}
.row.solo{grid-template-columns:1fr}
.more > h2.big{font-size:clamp(34px,5.5vw,60px);letter-spacing:-.5px;text-transform:none;margin-bottom:8px}
/* a big statement at the foot of a page */
.statement{margin:60px 0 0}
.statement h2{font-size:clamp(34px,5.5vw,62px);margin-top:22px}
.statement .lead{max-width:60ch}
video.pic{display:block;width:100%;object-fit:cover;border-radius:14px;background:#000}
.map{display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:12px;margin-top:10px}
/* the way home, at the foot of every page */
.homeback{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:40px 0 0;padding-top:16px;border-top:3px solid var(--purple)}
.homeback a{font-family:"Archivo Black",Arial,sans-serif;font-size:18px;color:var(--purple);text-decoration:none}
.homeback a:hover{text-decoration:underline}
/* nine in a block: three by three, to show the range in a small space */
.block{padding:26px 0;border-bottom:1px solid var(--rule)}
.block h3{font-size:30px}
.block .lead{font-size:20px;margin-top:8px}
.nine{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 10px;max-width:760px}
.nine img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.nine figure{margin:0;position:relative}
.nine figcaption{position:absolute;left:6px;bottom:6px;right:6px;background:rgba(66,16,82,.85);color:#fff;font-size:12.5px;font-weight:700;padding:3px 7px;border-radius:6px}
@media print{.nine{gap:3px;max-width:none}.nine figcaption{font-size:7pt}}
/* the Snooze You Lose week: six day cards */
.snooze-h{font-family:"Archivo Black",Arial,sans-serif;font-size:20px;color:var(--purple);margin:22px 0 4px}
.snooze{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 6px}
.snooze img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.snooze-wrap{padding:0 0 26px;border-bottom:1px solid var(--rule)} .snooze-wrap .snooze{max-width:760px}
.row .snooze{grid-template-columns:repeat(2,1fr);gap:5px;margin:0}
.heartkick{display:flex;align-items:center;gap:12px}.heartkick img{width:52px;height:52px;object-fit:contain}
.col.two{grid-template-columns:1fr 1fr;align-items:start} @media (max-width:760px){.col.two{grid-template-columns:1fr}}
/* two columns that flow down: left first, then right, so a short story sits snug under the one above */
.col.two{display:block;column-count:2;column-gap:28px}
.col.two .item{break-inside:avoid;margin-bottom:34px;display:inline-block;width:100%}
@media (max-width:760px){.col.two{column-count:1}}
/* stories without a photo sit below the photographed ones and stretch across */
.col .item.wide{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:12px}
.col .item.wide h3{font-size:22px}
.col.pair{grid-template-columns:1fr 1fr} @media (max-width:760px){.col.pair{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}.duo img.pic{aspect-ratio:3/4;object-fit:cover}
/* two explicit columns for stories of different heights */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.twocol .item{margin-bottom:34px}
@media (max-width:760px){.twocol{grid-template-columns:1fr}}
.hours{margin-top:14px;font-size:18px;line-height:1.6;background:#fff;border-left:8px solid var(--yellow);border-radius:10px;padding:12px 18px;max-width:420px}
/* everything we make: a list grouped by kind */
.makelist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px;margin-top:18px}
.makelist h4{font-family:"Archivo Black",Arial,sans-serif;color:var(--purple);font-size:17px;margin:0 0 4px}
.makelist p{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:760px){.makelist{grid-template-columns:1fr}}