:root{
  /* Parchment + ink */
  --bg: #efe3c7;           /* aged parchment */
  --bg2:#e6d6b4;           /* deeper parchment */
  --panel: rgba(255,255,255,.38);
  --panel2: rgba(255,255,255,.55);

  --ink: #1d1a14;          /* soot ink */
  --ink2:#2b241b;
  --muted:#4a4033;         /* faded ink */
  --faint:#6a5c49;

  --stroke:#7a6a55;        /* sepia linework */
  --stroke2:#a89474;

  /* Pigments (muted, natural dyes) */
  --accent:#2f6f6b;        /* verdigris teal */
  --accent2:#8b2d2a;       /* cochineal red */
  --gold:#b3872a;          /* old gold */
  --good:#2d6b2f;

  --shadow: 0 18px 55px rgba(31,24,14,.20);
  --radius: 16px;
  --radius2: 22px;
  --container: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  line-height:1.55;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;

  /* parchment texture illusion (no images needed) */
  background:
    radial-gradient(1100px 700px at 18% 12%, rgba(47,111,107,.10), transparent 60%),
    radial-gradient(900px 600px at 78% 22%, rgba(139,45,42,.08), transparent 58%),
    radial-gradient(1100px 800px at 50% 95%, rgba(179,135,42,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit}
.container{width:min(var(--container), calc(100% - 32px)); margin-inline:auto;}

.skip-link{
  position:absolute; left:-999px; top:0;
  padding:10px 14px; background:#fff; color:#111; border-radius:10px;
}
.skip-link:focus{left:12px; top:12px}

/* Topbar as “header band” */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(239,227,199,.86);
  border-bottom: 2px solid rgba(122,106,85,.65);
  backdrop-filter: blur(6px);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; min-width:210px;
}
.brand__mark{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(179,135,42,.20));
  border: 2px solid rgba(122,106,85,.7);
  box-shadow: 0 10px 22px rgba(31,24,14,.18);
}
.brand__name{display:block; font-weight:800; letter-spacing:.2px}
.brand__tag{display:block; font-size:.86rem; color:var(--muted); margin-top:2px}

.nav{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  color:var(--muted);
}
.nav a:hover{
  background: rgba(255,255,255,.35);
  color:var(--ink);
  outline: 1px solid rgba(122,106,85,.45);
}

/* Buttons = wax seal / ink-stamped */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  border: 2px solid rgba(122,106,85,.7);
  text-decoration:none;
  font-weight:800;
  box-shadow: 0 12px 28px rgba(31,24,14,.16);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn--ghost{
  background: rgba(255,255,255,.22);
  border: 2px dashed rgba(122,106,85,.65);
  box-shadow:none;
}
.btn--small{padding:10px 12px; font-weight:800}

/* Hero */
.hero{padding: 36px 0 10px;}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:start;
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border: 2px solid rgba(122,106,85,.55);
  background: rgba(255,255,255,.22);
  color:var(--muted);
  width: fit-content;
  margin:0 0 14px;
}

h1{
  margin:0 0 12px;
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height:1.06;
  letter-spacing:-.02em;
}
.accent{
  color: var(--accent2);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(139,45,42,.35);
  text-underline-offset: 6px;
}
.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size: clamp(1.02rem, 1.05vw, 1.15rem);
  max-width: 62ch;
}

.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 18px}
.hero__stats{display:flex; gap:10px; flex-wrap:wrap;}

.stat{
  flex: 1 1 160px;
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(122,106,85,.55);
}
.stat__k{font-size: 1.55rem; font-weight: 900;}
.stat__v{color:var(--muted); font-size:.92rem}

/* Cards = folio panels */
.card{
  background: rgba(255,255,255,.30);
  border: 2px solid rgba(122,106,85,.65);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card h3{margin:0 0 8px; letter-spacing:-.01em}
.card p{margin:0 0 10px; color:var(--muted)}
.card strong{color:var(--ink)}

.hero__card{display:flex; flex-direction:column; gap:12px}

.media-card{padding:0; overflow:hidden;}
.media-card__art{
  position:relative;
  height: 170px;
  background:
    radial-gradient(220px 160px at 20% 25%, rgba(47,111,107,.18), transparent 60%),
    radial-gradient(260px 200px at 82% 35%, rgba(139,45,42,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.10));
  border-bottom: 2px solid rgba(122,106,85,.65);
}
.media-card__body{padding:16px}
.media-card__body h2{margin:0 0 6px; font-size:1.08rem}

/* “Ink illustration” blobs */
.blob{position:absolute; border-radius:999px; opacity:.9; border:2px solid rgba(122,106,85,.35);}
.blob--1{width:160px;height:110px; left:22px; top:24px; background: rgba(47,111,107,.12)}
.blob--2{width:190px;height:130px; right:20px; top:34px; background: rgba(139,45,42,.10)}
.sun{
  position:absolute; width:56px;height:56px; border-radius:999px;
  left:52%; top:28px; transform:translateX(-50%);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(179,135,42,.22));
  border:2px solid rgba(122,106,85,.45);
}
.wave{
  position:absolute; left:-10%; right:-10%;
  height:34px; border-radius:999px;
  border:2px solid rgba(122,106,85,.25);
  background: rgba(255,255,255,.12);
  bottom: 18px;
}
.wave--2{bottom: 6px; opacity:.85; transform: rotate(-1deg)}
.wave--3{bottom: -6px; opacity:.65; transform: rotate(1deg)}

.notice{
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 2px solid rgba(47,111,107,.35);
  background: rgba(47,111,107,.10);
}

/* Sections */
.section{padding: 44px 0}
.section--alt{
  background: rgba(255,255,255,.12);
  border-top: 2px solid rgba(122,106,85,.35);
  border-bottom: 2px solid rgba(122,106,85,.35);
}
.section__head{margin-bottom:16px}
.section__head h2{
  margin:0 0 6px;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing:-.02em;
}
.section__head p{margin:0; color:var(--muted)}

/* Grid helpers */
.grid{display:grid; gap: 14px;}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}

/* Lists */
.bullets{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.bullets li{margin:6px 0}

.dl{margin:0; display:grid; gap: 12px;}
.dl dt{font-weight:900}
.dl dd{margin:4px 0 0; color:var(--muted)}

/* Chips = small marginalia tags */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  font-size: .82rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(122,106,85,.45);
  background: rgba(255,255,255,.20);
  color: var(--muted);
}

/* Map */
.map{
  position:relative;
  margin-top: 10px;
  height: 220px;
  border-radius: 18px;
  border: 2px solid rgba(122,106,85,.55);
  background:
    radial-gradient(700px 240px at 30% 20%, rgba(47,111,107,.12), transparent 60%),
    radial-gradient(600px 260px at 70% 70%, rgba(139,45,42,.10), transparent 65%),
    rgba(255,255,255,.18);
  overflow:hidden;
}
.map__island{
  position:absolute; inset: 22px 40px 30px 34px;
  border-radius: 46% 54% 48% 52% / 54% 44% 56% 46%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(122,106,85,.35);
}
.map__pin{
  position:absolute; display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 2px solid rgba(122,106,85,.45);
  background: rgba(239,227,199,.85);
  color: var(--ink);
  font-size: .84rem;
}
.map__pin::before{content:"✶";}
.map__pin--1{left: 14%; top: 28%}
.map__pin--2{left: 44%; top: 55%}
.map__pin--3{left: 62%; top: 22%}

/* Bios */
.bio__top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.avatar{
  width:200px;height:200px; display:grid;place-items:center;
  border-radius: 14px; font-weight: 900;
  background: rgba(47,111,107,.15);
  border: 2px solid rgba(122,106,85,.55);
}
.avatar--sunny{background: rgba(139,45,42,.12);}
.bio__name{margin:0}
.bio__role{margin:2px 0 0; color:var(--muted); font-size:.93rem}
.bio__links{display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 10px}

/* Plan */
.steps{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.steps li{margin: 8px 0}

.linkbox{
  margin-top: 12px;
  border-radius: 16px;
  overflow:hidden;
  border: 2px solid rgba(122,106,85,.45);
  background: rgba(255,255,255,.16);
}
.linkbox__row{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-top: 2px solid rgba(122,106,85,.18);
}
.linkbox__row:first-child{border-top:none}
.linkbox__label{color:var(--muted); font-size:.9rem}
.linkbox__code{
  color: var(--ink);
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(122,106,85,.25);
  padding: 6px 8px;
  border-radius: 12px;
  max-width: 58%;
  overflow:auto;
}

/* Footer */
.footer{
  border-top: 2px solid rgba(122,106,85,.45);
  padding: 26px 0 34px;
  background: rgba(255,255,255,.10);
}
.footer__inner{display:flex; flex-direction:column; gap:6px;}
.muted{color:var(--muted)}
.tiny{color:var(--faint); font-size:.88rem}

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: .95em;
}

/* Responsive */
@media (max-width: 920px){
  .hero__grid{grid-template-columns: 1fr;}
  .brand{min-width:auto}
  .nav{gap:8px}
}
@media (max-width: 620px){
  .topbar__inner{align-items:flex-start}
  .nav{width:100%; justify-content:flex-start;}
  .grid--3{grid-template-columns: 1fr}
  .grid--2{grid-template-columns: 1fr}
  .linkbox__code{max-width: 62%}
}