/* ===========================================================
   ghafoorhussain.com — shared sheet styles
   Drawing-sheet visual language: bordered sheet, registration
   marks, title block, revision strip.
   =========================================================== */

:root{
  --ground:#E9EAE6;
  --sheet:#F8F9F6;
  --ink:#15191D;
  --body-ink:#2B3238;
  --grey:#6C747A;
  --rule:#C3C8C3;
  --rev:#B0332A;

  --display:"Barlow Condensed",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  padding:20px;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
}

/* --- sheet frame --- */
.sheet{
  position:relative;
  max-width:920px;
  margin:0 auto;
  background:var(--sheet);
  border:1px solid var(--rule);
  padding:6px;
}
.sheet-inner{
  border:2px solid var(--ink);
  padding:34px 26px 0;
}
.sheet--doc{max-width:780px;}

.reg{position:absolute;width:11px;height:11px;border:1px solid var(--ink);opacity:.5;}
.reg-tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.reg-tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.reg-bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.reg-br{bottom:-1px;right:-1px;border-left:0;border-top:0;}

/* --- shared type --- */
.eyebrow{
  font-family:var(--data);
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);
  margin:0 0 26px;
}

h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.9rem,12vw,6.2rem);
  line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}

.role{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.15rem,4.4vw,1.85rem);
  line-height:1.18;text-transform:uppercase;letter-spacing:.03em;
  margin:14px 0 0;max-width:22ch;
}
.role em{font-style:normal;color:var(--rev);}

.lede{
  margin:26px 0 0;max-width:56ch;
  font-size:1.03rem;color:var(--body-ink);
}

.mono-muted{font-family:var(--data);font-size:.92rem;color:var(--grey);}

/* --- title block --- */
.titleblock{
  margin-top:38px;
  border-top:2px solid var(--ink);
  border-left:1px solid var(--rule);
  display:grid;grid-template-columns:1fr;
}
.field{
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  padding:11px 13px;
}
.field dt{
  font-family:var(--data);
  font-size:10px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);margin:0 0 3px;
}
.field dd{font-family:var(--data);font-size:.83rem;line-height:1.45;margin:0;}

/* --- propositions (page centre of gravity) --- */
.position{
  margin-top:52px;
  border-top:2px solid var(--ink);
  padding-top:26px;
}
.position h2{
  font-family:var(--data);
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin:0 0 24px;
}
.prop-list{list-style:none;margin:0;padding:0;}
.prop{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.32rem,5.2vw,2.05rem);
  line-height:1.2;
  letter-spacing:.008em;
  color:var(--ink);
  max-width:34ch;
  padding:0 0 22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.prop:last-child{border-bottom:0;margin-bottom:0;padding-bottom:4px;}
.prop span{display:block;color:var(--grey);font-size:.62em;line-height:1.42;margin-top:9px;max-width:44ch;}

/* --- section headings --- */
.notes,.contact{
  margin-top:46px;
  border-top:1px solid var(--rule);
  padding-top:28px;
}
.notes h2,.contact h2{
  font-family:var(--data);
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin:0 0 20px;
}

/* --- notes index --- */
.note-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.note a{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  padding:16px 16px 17px;
  text-decoration:none;
  color:var(--ink);
  border-left:2px solid var(--rule);
  transition:border-color .15s ease,background .15s ease;
}
.note a:hover,.note a:focus-visible{
  border-left-color:var(--rev);
  background:#F1F2EF;
}
.note-date{
  font-family:var(--data);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);
}
.note-title{
  font-family:var(--display);
  font-weight:600;font-size:1.32rem;line-height:1.15;
  text-transform:uppercase;letter-spacing:.02em;
}
.note-blurb{font-size:.94rem;color:var(--body-ink);max-width:60ch;}

/* --- contact --- */
.contact-links{
  display:flex;flex-wrap:wrap;gap:12px 34px;
  margin:0;padding:0;list-style:none;
}
.contact-links a{
  font-family:var(--data);font-size:.92rem;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:border-color .15s ease,color .15s ease;
}
.contact-links a:hover,.contact-links a:focus-visible{color:var(--rev);border-color:var(--rev);}
a:focus-visible{outline:2px solid var(--rev);outline-offset:3px;}

/* --- revision strip --- */
.strip{
  margin-top:46px;
  border-top:2px solid var(--ink);
  display:grid;grid-template-columns:repeat(2,1fr);
  font-family:var(--data);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey);
}
.strip span{
  padding:9px 13px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.strip span:last-child{border-right:0;}

/* ===========================================================
   ARTICLE PAGES
   =========================================================== */

.backlink{
  font-family:var(--data);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);text-decoration:none;
  display:inline-block;margin-bottom:26px;
}
.backlink:hover,.backlink:focus-visible{color:var(--rev);}

.doc-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem,7.2vw,3.5rem);
  line-height:1.02;letter-spacing:.01em;
  text-transform:uppercase;
  margin:0;
}

.standfirst{
  margin:22px 0 0;
  font-size:1.1rem;line-height:1.55;
  color:var(--body-ink);
  max-width:54ch;
}

.doc-body{margin-top:14px;padding-bottom:8px;}

.doc-body h2{
  font-family:var(--display);
  font-weight:600;font-size:1.42rem;
  text-transform:uppercase;letter-spacing:.025em;
  margin:44px 0 12px;
  padding-top:16px;
  border-top:1px solid var(--rule);
}

.doc-body p{margin:0 0 18px;max-width:68ch;color:var(--body-ink);}

.doc-body ul{margin:0 0 20px;padding-left:0;list-style:none;max-width:68ch;}
.doc-body ul li{position:relative;padding-left:18px;margin-bottom:9px;color:var(--body-ink);}
.doc-body ul li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:7px;height:2px;background:var(--rev);
}

.doc-body strong{font-weight:500;color:var(--ink);}

/* datasheet-style callout for worked examples */
.worked{
  margin:28px 0 30px;
  border:1px solid var(--rule);
  border-left:2px solid var(--ink);
  background:#F1F2EF;
  padding:18px 20px;
  font-family:var(--data);
  font-size:.86rem;
  line-height:1.6;
  max-width:68ch;
}
.worked .worked-label{
  display:block;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px;
}
.worked p{margin:0 0 8px;font-family:var(--data);max-width:none;}
.worked p:last-child{margin:0;}

.footnote{
  margin-top:40px;
  border-top:1px solid var(--rule);
  padding-top:18px;
  font-size:.86rem;color:var(--grey);max-width:64ch;
}

/* --- responsive --- */
@media (min-width:640px){
  body{padding:34px;}
  .sheet-inner{padding:52px 44px 0;}
  .titleblock{grid-template-columns:repeat(2,1fr);}
  .strip{grid-template-columns:repeat(4,1fr);}
  .note a{grid-template-columns:88px 1fr;gap:0 20px;}
  .note-date{padding-top:.45em;}
  .note-blurb{grid-column:2;margin-top:5px;}
}
@media (min-width:900px){
  .titleblock{grid-template-columns:repeat(4,1fr);}
}

/* --- load sequence --- */
.rise{opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;}
.d1{animation-delay:.05s;} .d2{animation-delay:.16s;} .d3{animation-delay:.27s;}
.d4{animation-delay:.38s;} .d5{animation-delay:.49s;}
@keyframes rise{to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none;}
  *{transition:none !important;}
}

/* --- print --- */
@media print{
  body{background:#fff;padding:0;}
  .sheet{border:0;padding:0;}
  .reg{display:none;}
}