/* Shared styles for izzyhodnett.com. Extracted from index.html so the
   landing page and every project page render from one source. */

:root{
  --bg:#ecebf5; --bg-deep:#dfdced;
  --surface:#f7f5fb; --surface-alt:#eeebf6;
  --card:#fcfbfe; --card-hover:#ffffff;
  --text:#334155; --text-strong:#0f172a; --sub:#475569; --muted:#64748b;
  --accent:#6657c7; --accent-soft:#f0edff;
  --blue:#3b72c4;   --blue-soft:#e5eefb;
  --teal:#0f766e;   --teal-soft:#f0fdfa;
  --green:#15803d;  --green-soft:#f0fdf4;
  --amber:#b45309;  --amber-soft:#fffbeb;
  --border:#d5dee9; --border-strong:#b9c6d6;
  --r-md:.75rem; --r-lg:1rem; --r-pill:999px;
  --sans:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","SFMono-Regular",Consolas,ui-monospace,monospace;
  --gutter:16px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; min-height:100%; color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.6; overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 0%,rgba(102,87,199,.11),transparent 32rem),
    radial-gradient(circle at 92% 32%,rgba(59,114,196,.08),transparent 36rem),
    var(--bg);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 32%);
}
.wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 var(--gutter)}
a{color:inherit}
h1,h2,h3{color:var(--text-strong); line-height:1.2; margin:0; text-wrap:balance}
p{margin:0}

/* ---------- site navigation ---------- */
.site-nav{
  position:sticky; top:0; z-index:20; border-bottom:1px solid var(--border);
  background:rgba(247,245,251,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.site-nav__inner{
  min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.site-nav__brand{
  font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-decoration:none; color:var(--text-strong);
}
.site-nav__links{display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none}
.site-nav__links a{
  display:flex; align-items:center; min-height:44px; padding:0 9px; border-radius:8px;
  color:var(--sub); font-family:var(--mono); font-size:.6875rem; text-decoration:none;
  transition:color .18s ease, background .18s ease;
}
.site-nav__links a:hover,.site-nav__links a:focus-visible{
  color:var(--accent); background:var(--accent-soft);
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.section{padding:72px 0; border-top:1px solid var(--border)}
.section--first{border-top:0; padding-top:56px; background:var(--surface-alt)}
.section__head{margin-bottom:28px; max-width:62ch}
.section__head h2{font-size:1.5rem; margin:10px 0 8px}
.section__head p{color:var(--sub); font-size:.9375rem}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em; color:var(--sub);
  background:var(--card); white-space:nowrap;
}
.chip--cf{color:var(--amber); border-color:#fcd34d; background:var(--amber-soft)}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:1fr; gap:22px}
.about__prose p{color:var(--sub); font-size:.9375rem; margin-bottom:16px; max-width:62ch}
.about__prose p:last-of-type{margin-bottom:22px}
.about__prose strong{color:var(--text-strong); font-weight:600}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:10px 20px; border-radius:var(--r-pill);
  font-size:.875rem; text-decoration:none; color:var(--text-strong);
  border:1px solid var(--border-strong); background:var(--card);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover,.btn:focus-visible{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
.cta{
  padding:36px 28px; text-align:center; border-radius:var(--r-lg);
  border:1px solid #1e293b; background:#0f172a;
}
.cta h2{font-size:1.5rem; margin:10px 0 12px; color:#fff}
.cta .eyebrow{color:#93c5fd}
.cta p{color:#cbd5e1; font-size:.9375rem; max-width:56ch; margin:0 auto 24px}
.cta__row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.btn--go{border-color:var(--accent); background:var(--accent); color:#fff}
.btn--go:hover,.btn--go:focus-visible{border-color:#5545b8; background:#5545b8; color:#fff}
.cta .btn{border-color:#475569; background:#1e293b; color:#fff}
.cta .btn:hover,.cta .btn:focus-visible{border-color:#93c5fd; color:#bfdbfe}
.cta .btn--go{border-color:#9f91ee; background:var(--accent)}

.offers{display:grid; grid-template-columns:1fr; gap:14px}
.offer{padding:22px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:0 8px 24px -22px rgba(15,23,42,.4)}
.offer__icon{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:13px;
}
.offer h3{font-size:1rem; margin-bottom:6px}
.offer p{font-size:.875rem; color:var(--sub)}

.callout{
  display:flex; gap:13px; padding:18px 20px; margin:0 0 16px;
  background:var(--accent-soft); border:1px solid #d8d1f1;
  border-radius:var(--r-md); font-size:.875rem; color:var(--text);
}
.callout svg{flex:none; color:var(--accent); margin-top:3px}
.callout strong{color:var(--text-strong); display:block; margin-bottom:4px}
.facts{display:grid; gap:10px; align-content:start}
.fact{padding:14px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md)}
.fact__k{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:block;
}
.fact__v{font-size:.8125rem; color:var(--sub); margin-top:5px; display:block}
.chip--live{color:var(--green); border-color:#86efac; background:var(--green-soft)}
.chip--test{color:var(--amber); border-color:#fcd34d; background:var(--amber-soft)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

/* ---------- hero ---------- */
.hero{
  padding:48px 0 56px; border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#f8f6fb 0%,#ece8f5 55%,#e7eef8 100%);
}
.hero__grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center}
.hero h1{font-size:clamp(2rem,6vw,3.25rem); letter-spacing:-.02em; margin:16px 0 0}
.hero h1 .h1__a{display:block}
.hero h1 .grad{
  background:none; color:var(--accent); -webkit-text-fill-color:currentColor;
}
.hero__lede{margin-top:18px; font-size:1.0625rem; color:var(--sub); max-width:54ch}
.hero__lede strong{color:var(--text-strong); font-weight:600}
.hero__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.hero__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}

.portrait{
  position:relative; width:min(230px,58vw); aspect-ratio:1; margin:0 auto;
  border-radius:50%; padding:4px; flex:none;
  background:var(--card); border:1px solid var(--border-strong);
  box-shadow:0 20px 55px -30px rgba(15,23,42,.45);
}
.portrait__inner{
  position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:#e2e8f0;
  display:grid; place-items:center;
}
.portrait__monogram{
  font-family:var(--mono); font-size:3rem; letter-spacing:.06em; color:var(--muted);
  user-select:none;
}
.portrait__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 8%; display:block;
}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:44px}
.stat{
  padding:16px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--card); box-shadow:0 12px 28px -22px rgba(15,23,42,.42);
}
.stat__n{font-size:1.75rem; font-weight:700; color:var(--text-strong); line-height:1.1}
.stat__l{font-size:.75rem; color:var(--muted); margin-top:4px}

/* ---------- proof first ---------- */
.proof__grid{display:grid; grid-template-columns:1fr; gap:12px}
.proof-card{
  display:flex; flex-direction:column; gap:9px; min-height:148px; padding:20px;
  color:var(--text); text-decoration:none; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-lg);
  border-top:3px solid var(--accent);
  box-shadow:0 10px 30px -24px rgba(15,23,42,.45);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.proof-card:hover,.proof-card:focus-visible{
  transform:translateY(-2px); border-color:#cec6ed; background:var(--card);
  box-shadow:0 16px 36px -24px rgba(15,23,42,.5);
}
.proof-card__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.proof-card__number{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.proof-card svg{color:var(--muted); flex:none}
.proof-card h3{font-size:1rem}
.proof-card p{color:var(--sub); font-size:.875rem}

/* ---------- method ---------- */
.steps{display:grid; grid-template-columns:1fr; gap:12px; counter-reset:step}
.step{
  position:relative; padding:20px 20px 20px 58px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 8px 24px -22px rgba(15,23,42,.35);
}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:20px; top:20px; font-family:var(--mono); font-size:.75rem;
  color:var(--accent); border:1px solid var(--accent-soft); border-radius:6px;
  width:26px; height:26px; display:grid; place-items:center; background:var(--accent-soft);
}
.step h3{font-size:.9375rem; margin-bottom:5px}
.step p{font-size:.875rem; color:var(--sub)}

/* ---------- projects ---------- */
.grid{display:grid; grid-template-columns:1fr; gap:14px}
.card{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 10px 28px -24px rgba(15,23,42,.45);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
a.card:hover,a.card:focus-visible{
  transform:translateY(-3px); border-color:var(--border-strong);
  background:var(--card); box-shadow:0 20px 44px -28px rgba(15,23,42,.45);
}
.card__preview{
  aspect-ratio:16/9; overflow:hidden; background:#e2e8f0;
  border-bottom:1px solid var(--border);
}
.card__preview-image{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease, filter .35s ease;
}
a.card:hover .card__preview-image,a.card:focus-visible .card__preview-image{
  transform:scale(1.025); filter:saturate(1.08) contrast(1.03);
}
.card__body{display:flex; flex:1; flex-direction:column; gap:12px; padding:22px}
.card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.card h3{font-size:1.0625rem}
.card__host{
  font-family:var(--mono); font-size:.6875rem; color:var(--muted);
  margin-top:5px;
  /* Long *.workers.dev hostnames must wrap, but prefer breaking at the dots
     and hyphens before splitting a word mid-character. */
  overflow-wrap:anywhere; word-break:normal;
}
.card__arrow{flex:none; color:var(--muted); transition:transform .18s ease, color .18s ease}
a.card:hover .card__arrow,a.card:focus-visible .card__arrow{transform:translate(3px,-3px); color:var(--teal)}
.card p{font-size:.875rem; color:var(--sub)}
.card__story{display:grid; gap:9px}
.card__story p{line-height:1.5}
.card__story strong{
  display:block; margin-bottom:2px; color:var(--text-strong); font-family:var(--mono);
  font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.card__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px}
/* Repeated on every project card on purpose. The app features below carry the
   same attribution in their own layout. */
.card__built{
  display:flex; align-items:center; gap:7px; margin-top:2px; padding-top:12px;
  border-top:1px solid var(--border); font-family:var(--mono); font-size:.625rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.card__built svg{color:var(--accent); flex:none}
.projects__toggle{display:none; margin:18px auto 0; cursor:pointer}
.projects__toggle svg{transition:transform .18s ease}
.projects__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
#about,#method,#android-apps{background:var(--surface)}
#offer,#projects,#stack,#contact{background:var(--surface-alt)}

/* ---------- apps ---------- */
.note{
  display:flex; gap:12px; padding:16px 18px; margin-bottom:20px;
  background:var(--teal-soft); border:1px solid rgba(45,212,191,.28); border-radius:var(--r-md);
  font-size:.875rem; color:var(--text);
}
.note svg{flex:none; color:var(--teal); margin-top:2px}
.note strong{color:var(--text-strong)}

.app-stack{display:grid; gap:20px}
.app-feature{
  --app-accent:var(--accent); --app-soft:var(--accent-soft);
  position:relative; display:grid; min-width:0; overflow:hidden;
  border:1px solid var(--border); border-radius:calc(var(--r-lg) + 4px);
  background:var(--card); box-shadow:0 18px 48px -34px rgba(15,23,42,.5);
}
.app-feature::before{
  content:""; position:absolute; inset:0 0 auto; height:2px; z-index:2;
  background:linear-gradient(90deg,var(--app-accent),transparent 68%);
}
.app-feature--moonrakers{--app-accent:var(--blue); --app-soft:var(--blue-soft)}
.app-feature--randomizer{--app-accent:var(--accent); --app-soft:var(--accent-soft)}
.app-feature--scoring{--app-accent:var(--accent); --app-soft:var(--accent-soft)}
.app-feature__copy{
  display:flex; flex-direction:column; align-items:flex-start; padding:26px;
}
.app-feature__copy .eyebrow{color:var(--app-accent)}
.app-feature__copy h3{font-size:1.5rem; margin:10px 0}
.app-feature__copy p{font-size:.9375rem; color:var(--sub)}
.app-feature__meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:18px}
.app-feature__built{
  display:flex; align-items:center; gap:7px; margin-top:18px;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
.app-feature__built svg{color:var(--app-accent); flex:none}
.app-feature__link{margin-top:22px; background:var(--app-soft)}
.app-feature__link svg{color:var(--app-accent)}
.app-gallery-panel{
  min-width:0; padding:20px 0 12px;
  background:#ebe8f2;
  border-top:1px solid var(--border);
}
.app-gallery-meta{
  display:flex; justify-content:space-between; gap:16px; padding:0 22px 12px;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.app-gallery{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,72%);
  gap:12px; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain;
  padding:0 22px 14px; scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--app-accent) rgba(255,255,255,.06);
}
.app-shot{
  position:relative; margin:0; overflow:hidden; aspect-ratio:9/16;
  scroll-snap-align:start; border-radius:14px; border:1px solid var(--border-strong);
  background:#0f172a; box-shadow:0 18px 34px -24px rgba(15,23,42,.55);
}
.app-shot__button{
  display:block; width:100%; height:100%; padding:0; border:0; color:inherit;
  background:transparent; cursor:zoom-in;
}
.app-shot__image{display:block; width:100%; height:100%; object-fit:cover}
.app-shot__button::after{
  content:"Enlarge"; position:absolute; right:10px; bottom:10px; padding:5px 9px;
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  color:#fff; background:rgba(15,23,42,.88); font-family:var(--mono);
  font-size:.625rem; letter-spacing:.06em; opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.app-shot__button:hover::after,.app-shot__button:focus-visible::after{opacity:1; transform:none}

/* ---------- screenshot lightbox ---------- */
body.modal-open{overflow:hidden}
.lightbox[hidden]{display:none}
.lightbox{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px;
  background:rgba(1,4,12,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.lightbox__dialog{
  position:relative; width:min(940px,100%); height:min(92vh,920px); display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:12px;
}
.lightbox__figure{
  min-width:0; height:100%; margin:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.lightbox__image{
  display:block; max-width:100%; max-height:calc(92vh - 64px); object-fit:contain;
  border-radius:14px; border:1px solid var(--border-strong); box-shadow:0 24px 80px rgba(0,0,0,.65);
}
.lightbox__caption{color:#cbd5e1; font-size:.875rem; text-align:center}
.lightbox__control{
  width:44px; height:44px; display:grid; place-items:center; padding:0; cursor:pointer;
  border:1px solid #475569; border-radius:50%; color:#fff;
  background:#0f172a;
}
.lightbox__control:hover,.lightbox__control:focus-visible{border-color:var(--teal); color:var(--teal)}
.lightbox__close{position:absolute; top:0; right:0; z-index:2}

/* ---------- stack ---------- */
.stack{display:flex; flex-wrap:wrap; gap:8px}
.stack .chip{font-size:.75rem; padding:7px 13px; color:var(--text)}

/* ---------- footer ---------- */
footer{padding:44px 0 64px; border-top:1px solid var(--border); margin-top:0; background:#e3dfec}
.foot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
.foot p{font-size:.8125rem; color:var(--muted)}
.foot a{color:var(--sub); text-decoration:none; border-bottom:1px solid var(--border-strong)}
.foot a:hover{color:var(--teal); border-color:var(--teal)}

:where(a,button):focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px}

@media (min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .proof__grid{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .app-gallery{grid-auto-columns:minmax(210px,42%)}
}
@media (min-width:880px){
  .about{grid-template-columns:1.5fr 1fr; gap:44px}
  .hero{padding:72px 0 64px}
  .hero__grid{grid-template-columns:1fr auto; gap:56px}
  .portrait{width:250px; margin:0}
  .section{padding:84px 0}
  .steps{grid-template-columns:repeat(4,1fr)}
  .grid--three{grid-template-columns:repeat(3,1fr)}
  .app-feature{grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr)}
  .app-feature__copy{padding:32px}
  .app-gallery-panel{padding:26px 0 14px; border-top:0; border-left:1px solid var(--border)}
  .app-gallery{grid-auto-columns:clamp(220px,34%,258px); padding-left:26px; padding-right:26px}
  .app-gallery-meta{padding-left:26px; padding-right:26px}
}
@media (min-width:640px){
  .offers{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .site-nav__brand{font-size:.6875rem}
  .site-nav__links{gap:0}
  .site-nav__links a{padding:0 7px; font-size:.625rem}
  .projects:not(.projects--expanded) .project-card--extra{display:none}
  .projects__toggle{display:inline-flex}
  .lightbox{padding:10px}
  .lightbox__dialog{
    height:96vh; grid-template-columns:44px minmax(0,1fr) 44px; gap:6px;
  }
  .lightbox__image{max-height:calc(96vh - 76px)}
  .lightbox__close{top:6px; right:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  a.card:hover,a.card:focus-visible{transform:none}
}

/* ---------- project pages ---------- */
.crumb{font-size:.8125rem; color:var(--muted); margin-bottom:10px}
.crumb a{color:var(--sub); text-decoration:none; border-bottom:1px solid var(--border-strong)}
.crumb a:hover,.crumb a:focus-visible{color:var(--accent); border-color:var(--accent)}

.proj-head{padding:44px 0 8px}
.proj-head h1{font-size:clamp(1.65rem,4.5vw,2.4rem); letter-spacing:-.02em; margin:0 0 12px}
.proj-head .lede{font-size:1.0625rem; color:var(--sub); max-width:60ch; margin:0}
.proj-head .hero__tags{margin-top:18px}

.proj-meta{
  display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px;
  padding:18px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
}
.proj-meta div{font-size:.875rem; color:var(--sub)}
.proj-meta dt{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.proj-meta dd{margin:0; color:var(--text); font-size:.875rem}

.prose{max-width:64ch}
.prose h2{font-size:1.25rem; margin:36px 0 12px; color:var(--text-strong)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:.9375rem; color:var(--sub); margin:0 0 14px; line-height:1.65}
.prose ol,.prose ul{margin:0 0 14px; padding-left:0; list-style:none; display:grid; gap:12px}
.prose li{
  position:relative; padding-left:24px; font-size:.9375rem; color:var(--sub); line-height:1.6;
}
.prose ol{counter-reset:s}
.prose ol li::before{
  counter-increment:s; content:counter(s); position:absolute; left:0; top:1px;
  font-size:.6875rem; font-weight:700; color:var(--accent);
  width:17px; height:17px; border-radius:50%; background:var(--accent-soft);
  display:grid; place-items:center;
}
.prose ul li::before{
  content:""; position:absolute; left:5px; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
}

/* The "what this is built with" box — the point of each page. */
.built{
  margin:30px 0; padding:22px; border-radius:var(--r-lg);
  background:var(--accent-soft); border:1px solid #cfc6f5;
}
.built h2{font-size:1.0625rem; margin:0 0 6px; color:var(--text-strong)}
.built__note{font-size:.8125rem; color:var(--muted); margin:0 0 16px}
.built dl{margin:0; display:grid; gap:14px}
.built dt{font-weight:700; color:var(--text-strong); font-size:.9375rem; margin-bottom:3px}
.built dd{margin:0; font-size:.875rem; color:var(--sub); line-height:1.6}

.shots{display:grid; grid-template-columns:1fr; gap:14px; margin:26px 0}
.shot{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 8px 24px -22px rgba(15,23,42,.4);
}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{font-size:.8125rem; color:var(--muted); padding:10px 14px}

.proj-note{
  margin:26px 0; padding:14px 18px; font-size:.875rem; color:var(--text);
  background:var(--teal-soft); border:1px solid #99f6e4; border-radius:var(--r-md);
}
.proj-nav{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
}

/* Landing-page grouping for the project lists. */
.group-head{margin:0 0 6px; font-size:1.125rem; color:var(--text-strong)}
.group-note{margin:0 0 18px; font-size:.875rem; color:var(--sub); max-width:62ch}
.group + .group{margin-top:44px}

@media (min-width:640px){
  .proj-meta{grid-template-columns:repeat(2,1fr); gap:16px 24px}
  .shots{grid-template-columns:1fr 1fr}
  .built dl{grid-template-columns:1fr 1fr; gap:16px 26px}
}
@media (min-width:900px){
  .proj-meta{grid-template-columns:repeat(4,1fr)}
}
.proj-nav__right{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.card__preview--none{
  display:grid; place-items:center; padding:28px 22px; min-height:150px;
  background:linear-gradient(140deg,var(--accent-soft),var(--blue-soft));
  border-bottom:1px solid var(--border);
}
.card__preview--none p{
  margin:0; font-size:.8125rem; color:var(--sub); text-align:center; max-width:32ch;
}
.card__preview--none svg{color:var(--accent); margin-bottom:10px}

/* Phone screenshots are tall and narrow, so they tile rather than sit in a row. */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0}
.gallery figure{
  margin:0; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
}
.gallery img{display:block; width:100%; height:auto}
.gallery figcaption{font-size:.75rem; color:var(--muted); padding:8px 10px; line-height:1.4}
.gallery__note{font-size:.875rem; color:var(--sub); margin:26px 0 0; max-width:60ch}
@media (min-width:640px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (min-width:980px){ .gallery{grid-template-columns:repeat(5,1fr); gap:14px} }

/* Landing list: the product on the left, three scannable lines, click in for more. */
.plist{display:grid; gap:12px}
.pitem{
  display:grid; grid-template-columns:1fr; gap:16px; padding:16px; text-decoration:none;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 8px 24px -22px rgba(15,23,42,.4);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
a.pitem:hover,a.pitem:focus-visible{
  transform:translateY(-2px); border-color:var(--accent);
  box-shadow:0 14px 30px -20px rgba(15,23,42,.5);
}
.pitem__thumb{
  border-radius:var(--r-md); overflow:hidden; background:var(--surface-alt);
  border:1px solid var(--border); aspect-ratio:16/10;
}
.pitem__thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.pitem__thumb--none{
  display:grid; place-items:center; color:var(--accent);
  background:linear-gradient(140deg,var(--accent-soft),var(--blue-soft));
}
.pitem h3{font-size:1.0625rem; margin:0}
.pitem__host{font-family:var(--mono); font-size:.6875rem; color:var(--muted); margin-top:3px}
.pitem__lines{display:grid; gap:7px; margin-top:12px}
.pitem__lines div{font-size:.875rem; color:var(--sub); line-height:1.5}
.pitem__k{
  display:block; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1px;
}
.pitem__more{
  margin-top:12px; font-size:.8125rem; color:var(--accent); font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
a.pitem:hover .pitem__more span,a.pitem:focus-visible .pitem__more span{text-decoration:underline}
@media (min-width:720px){
  .pitem{grid-template-columns:200px 1fr; align-items:start}
  .pitem__thumb{aspect-ratio:4/3}
}