/* The samples' additions to the launcher's look (launcher.css, copied from launcher/site by samples/build.py):
   the demonstration notice, the author's name in the hero, a "Try:" line on each card, the drafts in development,
   the gold Contact button, the floating Contact button and its card, and the short hero of the 404 page; and in the top bar the
   portfolio's mark and Brandon's name, where the launcher has the school's logo (the samples do not carry it). */
.brand .mark{height:34px;width:34px}
.brand .me{font-weight:700;font-size:17px;letter-spacing:.01em;white-space:nowrap}
@media (max-width:640px){.brand .me{display:none}}
.notice{margin:0;background:#FBF6E8;border-bottom:1px solid #EADBB0;color:#4A3A0C;font-size:14px;line-height:1.45}
.notice .wrap{display:block;padding-top:9px;padding-bottom:9px}
.notice b{color:var(--purple)}
.hero .by{margin:16px 0 0;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff}
.hero .by::before{content:"";width:22px;height:2px;border-radius:1px;background:rgba(255,255,255,.45)}
.tool p.try{margin-top:12px;color:var(--ink);font-size:14.5px}
.tool p.try b{color:var(--purple)}
/* the wide cards have one more line than the launcher's (the Try: line): one more row, and the picture beside them */
.tool.feature{grid-template-rows:auto auto auto auto 1fr auto}
.feature .art{grid-row:2 / 6}

/* in development: a heading, then the drafts' cards (the launcher's .tool cards, marked as drafts) */
.drafts-section{margin-top:64px}
.section-head{max-width:720px}
.section-head .eyebrow{color:var(--purple)}
.section-head .eyebrow::before{background:var(--gold)}
.section-head h2{margin:10px 0 0;font-size:clamp(26px,3vw,34px);letter-spacing:-.015em;color:var(--purple)}
.section-head p{margin:8px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
.drafts{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.drafts{grid-template-columns:minmax(0,1fr);gap:14px}}
.tool.draft{border-style:dashed;border-color:var(--line)}
.tool.draft .kind{background:#FBF6E8;color:#6B5112}

/* the gold button (Contact me, in About) */
.btn-gold{font:inherit;font-weight:700;font-size:15.5px;color:var(--purple);background:var(--gold);border:0;border-radius:999px;padding:12px 22px;cursor:pointer;flex:none;transition:background .2s,transform .2s var(--ease)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-1px)}

/* Contact: a floating button, and the card it opens (a native popover) */
.contact-fab{position:fixed;inset-inline-end:20px;bottom:20px;z-index:20;display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;font-size:15px;color:var(--purple);background:var(--gold);border:0;border-radius:999px;padding:12px 20px 12px 16px;cursor:pointer;box-shadow:0 10px 28px -8px rgba(33,7,108,.55),0 0 0 4px rgba(255,255,255,.7);transition:transform .25s var(--ease),background .2s}
.contact-fab:hover{background:var(--gold-2);transform:translateY(-2px)}
.contact-fab svg,.contact svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.contact{position:fixed;inset:auto 20px 84px auto;margin:0;width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:20px;border:1px solid var(--line-2);border-radius:20px;background:#fff;color:var(--ink);box-shadow:var(--shadow-up)}
.contact:popover-open{animation:rise .3s var(--ease) both}
.contact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.contact h2{margin:6px 0 0;font-size:21px;color:var(--purple)}
.contact .eyebrow{color:#6B5112;font-size:11.5px}
.contact .eyebrow::before{background:var(--gold)}
.contact p{margin:10px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.contact ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.contact a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--tint);color:var(--purple);text-decoration:none;transition:background .2s}
.contact a:hover{background:#E6E0F6}
.contact a span:last-child{display:flex;flex-direction:column;min-width:0;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.contact a b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6B5112}
.ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--purple);color:var(--gold);flex:none}
.close{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--purple);cursor:pointer}
.close:hover{background:var(--tint)}
.contact-fab:focus-visible,.contact a:focus-visible,.close:focus-visible,.btn-gold:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
footer.site{padding-bottom:64px}
@media (max-width:639px){.contact-fab{inset-inline-end:12px;bottom:12px;padding:11px 16px 11px 13px}.contact{inset:auto 12px 76px 12px;width:auto}}

.hero.lost{padding:64px 0 88px}
.hero.lost .copy{max-width:640px}
.hero.lost .lead a{color:var(--gold);font-weight:700}
/* links in the hero's opening words: white on the purple, underlined in gold */
.hero:not(.lost) .lead a{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hero:not(.lost) .lead a:hover{color:var(--gold)}

/* ---- the front page's sections for the two roles: a jump menu, the tours, the tools under a heading, the case
   studies, how I build and about ---- */
.jump{margin-inline-start:auto;display:flex;gap:4px}
.jump a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.jump a:hover{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:860px){.jump{display:none}}
.tours{margin:-88px 0 0;position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.tours{grid-template-columns:minmax(0,1fr);gap:14px}}
.tour{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:26px 26px 0;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-up);overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.tour::after{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--purple),var(--purple-3) 50%,var(--gold))}
.tour:hover{transform:translateY(-4px);border-color:var(--line)}
.tour:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.tour .eyebrow{color:#6B5112}
.tour h2{margin-top:10px;font-size:clamp(21px,2.2vw,25px);letter-spacing:-.01em;text-wrap:balance}
.tour h2 a{color:inherit;text-decoration:none}
.tour h2 a::after{content:"";position:absolute;inset:0;z-index:2}
.tour h2 a:focus-visible{outline:none}
.tour p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.tour ol{margin:16px 0 22px;padding:0;list-style:none;counter-reset:s;display:grid;gap:7px}
.tour ol li{counter-increment:s;display:flex;gap:10px;align-items:baseline;font-size:14.5px;line-height:1.4}
.tour ol li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--tint);color:var(--purple);font-weight:700;font-size:12.5px}
.tour .go{margin-top:auto}
.tour:hover .go i,.tour:focus-within .go i{background:var(--purple);color:var(--gold);transform:translateX(3px)}
.skills-link{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:16px 22px;border-radius:16px;background:var(--tint);border:1px solid var(--line-2);color:var(--purple);text-decoration:none;transition:background .2s,border-color .2s}
.skills-link:hover{background:#E9E3F8;border-color:var(--line)}
.skills-link b{font-size:16px}
.skills-link span{grid-column:1;color:var(--muted);font-size:14px}
.skills-link i{grid-row:1 / 3;grid-column:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:var(--gold)}
.skills-link svg,.facts svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tools-section,.work-section,.build-section{margin-top:72px}
.tools-section .tools{margin-top:22px}
.facts{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted)}
.facts li{display:inline-flex;align-items:center;gap:8px}
.facts svg{color:var(--purple)}
.facts b{color:var(--ink)}
.drafts{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* case studies: a big real number on each */
.work{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.work{grid-template-columns:minmax(0,1fr)}}
.work a{display:flex;flex-direction:column;height:100%;padding:22px;border-radius:var(--r);text-decoration:none;color:#fff;background:linear-gradient(150deg,var(--purple-2),var(--purple) 70%);box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s}
.work a:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
.work .num{font-size:clamp(30px,3.4vw,40px);line-height:1;letter-spacing:-.02em;color:var(--gold)}
.work .lbl{margin-top:6px;font-size:13px;color:rgba(255,255,255,.75)}
.work .ttl{margin-top:22px;font-size:18px}
.work span:last-child{margin-top:6px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}

/* how I build */
.principles{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.principles{grid-template-columns:minmax(0,1fr)}}
.principles li{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff}
.principles .pi{width:40px;height:40px;margin-bottom:6px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--purple)}
.principles svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.principles b{color:var(--purple);font-size:16px}
.principles span:last-child{color:var(--muted);font-size:14.5px;line-height:1.55}

/* about */
.about{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;padding:30px;border:1px solid var(--line-2);border-radius:var(--r);background:linear-gradient(160deg,var(--tint),#fff 70%)}
@media (max-width:760px){.about{grid-template-columns:minmax(0,1fr);padding:22px}}
.about .eyebrow{color:#6B5112}
.about h2{margin-top:8px;font-size:clamp(24px,2.8vw,30px)}
.about p{margin:10px 0 0;max-width:70ch;color:#333;font-size:16px;line-height:1.6}
.about-links{display:flex;flex-wrap:wrap;gap:10px}
.btn-line{display:inline-flex;align-items:center;font-weight:700;font-size:15.5px;color:var(--purple);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:11px 20px;text-decoration:none;transition:background .2s}
.btn-line:hover{background:var(--tint)}
.btn-line:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* resources: a picture of each page, its kind, its name */
.res-section{margin-top:72px}
.resources{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1023px){.resources{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.resources{grid-template-columns:minmax(0,1fr)}}
.resources a{display:flex;flex-direction:column;height:100%;padding:14px 14px 18px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.resources a:hover{transform:translateY(-4px);box-shadow:var(--shadow-up);border-color:var(--line)}
.resources .thumb{display:block;aspect-ratio:4 / 3;overflow:hidden;border-radius:12px;background:var(--tint);border:1px solid var(--line-2)}
.resources img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease)}
.resources a:hover img{transform:scale(1.03)}
.resources .rk{margin:14px 4px 0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6B5112}
.resources b{margin:4px 4px 0;color:var(--purple);font-size:17px;line-height:1.3}
.resources .rd{margin:4px 4px 0;color:var(--muted);font-size:14.5px;line-height:1.5}