/* My type 1 headers (Year one, Insulin delivery). Each page gets its own header art;
   the back link, label, title, section links and Next link are shared. */
.mt-hero{position:relative;width:min(1000px,calc(100vw - 32px));left:50%;transform:translateX(-50%);padding-top:32px;margin-bottom:32px;color:#2F2622;font-family:"Atkinson Hyperlegible",Arial,sans-serif}
.mt-back{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-bottom:10px;font-weight:700;font-size:14px;color:#7E2154;text-decoration:none}
.mt-hero .mt-ey{display:block;font:700 12px/1 "Atkinson Hyperlegible",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#3F6B3A;margin-bottom:10px}
.mt-hero h1{font:500 52px/1.02 Fraunces,Georgia,serif;color:#A3326F;margin:0;letter-spacing:-.01em;text-wrap:balance}
.mt-lede{margin:12px 0 0;max-width:40ch;font-size:18px;line-height:1.55}
.mt-quote{margin:16px 0 0;max-width:24ch;font:italic 400 20px/1.35 Fraunces,Georgia,serif;color:#7E2154}
.mt-stops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px;border-top:1px dashed #F296BD;padding-top:12px}
.mt-stops a{display:block;text-decoration:none;color:#2F2622;border-radius:8px;padding:4px 0}
.mt-stops i{display:block;font:700 11px/1.3 "Atkinson Hyperlegible",Arial,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#3F6B3A}
.mt-stops b{display:block;font:500 20px/1.15 Fraunces,Georgia,serif;color:#A3326F;margin-top:2px}
.mt-stops span{display:block;font-size:14px;line-height:1.3;margin-top:2px}
.mt-stops a:hover b,.mt-stops a:focus-visible b{text-decoration:underline;text-decoration-color:#F296BD;text-underline-offset:4px}
.mt-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;border-top:1px dashed #F296BD;padding-top:8px;font-size:13px;line-height:1.4}
.mt-foot a{color:#7E2154;font-weight:700;text-decoration:none}

/* Year one: the year's kit, counted out in the pouch from the Diabetes page */
.yo-top{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:40px;align-items:center}
.mt-pouch{background:#A3326F;border-radius:22px;padding:14px;box-shadow:0 14px 30px rgba(126,33,84,.22)}
.mt-stitch{border:1.5px dashed #F4D6E2;border-radius:14px;padding:16px}
.yo-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;color:#fff;font:700 12px/1.3 "Atkinson Hyperlegible",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.yo-tally{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.yo-tally li{background:#fff;border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center;margin:0}
.yo-tally li:nth-child(odd){transform:rotate(-1deg)}.yo-tally li:nth-child(even){transform:rotate(1deg)}
.yo-tally svg{width:44px;height:44px;flex:none}
.yo-tally b{display:block;font:500 30px/1 Fraunces,Georgia,serif;color:#A3326F;font-variant-numeric:tabular-nums}
.yo-tally span{display:block;font-size:13px;line-height:1.25}
.yo-range{margin:12px 0 0;color:#fff;font-size:14px;text-align:center}

/* Insulin delivery: three insulins, five devices, joined with the guide's elbow lines */
.im-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px;align-items:end}
.im-top .mt-lede{margin:0}
.im-map{margin-top:22px;background:#fff;border:1px solid #EBD9DE;border-radius:16px;padding:18px 22px;display:grid;gap:4px}
.im-row{--c:#A3326F;--t:#F4D6E2;--l:#E3A9C2;--k:#7E2154;display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;padding:12px 0}
.im-row+.im-row{border-top:1px dashed #F296BD}
.im-row.humalog,.ins-humalog{--c:#9A7400;--t:#FBE7A6;--l:#E6C65A;--k:#5A4300}
.im-row.afrezza,.ins-afrezza{--c:#3F6B3A;--t:#DDE8D3;--l:#AFC79F;--k:#2F4F2B}
.im-row.lantus,.ins-lantus{--c:#A3326F;--t:#F4D6E2;--l:#E3A9C2;--k:#7E2154}
.im-ins{background:var(--t);border:1.5px solid var(--l);border-radius:12px;padding:12px 14px}
.im-ins b{display:block;font:500 22px/1.15 Fraunces,Georgia,serif;color:#7E2154}
.im-ins span{display:block;font-size:13px;font-weight:700;color:var(--k)}
.im-devs{list-style:none;margin:0;padding:0 0 0 64px;display:grid;gap:10px;position:relative}
.im-devs::before{content:"";position:absolute;left:0;width:24px;top:50%;border-top:2px solid var(--c)}
.im-devs li{position:relative;margin:0}
.im-devs li::before{content:"";position:absolute;left:-40px;top:0;bottom:-10px;border-left:2px solid var(--c)}
.im-devs li:first-child::before{top:50%}
.im-devs li:last-child::before{bottom:50%}
.im-devs li:only-child::before{display:none}
.im-devs li::after{content:"";position:absolute;left:-40px;width:31px;top:50%;border-top:2px solid var(--c)}
.im-dev{position:relative;display:flex;align-items:center;gap:12px;max-width:460px;min-height:64px;padding:6px 14px 6px 8px;border:1.5px solid var(--l);border-radius:12px;background:#FDF8F6;color:#2F2622;text-decoration:none}
.im-dev::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-6px;border-left:9px solid var(--c);border-top:6px solid transparent;border-bottom:6px solid transparent}
.im-dev.on{border:2px solid var(--c)}
.im-dev svg{width:52px;height:52px;flex:none}
.im-dev b{display:block;font:500 18px/1.2 Fraunces,Georgia,serif;color:#7E2154}
.im-dev span{display:block;font-size:13px;line-height:1.3}
.im-dev em{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#FDF8F6;background:#7E2154;border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:2px}
.im-dev:hover b,.im-dev:focus-visible b{text-decoration:underline;text-decoration-color:#F296BD;text-underline-offset:4px}

/* My tech setup: my setup today. The core in a row; Nightscout hangs off Zukka as the optional extra. */
.ts-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px;align-items:end}
.ts-top .mt-lede{margin:0}
.ts-map{margin-top:22px;background:#fff;border:1px solid #EBD9DE;border-radius:16px;padding:18px 22px 20px}
.ts-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.ts-cap b{font:500 22px/1.2 Fraunces,Georgia,serif;color:#7E2154}
.ts-cap span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#A3326F;color:#fff}
.ts-core{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ts-core li{position:relative;margin:0;display:flex}
.ts-core li+li::before{content:"";position:absolute;left:-24px;top:50%;width:18px;border-top:2px solid #A3326F}
.ts-core li+li::after{content:"";position:absolute;left:-10px;top:50%;margin-top:-5px;border-left:7px solid #A3326F;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ts-core a,.ts-ns,.ts-jobs a{flex:1;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#2F2622}
.ts-core a{background:#FDF8F6;border:2px solid #A3326F}
.ts-ic{flex:none;width:56px;height:56px;border-radius:50%;background:#FBF1F5;display:flex;align-items:center;justify-content:center}
.ts-ic svg,.ts-ic img{width:44px;height:44px;display:block}
.ts-map i{display:block;font:700 12px/1.3 "Atkinson Hyperlegible",Arial,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#3F6B3A}
.ts-map b{display:block;font:500 19px/1.2 Fraunces,Georgia,serif;color:#A3326F}
.ts-map a span span{display:block;font-size:13px;line-height:1.35}
.ts-up{position:relative;margin:0 0 0 calc(50% + 2px);padding:12px 0 12px 12px;border-left:2px dashed #A3326F;font-size:13px;font-weight:700;color:#7E2154}
.ts-opt{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:12px;padding:12px;border:1.5px dashed #A3326F;border-radius:14px;background:#FBF1F5}
.ts-ns em{display:inline-block;font:700 12px/1.3 "Atkinson Hyperlegible",Arial,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#7E2154;border:1px dashed #A3326F;border-radius:999px;padding:2px 8px;background:#fff}
.ts-ns .ts-ic{background:#fff}
.ts-jobs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ts-jobs li{margin:0;display:flex}
.ts-jobs a{background:#fff;border:1px solid #EBD9DE}
.ts-core a:hover b,.ts-ns:hover b,.ts-jobs a:hover b,.ts-core a:focus-visible b,.ts-jobs a:focus-visible b{text-decoration:underline;text-decoration-color:#F296BD;text-underline-offset:4px}
@media (max-width:760px){
  .ts-top,.ts-opt{grid-template-columns:1fr;gap:12px}
  .ts-core{grid-template-columns:1fr;gap:22px}
  .ts-core li+li::before{left:50%;top:-18px;width:0;height:14px;border-top:0;border-left:2px solid #A3326F}
  .ts-core li+li::after{left:calc(50% - 4px);top:-6px;margin:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #A3326F;border-bottom:0}
  .ts-up{margin-left:50%}
  .ts-jobs{grid-template-columns:1fr}
  .ts-map{padding:14px}
}
@media print{.ts-map{break-inside:avoid}}

@media (max-width:760px){
  .mt-hero h1{font-size:38px}
  .mt-lede{font-size:17px}
  .yo-top,.im-top{grid-template-columns:1fr;gap:20px}
  .mt-stops{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .yo-tally{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yo-tally svg{width:36px;height:36px}
  .yo-tally b{font-size:24px}
  .mt-stitch{padding:12px}
  .im-map{padding:12px 14px}
  .im-row{display:block}
  .im-devs{padding:10px 0 0 34px}
  .im-devs::before{display:none}
  .im-devs li::before,.im-devs li:first-child::before{left:-20px;top:-10px;bottom:-10px;display:block}
  .im-devs li:last-child::before{bottom:50%}
  .im-devs li::after{left:-20px;width:11px}
  .im-dev svg{width:44px;height:44px}
}
@media print{.mt-hero{width:auto;left:0;transform:none}.mt-stops{display:none}.yo-tally li{transform:none}}

/* Make your own headers (Pack for a trip, Build a guide): what you get, then the form */
.ph-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:36px;align-items:center}
.ph-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:20px 0 0}
.ph-go a{font-weight:700;font-size:15px;color:var(--hyssop-deep)}
.ph-go a.ph-btn{padding:12px 20px;border-radius:999px;background:var(--sunflower);color:var(--ink);text-decoration:none}
.ph-go a.ph-btn:hover{filter:brightness(.96)}
.ph-hl{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ph-hl li{display:flex;gap:10px;margin:0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px}
.ph-hl b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--hyssop);color:#fff;display:flex;align-items:center;justify-content:center;font:500 16px/1 var(--display)}
.ph-hl span{display:flex;flex-direction:column;font-size:14px;line-height:1.4}
.ph-hl strong{font-size:15px;color:var(--hyssop-deep)}
.ph-fan{position:relative;height:340px}
.ph-fan img{position:absolute;top:18px;width:190px;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 12px 26px rgba(47,38,34,.16)}
.ph-fan img:nth-child(1){left:0;transform:rotate(-7deg)}
.ph-fan img:nth-child(2){left:22%;top:4px;transform:rotate(-2deg)}
.ph-fan img:nth-child(3){left:44%;top:4px;transform:rotate(2deg)}
.ph-fan img:nth-child(4){right:14px;transform:rotate(7deg)}
@media (max-width:960px){
  .ph-top{grid-template-columns:minmax(0,1fr)}
  .ph-fan{height:250px;max-width:520px}
  .ph-fan img{width:150px}
  .ph-hl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ph-hl{grid-template-columns:minmax(0,1fr)}
  .ph-fan{height:200px}
  .ph-fan img{width:118px}
}