/* ---------------------------------------------------------------
   abizertyabji.com
   One stylesheet for the whole site. If you want to change a colour
   everywhere at once, change it in the :root block below.
   --------------------------------------------------------------- */

:root{
  --purple:        #4E2A84;  /* Northwestern purple - buttons, solid fills */
  --purple-mid:    #6b3fae;  /* hover state */
  --purple-light:  #b69ae0;  /* purple text on dark backgrounds (readable) */
  --ink:           #0b1220;  /* near-black page background */
  --paper:         #f7f5f0;  /* off-white text */
  --slate:         #8a93a3;  /* muted grey text */
  --line:          rgba(255,255,255,.14);
}

*{box-sizing:border-box;margin:0;padding:0}

/* The gradient is attachment:fixed, so it only ever paints the viewport.
   Both html and body carry the flat --ink colour underneath it, otherwise
   anything below the first screen falls through to white. */
html{
  scroll-behavior:smooth;
  background-color:var(--ink);
  min-height:100%;
}

body{
  background-color:var(--ink);
  background-image:
    radial-gradient(120% 90% at 50% -10%, #1a1630 0%, var(--ink) 55%, #060a12 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color:var(--paper);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:680px;margin:0 auto;padding:0 1.5rem}
.wrap-wide{width:100%;max-width:900px;margin:0 auto;padding:0 1.5rem}

/* --- the gift letter ------------------------------------------- */

.letter{
  background:rgba(0,0,0,.32);
  border-bottom:1px solid var(--line);
  padding:3rem 0 2.8rem;
}
.letter .label{
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--purple-light);
  font-weight:600;
  margin-bottom:1.1rem;
}
.letter p{
  font-size:1.03rem;
  color:#e4e1dc;
  margin-bottom:.9rem;
  max-width:60ch;
}
.letter p:last-child{margin-bottom:0}
.letter strong{color:#fff;font-weight:600}
.letter .sig{
  color:var(--slate);
  font-style:italic;
  margin-top:1.4rem;
}
.letter a{color:var(--purple-light)}

/* --- the card (home hero) -------------------------------------- */

main{flex:1;display:flex;align-items:center;justify-content:center;padding:4rem 0}
.card{text-align:center;width:100%}

.eyebrow{
  color:var(--purple-light);
  font-size:.73rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
/* The full name has to sit on a single line at every width, so the size is
   driven by viewport width rather than a fixed value. 7vw is the largest
   figure that still fits "Abizer "Beezer" Tyabji" at 320px without wrapping.
   If you lengthen the name, lower that number or the line will break. */
h1{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.35rem,7vw,4rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
  color:#fff;
  white-space:nowrap;
}
h1 .call{color:var(--purple-light);font-style:italic}

.rank{
  margin-top:1rem;
  font-size:.92rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate);
}
.rule{width:64px;height:2px;background:var(--purple);margin:2.2rem auto}
.roles{font-size:1.1rem;line-height:1.9;color:#dfe4ee}
.roles .dot{color:var(--purple-light);padding:0 .5rem}

/* --- buttons ---------------------------------------------------- */

.links{margin-top:2.6rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:.72rem 1.4rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--paper);
  text-decoration:none;
  font-size:.92rem;
  transition:border-color .18s, color .18s, background .18s;
}
.btn:hover{border-color:var(--purple-light);color:var(--purple-light)}
.btn.solid{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:600}
.btn.solid:hover{background:var(--purple-mid);border-color:var(--purple-mid);color:#fff}

/* --- interior pages -------------------------------------------- */

.pagehead{padding:3.4rem 0 2rem;border-bottom:1px solid var(--line)}
.pagehead h2{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.9rem,5vw,2.6rem);
  color:#fff;font-weight:600;letter-spacing:-.015em;line-height:1.15;
}
.pagehead .sub{color:var(--slate);margin-top:.7rem;font-size:1rem}

.backlink{
  display:inline-block;
  color:var(--purple-light);
  text-decoration:none;
  font-size:.88rem;
  letter-spacing:.04em;
  margin-bottom:1.6rem;
}
.backlink:hover{text-decoration:underline}

section{padding:2.8rem 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}

h3{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--purple-light);font-weight:600;margin-bottom:1.2rem;
}
h4{font-size:1.1rem;color:#fff;font-weight:600;margin-bottom:.3rem}

p{margin-bottom:1rem;color:#dfe4ee}
p:last-child{margin-bottom:0}
.lead{font-size:1.2rem;line-height:1.6;color:#f0eee9}
.muted{color:var(--slate);font-size:.94rem}

ul,ol{margin:0 0 1rem 1.3rem;color:#dfe4ee}
li{margin-bottom:.55rem}

a{color:var(--purple-light)}

/* --- the "example page" warning banner -------------------------- */

.samplenote{
  background:rgba(78,42,132,.28);
  border:1px solid rgba(182,154,224,.35);
  border-radius:8px;
  padding:1rem 1.2rem;
  margin:1.8rem 0;
  font-size:.93rem;
  color:#e8e2f5;
}
.samplenote strong{color:#fff}

/* --- option cards ----------------------------------------------- */

.options{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:.4rem}
.opt{
  display:block;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.4rem;
  text-decoration:none;
  color:inherit;
  transition:border-color .16s, transform .16s, background .16s;
}
.opt:hover{border-color:var(--purple-light);transform:translateY(-2px);background:rgba(255,255,255,.06)}
.opt h4{margin-bottom:.4rem}
.opt p{font-size:.92rem;color:var(--slate);margin:0}
.opt .go{color:var(--purple-light);font-size:.85rem;font-weight:600;margin-top:.8rem;display:inline-block}

/* --- résumé / timeline rows ------------------------------------- */

.row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:1.2rem;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}
.row:first-of-type{border-top:none}
.row .when{color:var(--slate);font-size:.88rem;letter-spacing:.04em;padding-top:.15rem}
.row .what h4{margin-bottom:.25rem}
.row .what p{font-size:.95rem;color:var(--slate);margin:0}

.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.tag{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.32rem .9rem;
  font-size:.84rem;
  color:#dfe4ee;
}

/* --- steps (takeover page) -------------------------------------- */

.step{
  border-left:2px solid var(--purple);
  padding:.2rem 0 .2rem 1.3rem;
  margin-bottom:2rem;
}
.step .n{
  display:inline-block;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple-light);font-weight:600;margin-bottom:.5rem;
}
.step h4{margin-bottom:.5rem}

.callout{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.1rem 1.3rem;
  margin:1.4rem 0;
}
.callout p{margin-bottom:.6rem}
.callout p:last-child{margin-bottom:0}

code{
  background:rgba(255,255,255,.09);
  border-radius:4px;
  padding:.14em .42em;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.9em;
  color:#f0eaff;
}
pre{
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1rem 1.2rem;
  overflow-x:auto;
  margin:1rem 0;
}
pre code{background:none;padding:0;font-size:.86rem;line-height:1.7;color:#e6dcff}

/* --- footer ------------------------------------------------------ */

footer{
  text-align:center;
  padding:2.4rem 1.5rem 3rem;
  color:var(--slate);
  font-size:.82rem;
  line-height:1.9;
  border-top:1px solid var(--line);
}
footer a{color:var(--slate)}
footer a:hover{color:var(--purple-light)}

/* --- small screens ----------------------------------------------- */

@media (max-width:560px){
  main{padding:2.5rem 0}
  .letter{padding:2.2rem 0 2rem}
  .row{grid-template-columns:1fr;gap:.3rem}
  .row .when{padding-top:0}
}