/* ===== Global color system (from your pages) ===== */
:root{
  --blue:#0f9cdb; --blue-2:#0b82c6; --fg:#1f2a37; --muted:#6b7785;
  --yellow:#feb30b; --red:#fc302d; --orange:#ff8c1a; --green:#75d060;
  --cyan:#55b5e2; --indigo:#2286d9; --violet:#0f9cdb; --etsy:#F1641E;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:
    radial-gradient(160px 120px at 80% 10%, rgba(15,156,219,.08), transparent 60%),
    radial-gradient(200px 160px at 12% 90%, rgba(117,208,96,.08), transparent 60%),
    #fff;
}
.wrap{max-width:980px;width:100%;margin:0 auto;padding:2rem 1.25rem;text-align:center;}
header img{width:min(360px,70vw);height:auto;display:block;margin:0 auto 1rem;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25));}
h1{font-size:clamp(1.9rem,4.2vw,3rem);margin:.25rem 0 .6rem;letter-spacing:.25px}
a{color:var(--blue)} a:hover{opacity:.9}
footer{margin-top:2.5rem;color:var(--muted);font-size:.92rem}
header .logo-link{display:block;text-decoration:none}

/* Buttons */
.btn{appearance:none;border:none;cursor:pointer;text-decoration:none;padding:.85rem 1.05rem;border-radius:14px;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.2px}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid color-mix(in oklab, var(--blue) 30%, #fff);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.btn.ghost:hover{transform:translateY(-1px)}

/* Bio block (shared) */
.bio{
  max-width:900px;margin:2rem auto 0;padding:1.1rem 1.25rem 1.25rem;
  display:grid;grid-template-columns:1fr;gap:1rem 1.25rem;align-items:center;
  background:#fff;border:1px solid color-mix(in oklab, var(--blue) 12%, #e9eef3);border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);
  text-align:left;font-family:"Spectral",ui-serif,Georgia,serif;color:color-mix(in oklab, var(--fg) 92%, #000);line-height:1.6;
}
.bio .photo{width:100%;height:auto;border-radius:16px;overflow:hidden;flex:0 0 auto;border:1px solid color-mix(in oklab, var(--blue) 22%, #fff);box-shadow:0 8px 24px rgba(0,0,0,.12);margin-bottom:.5rem}
.bio .photo img{width:100%;height:auto;display:block;object-position:center}
.bio p{margin:.25rem 0 .35rem}
.bio .links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.bio .links a{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;background:color-mix(in oklab, var(--blue) 10%, #fff);border:1px solid color-mix(in oklab, var(--blue) 22%, #fff);color:var(--blue);font-weight:600;text-decoration:none}
.bio .links a img{width:18px;height:18px;object-fit:contain;border-radius:3px;display:block}

/* Off-canvas right sidebar (shared) */
.nav-toggle{position:fixed;top:14px;right:14px;z-index:1001;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid color-mix(in oklab, var(--blue) 12%, #e9eef3);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08);cursor:pointer}
.nav-toggle:hover{filter:brightness(0.98)}
.nav-toggle:focus-visible{outline:3px solid color-mix(in oklab, var(--blue) 30%, #fff);outline-offset:2px}
.sidebar{position:fixed;top:0;right:0;height:100dvh;width:min(88vw,340px);background:#fff;border-left:1px solid color-mix(in oklab, var(--blue) 12%, #e9eef3);box-shadow:-12px 0 28px rgba(0,0,0,.14);transform:translateX(100%);transition:transform .28s ease;display:grid;grid-template-rows:auto 1fr;z-index:1002}
.sidebar.open{transform:translateX(0)}
.sidebar header{display:flex;align-items:center;justify-content:flex-end;margin:0;padding:.5rem .5rem;border-bottom:1px solid color-mix(in oklab, var(--blue) 10%, #e9eef3);position:sticky;top:0;background:#fff;z-index:1}
.sidebar .close{appearance:none;border:none;background:transparent;cursor:pointer;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
.sidebar .close:focus-visible{outline:3px solid color-mix(in oklab, var(--blue) 30%, #fff);outline-offset:2px}
.sidebar nav{padding:.5rem .9rem .7rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.15rem}
.sidebar nav a{display:block;padding:.5rem .6rem;border-radius:8px;text-decoration:none;color:var(--fg);border:1px solid transparent;font-weight:600;line-height:1.2;font-size:.98rem}
.sidebar nav a:hover{background:color-mix(in oklab, var(--blue) 10%, #fff);border-color:color-mix(in oklab, var(--blue) 18%, #fff)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s ease}
.backdrop.show{opacity:1;pointer-events:auto}
body.no-scroll{overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Page-specific hooks via body class ===== */
.index .pull-quote{max-width:760px;margin:1.25rem auto 1.75rem;padding:1rem 1.25rem 1.1rem;border-left:4px solid var(--blue);background:color-mix(in oklab, var(--blue) 8%, #fff);border-radius:12px;font-style:italic;color:color-mix(in oklab, var(--fg) 85%, #000)}
.index .pull-quote cite{display:block;margin-top:.35rem;color:var(--muted)}

/* === Index === */
.index .wrap > header{margin:0.42rem auto 1.75rem;}

.index p.lead{
  margin:.25rem auto 1.5rem;
  max-width:62ch;
  font-size:1.06rem;
  color:color-mix(in oklab, var(--fg) 60%, white);
}

.index .cta{
  display:flex;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1rem;
}

/* Etsy-style CTA button */
.index .btn.etsy{
  background:var(--etsy);
  color:#fff;
  border:1px solid color-mix(in oklab, var(--etsy) 80%, #000);
  border-radius:999px;
  box-shadow:0 2px 0 color-mix(in oklab, var(--etsy) 45%, #000);
}
.index .btn.etsy:hover{ filter:brightness(0.95); }
.index .btn.etsy:active{ transform:translateY(1px); box-shadow:0 1px 0 color-mix(in oklab, var(--etsy) 45%, #000); }
.index .btn.etsy:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--etsy) 25%, #fff),
             0 2px 0 color-mix(in oklab, var(--etsy) 45%, #000);
}

/* Feature cards */
.index .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin-top:2.25rem;
}
.index .card{
  background:#fff;
  border:1px solid color-mix(in oklab, var(--blue) 12%, #e9eef3);
  border-radius:18px;
  padding:1rem 1rem 1.1rem;
  text-align:left;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.index .card h3{ margin:.35rem 0 .35rem; font-size:1.06rem; }
.index .card p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.45; }

/* Portfolio promo box (home) */
.index .portfolio-promo{
  max-width:900px;
  margin:1.75rem auto 0;
}

.index .promo-card{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:1rem;
  align-items:center;
  padding:.9rem;
  text-decoration:none;
  color:var(--fg);
  background:#fff;
  border:1px solid color-mix(in oklab, var(--blue) 12%, #e9eef3);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, filter .15s ease;
}
.index .promo-card:hover{ transform:translateY(-1px); filter:brightness(.99); }
.index .promo-card:focus-visible{
  outline:3px solid color-mix(in oklab, var(--blue) 30%, #fff);
  outline-offset:2px;
}

.index .promo-media{
  width:140px;
  height:140px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid color-mix(in oklab, var(--blue) 20%, #fff);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.index .promo-media img{
  width:100%; height:100%;
  display:block; object-fit:cover; object-position:center;
}

.index .promo-copy h2{
  margin:.1rem 0 .25rem;
  font-size:1.25rem;
}
.index .promo-copy p{
  margin:0 0 .65rem;
  color:var(--muted);
  line-height:1.45;
}

/* visually style the span as a button inside the link */
.index .promo-copy .btn{
  background:transparent;
  color:var(--blue);
  border:1px solid color-mix(in oklab, var(--blue) 30%, #fff);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:.55rem .75rem;
  border-radius:14px;
}

@media (max-width:640px){
  .index .promo-card{ grid-template-columns:1fr; justify-items:center; }
  .index .promo-media{
    width:min(220px, 65vw); height:auto; aspect-ratio:1/1; margin:0 auto;
  }
}

/* Quote punctuation */
.index .pull-quote q{ quotes:"“" "”" "‘" "’"; }
.index .pull-quote q::before{ content:open-quote; }
.index .pull-quote q::after{ content:close-quote; }

/* Bio thumbnail: small rectangle on home only */
.index .bio{ grid-template-columns:1fr; }
.index .bio .photo{ width:132px; height:96px; }
.index .bio .photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:18% 50%;
}
/* Buttons in the bio */
.index .bio .more-about{
  /* base look (inherits .btn styles) */
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  margin:.25rem 0 .35rem;
  text-align:center;
}

/* Mobile-first (default): show only the inline button inside the text,
   hide the side button that is a direct child of .bio */
.index .bio > .more-about{ display:none; }            /* hide side button on phones */
.index .bio .more-about-inline{ display:inline-flex; }/* show inline button on phones */
.index .bio .more-about-inline + .links{ margin-top:1.1rem; } /* extra space before the 3 links */

/* wider screens */
@media (min-width: 720px){
  .index .bio{ grid-template-columns:1fr 180px; grid-template-rows:auto auto; }
  .index .bio .photo{ width:180px; height:120px; }
  .index .bio .photo{ grid-column:2; grid-row:1; }
  .index .bio > .more-about{ grid-column:2; grid-row:2; width:100%; display:inline-flex; }
  .index .bio .more-about-inline{ display:none; }
  .index .bio > div:not(.photo){ grid-column:1; grid-row:1 / span 2; }
}

/* phones: image above text */
@media (max-width: 640px){
  .index .bio{
    grid-template-columns:1fr;
    gap:.75rem;
    align-items:start;
  }
  .index .bio .photo{
    width:100%;
    height:auto;
    aspect-ratio:3 / 2;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(0,0,0,.10);
  }
  .index .bio .photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:18% 50%;
  }
  .index .bio .more-about-inline{ width:100%; }
  .index .bio .more-about-inline + .links{ margin-top:1.1rem; } /* extra space from the button */
}

.about .bio h3{margin:.5rem 0 .35rem;font-size:1.18rem;line-height:1.35;font-weight:600;letter-spacing:.2px}
.about .bio h3::after{content:"";display:block;width:56px;height:3px;margin:.25rem 0 .15rem;border-radius:3px;background:color-mix(in oklab, var(--blue) 80%, #fff)}

/* === About === */
.about header img{
  width:min(300px,60vw);
  margin:0 auto .75rem;
}

/* “Spoiler” pill under the H1 */
.about .name-spoiler{
  display:inline-block;
  margin:.15rem auto 1rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background:color-mix(in oklab, var(--blue) 10%, #fff);
  border:1px solid color-mix(in oklab, var(--blue) 22%, #fff);
  font-weight:700;
  color:var(--fg);
}

/* tiny hover from old file */
.about .bio .links a:hover{ opacity:.95; }

/* === Portfolio === */
.portfolio header img{
  width:min(300px,60vw);
  margin:0 auto .75rem;
}

/* Quiet preview grid */
.portfolio .tiles{
  display:grid;
  gap:.6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top:.5rem;
}
.portfolio .tile{
  padding:.8rem 1rem;
  border-radius:14px;
  border:1px dashed color-mix(in oklab, var(--blue) 18%, #e9eef3);
  background:color-mix(in oklab, white 92%, var(--blue) 8%);
  font-weight:600;
  text-align:center;
}
.portfolio .tile:hover{ filter:brightness(0.98) }

/* === Contact === */
.contact header img{
  width:min(300px,60vw);
  margin:0 auto .75rem;
}

.contact p.lead{
  margin:.25rem auto 1.5rem;
  max-width:62ch;
  font-size:1.06rem;
  color:color-mix(in oklab, var(--fg) 60%, white);
}

.contact .cta{
  display:flex;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.25rem;
}