/* Aisah portfolio — monochrome ink on math-grid paper, with accent themes */
:root {
  --ink:#1b1b1b; --ink-soft:#4a4a4a; --ink-faint:#8a8a8a;
  --paper:#fbfbf8; --grid-minor:#e7e7e1; --grid-major:#d7d7cf;
  --line:#e2e2db; --card:#fff;
  --accent:#1b1b1b; --on-accent:#fbfbf8;
  --maxw:880px; --r:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18);
}
body.accent-blue { --accent:#1f4ed8; --on-accent:#fff; }
body.accent-teal { --accent:#0e9b94; --on-accent:#fff; }
body.accent-warm { --accent:#c2632a; --on-accent:#fff; }

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 60%,rgba(120,120,110,.06) 100%); }
main { position:relative; z-index:1; transition:opacity .3s ease; }
main[aria-busy="true"] { opacity:0; }

h1,h2,h3 { font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.1; }
a { color:inherit; }
.annotation { font-family:"Caveat",cursive; color:var(--ink-soft); font-size:1.25rem; }

.lang-toggle {
  position:fixed; top:18px; right:18px; z-index:50; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
  font-family:"Inter",sans-serif; font-weight:600; font-size:.82rem; cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.lang-toggle:hover { transform:rotate(-8deg) scale(1.06); background:var(--ink); color:var(--paper); }

.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px 24px 40px; }
.hero-inner { max-width:var(--maxw); width:100%; display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:center; }
.hero-photo { position:relative; justify-self:center; }
.photo-ring { width:300px; height:300px; border-radius:50%; display:grid; place-items:center; position:relative; }
.photo-ring::before,.photo-ring::after { content:""; position:absolute; inset:-14px; border-radius:50%; border:2px solid var(--accent); }
.photo-ring::after { inset:-20px; border-width:1px; border-color:var(--ink-faint); opacity:.5; }
.photo-ring img { width:300px; height:300px; border-radius:50%; object-fit:cover; background:#ececec; box-shadow:var(--shadow); }
.annotation--photo { position:absolute; top:-34px; right:-28px; transform:rotate(-8deg); white-space:nowrap; z-index:2; }

.eyebrow { font-family:"Caveat",cursive; font-size:1.5rem; color:var(--ink-soft); margin-bottom:2px; }
.name { font-size:clamp(2.6rem,7vw,4.4rem); letter-spacing:-.01em; margin-bottom:10px; }
.role { font-size:1.05rem; font-weight:600; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); display:inline-block; }
.lede { color:var(--ink-soft); max-width:42ch; margin-bottom:26px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none; border:1.5px solid var(--accent); cursor:pointer; transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; }
.btn--primary { background:var(--accent); color:var(--on-accent); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover { background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn--big { padding:15px 30px; font-size:1.02rem; margin-top:8px; }

.section { max-width:var(--maxw); margin:0 auto; padding:72px 24px; }
.section-label { font-family:"Caveat",cursive; font-size:1.3rem; color:var(--ink-faint); display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.section-label span:first-child { font-family:"Inter",sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.12em; color:var(--accent); border:1.5px solid var(--accent); border-radius:999px; padding:2px 9px; }
.section-title { font-size:clamp(1.7rem,4vw,2.5rem); margin-bottom:22px; }
.prose { color:var(--ink-soft); max-width:62ch; font-size:1.04rem; white-space:pre-line; }

.timeline { display:grid; gap:18px; }
.t-item,.edu-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow); position:relative; }
.t-item { padding-left:28px; }
.t-item::before { content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; background:var(--accent); border-radius:3px; }
.t-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.t-head h3 { font-size:1.18rem; }
.t-date { font-size:.85rem; font-weight:600; color:var(--ink-faint); white-space:nowrap; font-family:"Inter",sans-serif; }
.t-item p,.edu-card p { color:var(--ink-soft); font-size:1rem; white-space:pre-line; }
.edu-school { font-weight:600; color:var(--ink)!important; margin-bottom:8px; }

.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.skill-group h4 { font-family:"Inter",sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.chips li { border:1.5px solid var(--ink); border-radius:999px; padding:6px 13px; font-size:.9rem; font-weight:500; background:var(--paper); transition:background .18s,color .18s; }
.chips li:hover { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

.section--contact { padding-bottom:40px; }
.contact-list { list-style:none; margin:22px 0 28px; display:grid; gap:2px; max-width:520px; }
.contact-list li { display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px dashed var(--line); }
.c-label { font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.contact-list a { text-decoration:none; border-bottom:1px solid transparent; transition:border .18s; word-break:break-word; }
.contact-list a:hover { border-bottom-color:var(--accent); }

.footer { max-width:var(--maxw); margin:0 auto; padding:40px 24px 56px; display:flex; justify-content:center; align-items:center; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.9rem; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

@media (max-width:720px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; text-align:center; justify-items:center; }
  .lede { margin-inline:auto; } .hero-actions { justify-content:center; } .role { display:inline-block; }
  .photo-ring,.photo-ring img { width:230px; height:230px; }
  .skills-grid { grid-template-columns:1fr; gap:22px; }
  .contact-list li { grid-template-columns:1fr; gap:2px; }
  .t-head { flex-direction:column; gap:2px; }
}
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;} .reveal{opacity:1;transform:none;transition:none;} }