/* =======================================================================
   husseinhallak.com — shared design system. PHASE: FIRST DRAFT (2026-09-08).
   Extracted verbatim from the ratified first-screen index.html in this
   folder. No token is invented here; the additions below are LAYOUT
   components only, all built from the existing tokens.

   8px spacing scale: every margin/padding value is a multiple of 8.
   Grid: 12 columns, 24px gutter, 1200px max-width on .wrap; border-box
   with 32px padding means content measures 1136px, not 1200px.
   Type scale: 13 / 15 / 17 / 23 / 30 / 40 / 64.
   Measure: body text capped at 52-62ch. Body line-height 1.55, display 1.05.
   ===================================================================== */
:root{
  --u: 8px;
  --max: 1200px;
  --gutter: 24px;
  --margin: 32px;

  --f-micro: 13px;
  --f-small: 15px;
  --f-body: 17px;
  --f-lead: 23px;
  --f-h3: 30px;
  --f-h2: 40px;
  --f-h1: 64px;

  --ink: #14110F;
  --ink-soft: #4A443F;
  --ink-faint: #6E655C;
  --paper: #FAF8F5;
  --line: #E3DED7;
  --accent: #B4472B;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:var(--f-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}
a{color:inherit;}
/* Focus states — open item §9.4 of the reference, closed in this revision. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--margin);}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);}

/* ---- Nav --------------------------------------------------------------- */
.nav{border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.mark{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:700;font-size:var(--f-small);letter-spacing:.14em;text-decoration:none;
}
.nav ul{
  display:flex;gap:32px;list-style:none;margin:0;padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;
}
.nav a{text-decoration:none;color:var(--ink-soft);}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);}
.nav .talk{color:var(--ink);border:1px solid var(--ink);padding:8px 16px;border-radius:2px;}

/* ---- Shared type ------------------------------------------------------- */
.eyebrow{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);margin:0 0 24px;
}
h1{
  font-size:var(--f-h1);line-height:1.05;letter-spacing:-.02em;font-weight:400;
  margin:0 0 24px;max-width:16ch;
}
h1 .quiet{color:var(--ink-faint);}
.lead{font-size:var(--f-lead);line-height:1.45;color:var(--ink-soft);margin:0 0 40px;max-width:46ch;}
.prose p{margin:0 0 24px;color:var(--ink-soft);max-width:62ch;}
.prose p:last-child{margin-bottom:0;}

.btn{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;text-decoration:none;
  padding:16px 24px;border-radius:2px;display:inline-block;
}
.btn-solid{background:var(--ink);color:var(--paper);border:1px solid var(--ink);}
.btn-line{border:1px solid var(--line);color:var(--ink);}
.actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 40px;}

/* ---- Hero -------------------------------------------------------------- */
.hero{padding:80px 0 0;}
.hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);}
.hero-body{grid-column:1 / span 8;}

/* Inner-page hero: same grid, tighter bottom, no proof strip under it. */
.page-hero{padding:80px 0 64px;border-bottom:1px solid var(--line);}
.page-hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);}
.page-hero .hero-body{grid-column:1 / span 8;}
.page-hero .lead{margin-bottom:0;max-width:56ch;}
.page-hero .lead + .lead{margin-top:24px;}

/* ---- Proof strip -------------------------------------------------------- */
.proof{border-top:1px solid var(--line);margin-top:8px;padding:40px 0 32px;}
.proof .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:32px;}
.proof-lead{grid-column:1 / -1;font-size:var(--f-lead);line-height:1.4;color:var(--ink-soft);margin:0 0 8px;max-width:46ch;}
.stat{grid-column:span 3;}
.stat b{display:block;font-size:var(--f-h3);line-height:1.1;font-weight:400;letter-spacing:-.01em;margin:0 0 8px;}
.stat span{
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.1em;color:var(--ink-faint);line-height:1.4;
}
.brands{
  grid-column:1 / -1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);margin:0;padding-top:8px;
}

/* ---- Section chrome ---------------------------------------------------- */
.section{border-top:1px solid var(--line);padding:96px 0;}
.section > .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.sec-head{grid-column:1 / span 3;}
.sec-body{grid-column:5 / span 8;}
.sec-full{grid-column:1 / -1;}
.num{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--accent);margin:0 0 8px;
}
.sec-label{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);margin:0;
}
h2{font-size:var(--f-h2);line-height:1.1;font-weight:400;letter-spacing:-.015em;margin:0 0 24px;max-width:20ch;}
h2 .quiet{color:var(--ink-faint);display:block;}
h3{font-size:var(--f-h3);line-height:1.15;font-weight:400;letter-spacing:-.01em;margin:0 0 16px;max-width:24ch;}

/* ---- Two offer cards (home) -------------------------------------------- */
.ways{border-top:1px solid var(--line);padding:64px 0 96px;}
.ways .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.ways-label{
  grid-column:1 / -1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);margin:0;
}
.card{grid-column:span 6;display:flex;flex-direction:column;}
.card .kicker{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--accent);margin:0 0 16px;
}
.card h2{font-size:var(--f-h2);line-height:1.1;font-weight:400;letter-spacing:-.015em;margin:0 0 16px;}
.card p{margin:0 0 24px;color:var(--ink-soft);max-width:52ch;}
.card .foot{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:8px;}
.price{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-small);color:var(--ink-faint);
}

/* ---- Essay list -------------------------------------------------------- */
.essays{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.essay{grid-column:span 4;border-top:1px solid var(--line);padding-top:24px;}
.essay .tag{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--accent);margin:0 0 16px;
}
.essay h4{font-size:var(--f-lead);line-height:1.25;font-weight:400;margin:0 0 8px;max-width:22ch;}
.essay h4 a{text-decoration:none;}
.essay h4 a:hover{color:var(--accent);}
.essay p{margin:0;color:var(--ink-soft);font-size:var(--f-small);line-height:1.5;max-width:40ch;}
.essay .date{
  display:block;margin-top:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.1em;color:var(--ink-faint);
}

/* ---- Book -------------------------------------------------------------- */
.bookcover{
  grid-column:1 / span 4;
  aspect-ratio:2 / 3;
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:32px;
}
.bookcover .t{font-size:var(--f-h3);line-height:1.15;margin:0;}
.bookcover .b{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;margin:0;
}
.book-body{grid-column:6 / span 7;}
.page-hero .book-hero-body{grid-column:6 / span 7;}

/* ---- Story ------------------------------------------------------------- */
.story-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:32px;padding-top:8px;}
.story-stats .stat{grid-column:span 3;}

/* ---- Newsletter -------------------------------------------------------- */
.news{border-top:1px solid var(--line);background:var(--ink);color:var(--paper);padding:96px 0;}
.news .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:32px;}
.news-body{grid-column:1 / span 6;}
.news h2{margin:0 0 16px;}
.news p{margin:0;color:var(--paper);max-width:46ch;}
.news-form{grid-column:8 / span 5;align-self:end;display:flex;gap:8px;flex-wrap:wrap;}
.news-form input{
  flex:1 1 220px;background:transparent;border:0;border-bottom:1px solid var(--paper);
  color:var(--paper);font-family:inherit;font-size:var(--f-body);padding:16px 0;
}
.news-form input::placeholder{color:var(--paper);opacity:.6;}
.news-form button{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;
  background:var(--paper);color:var(--ink);border:0;border-radius:2px;
  padding:16px 24px;cursor:pointer;
}

/* ---- Closing CTA ------------------------------------------------------- */
.closer{border-top:1px solid var(--line);padding:96px 0;}
.closer .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:24px;}
.closer-body{grid-column:1 / span 7;}
.closer h2{margin-bottom:16px;}
.closer p{color:var(--ink-soft);margin:0 0 32px;max-width:52ch;}

/* ---- Footer ------------------------------------------------------------ */
.foot-site{border-top:1px solid var(--line);padding:64px 0 48px;}
.foot-site .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:32px;}
.foot-id{grid-column:1 / span 4;}
.foot-id .name{font-size:var(--f-lead);margin:0 0 8px;}
.foot-id .tag,.foot-site .legal p,.foot-nav a{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--ink-faint);
}
.foot-id .tag{margin:0 0 16px;}
.foot-social{display:flex;gap:16px;}
.foot-social a{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-small);color:var(--ink-soft);
}
.foot-nav{grid-column:6 / span 7;display:flex;flex-wrap:wrap;gap:16px 32px;align-content:start;}
.foot-nav a{text-decoration:none;letter-spacing:.1em;}
.foot-nav a:hover{color:var(--ink);}
.legal{grid-column:1 / -1;display:flex;gap:24px;border-top:1px solid var(--line);padding-top:24px;}
.legal p{margin:0;}

/* ---- Detail blocks (inner pages) --------------------------------------- */
.detail{margin:0 0 40px;}
.detail:last-child{margin-bottom:0;}
.detail .h{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);margin:0 0 16px;
}
.detail ul{list-style:none;margin:0;padding:0;}
.detail li{
  border-top:1px solid var(--line);padding:16px 0;color:var(--ink-soft);max-width:62ch;
}
.detail li:first-child{border-top:0;padding-top:0;}
.promise{border:1px solid var(--line);padding:24px;margin:0 0 32px;max-width:62ch;}
.promise p{margin:0;color:var(--ink-soft);}
.promise strong{color:var(--ink);font-weight:400;}
.pricerow{display:flex;gap:48px;flex-wrap:wrap;margin:0 0 32px;}
.pricerow div span{
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--ink-faint);margin:0 0 8px;
}
.pricerow div b{font-size:var(--f-h3);font-weight:400;letter-spacing:-.01em;}

/* Two-column list of talks / appearances */
.rows{grid-column:1 / -1;}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);
  border-top:1px solid var(--line);padding:24px 0;}
.row .when{
  grid-column:1 / span 2;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--ink-faint);
}
.row .what{grid-column:3 / span 10;}
.row .what p{margin:0 0 8px;color:var(--ink-soft);max-width:62ch;}
.row .what p:last-child{margin-bottom:0;}
.row .what a{color:var(--ink);}

/* Credential / recognition columns */
.cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.col{grid-column:span 4;}
.col h4{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);
  margin:0 0 16px;font-weight:400;
}
.col ul{list-style:none;margin:0;padding:0;}
.col li{border-top:1px solid var(--line);padding:16px 0;color:var(--ink-soft);font-size:var(--f-small);}
.col li:first-child{border-top:0;}
.col li b{font-weight:400;color:var(--ink);display:block;}

/* Topic cards (speaking) */
.topics{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.topic{grid-column:span 6;border-top:1px solid var(--line);padding-top:24px;}
.topic .tag{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--accent);margin:0 0 16px;
}
.topic h3{font-size:var(--f-lead);line-height:1.25;margin:0 0 8px;max-width:26ch;}
.topic p{margin:0;color:var(--ink-soft);font-size:var(--f-small);line-height:1.5;max-width:48ch;}

/* Chapter/idea list (book page) */
.ideas{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.idea{grid-column:span 6;border-top:1px solid var(--line);padding-top:24px;}
.idea h4{font-size:var(--f-lead);line-height:1.25;font-weight:400;margin:0 0 8px;max-width:26ch;}
.idea p{margin:0;color:var(--ink-soft);max-width:48ch;}

/* ---- Responsive: single column at 375 ---------------------------------- */
@media (max-width: 900px){
  :root{
    --margin:24px;
    --f-h1:40px;
    --f-h2:30px;
    --f-h3:23px;
    --f-lead:19px;
    --f-body:17px;
  }
  .nav ul{display:none;}
  .nav .talk{display:inline-block;}
  .nav .wrap{height:64px;}
  .hero{padding:48px 0 0;}
  .hero-body{grid-column:1 / -1;}
  h1{max-width:none;margin-bottom:16px;}
  h1 .quiet{display:block;}
  .lead{margin-bottom:32px;}
  .actions{margin-bottom:32px;}
  .btn{display:block;width:100%;text-align:center;}
  .proof{padding:32px 0 24px;}
  .stat{grid-column:span 6;}
  .ways{padding:40px 0 56px;}
  .card{grid-column:1 / -1;}
  .card .foot{flex-direction:column;align-items:stretch;gap:8px;}
  .price{text-align:center;}

  .page-hero{padding:48px 0 40px;}
  .page-hero .hero-body{grid-column:1 / -1;}
  .section{padding:56px 0;}
  .sec-head,.sec-body,.book-body,.page-hero .book-hero-body,.bookcover,.news-body,.news-form,
  .closer-body,.foot-id,.foot-nav{grid-column:1 / -1;}
  .sec-head{margin-bottom:-16px;}
  .essay,.topic,.idea,.col{grid-column:1 / -1;}
  .story-stats .stat{grid-column:span 6;}
  .bookcover{aspect-ratio:auto;}
  .news{padding:56px 0;}
  .news-form{align-self:auto;}
  .news-form button{width:100%;}
  .closer{padding:56px 0;}
  .row{padding:16px 0;}
  .row .when{grid-column:1 / -1;margin-bottom:8px;}
  .row .what{grid-column:1 / -1;}
  .pricerow{gap:24px;}
  .legal{flex-direction:column;gap:8px;}
  .foot-site{padding:40px 0 32px;}
}

/* ---- Contact form ------------------------------------------------------ */
/* Layout only. Type scale, colours and the 8px rhythm are the tokens above. */
.form{grid-column:1 / span 7;}
.form-aside{grid-column:9 / span 4;}
.field{margin:0 0 32px;}
.field label{
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.18em;color:var(--ink-faint);margin:0 0 8px;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;color:var(--ink);font-family:inherit;font-size:var(--f-body);
  line-height:1.55;padding:8px 0 16px;
}
.field textarea{min-height:160px;resize:vertical;}
.field select{appearance:none;-webkit-appearance:none;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);}
button.btn{cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}
.form-aside p{margin:0 0 24px;color:var(--ink-soft);}
.form-aside ul{list-style:none;margin:0;padding:0;}
.form-aside li{border-top:1px solid var(--line);padding:16px 0;}
.form-aside li:first-child{border-top:0;padding-top:0;}
.form-aside a{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;text-decoration:none;color:var(--ink);
}
.form-aside a:hover{color:var(--accent);}

/* ---- Proof page: quotes, alumni, places -------------------------------- */
.kick{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.14em;color:var(--accent);margin:0 0 8px;
}
.quotes{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:40px;}
.quote{grid-column:span 6;border-top:1px solid var(--line);padding-top:24px;}
.quote blockquote{margin:0 0 16px;color:var(--ink-soft);max-width:48ch;}
.quote .who{margin:0;color:var(--ink);}
.quote .role{
  margin:8px 0 0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--f-micro);letter-spacing:.1em;color:var(--ink-faint);
}
.place{color:var(--ink);}
.note{color:var(--ink-faint);font-size:var(--f-small);margin:32px 0 0;max-width:62ch;}

@media (max-width: 900px){
  .form,.form-aside{grid-column:1 / -1;}
  .quote{grid-column:1 / -1;}
  .field textarea{min-height:128px;}
}

.ideas > .note{grid-column:1 / -1;}