/* House of Khadija public design system — intentionally lean: reusable primitives first. */
:root {
  --ink: #080808; --ink-soft: #0d0d0d; --paper: #f0efeb; --muted: #9a9995; --line: #292929; --line-strong: #3a3a3a;
  --max: 1180px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --section: clamp(5rem, 10vw, 9rem);
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; --sans: Inter, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; } html { scroll-behavior: smooth; padding-bottom:0; }
body { position:relative; isolation:isolate; overflow-x:hidden; margin:0; padding-bottom:0; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
body::after { content:""; position:absolute; z-index:0; width:clamp(620px,55vw,900px); aspect-ratio:1; right:clamp(-170px,-9vw,-90px); bottom:0; background:url('/assets/HoK%20Logomark.svg') center/contain no-repeat; opacity:.06; transform:rotate(-9deg); transform-origin:center; pointer-events:none; }
header, main, .site-footer { position:relative; z-index:1; }
a { color: inherit; text-decoration: none; } p { margin: 0; color: var(--muted); }
h1,h2,h3 { margin:0; font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.9; letter-spacing:-.035em; }
h1 { font-size:clamp(4.5rem,11vw,9.5rem); } h2 { font-size:clamp(3rem,6vw,5.8rem); } h3 { font-size:clamp(1.4rem,2.2vw,2rem); }
.shell { width:min(100% - (2 * var(--gutter)),var(--max)); margin-inline:auto; } .ruled { border-bottom:1px solid var(--line); } .section { padding-block:var(--section); }
.eyebrow,.micro,.number,.nav,.header-actions,.side-note { font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow { margin-bottom:1.4rem; color:#777; } .number { display:block; margin-bottom:2.1rem; color:var(--paper); } .micro { color:#747474; }
.lede { max-width:32rem; margin:2rem 0 2.2rem; font-size:clamp(1rem,1.5vw,1.18rem); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.button { display:inline-flex; min-height:3.15rem; align-items:center; justify-content:center; gap:2.8rem; padding:.8rem 1.3rem; border:1px solid var(--line-strong); font-size:.68rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase; transition:background .2s,color .2s,border-color .2s; }
.button:hover,.button:focus-visible { background:var(--paper); color:var(--ink); border-color:var(--paper); } .button-solid { background:var(--paper); color:var(--ink); border-color:var(--paper); } .button-solid:hover,.button-solid:focus-visible { background:transparent; color:var(--paper); }
.site-header { min-height:108px; display:grid; grid-template-columns:minmax(180px,1fr) auto auto; align-items:center; gap:0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; width:clamp(180px,18vw,245px); height:72px; overflow:hidden; line-height:0; } .brand-logo { display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.nav { justify-self:end; display:flex; gap:2.1rem; margin-right:2.1rem; } .nav a,.text-link { color:#aaa; transition:color .2s; } .nav a:hover,.text-link:hover { color:var(--paper); }
.header-actions { justify-self:end; display:flex; align-items:center; gap:1.8rem; }
.hero { min-height:720px; display:grid; grid-template-columns:.9fr 1.1fr; } .hero-copy { padding:clamp(5rem,9vw,8rem) 2rem clamp(5rem,9vw,8rem) 0; align-self:center; }
.hero-art { position:relative; min-height:620px; overflow:hidden; border-left:1px solid var(--line); background:radial-gradient(circle at 60% 48%,#1b1a18 0,#0d0d0d 42%,#080808 72%); }
.portal { position:absolute; left:25%; bottom:0; width:46%; height:78%; border:1px solid #3b3934; border-bottom:0; border-radius:48% 48% 0 0 / 24% 24% 0 0; background:linear-gradient(110deg,#111 0 48%,#292621 49% 51%,#111 52%); box-shadow:inset -50px 0 90px #060606; }
.portal::after { content:""; position:absolute; inset:22% 18% 0; background:linear-gradient(155deg,#22201c,#080808 68%); border-top:1px solid #444039; }
.art-note { position:absolute; width:9rem; font-size:.62rem; font-weight:700; letter-spacing:.24em; line-height:1.6; text-transform:uppercase; } .art-note-top { top:9%; right:4%; } .art-note-bottom { right:4%; bottom:9%; }
.focus-section { padding-block:clamp(5rem,8vw,7.5rem); overflow:hidden; }
.focus-head { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:2.2rem; }
.focus-head h2 { font-size:clamp(3.2rem,6vw,5.6rem); }
.focus-intro { max-width:35rem; margin-top:1.5rem; }
.carousel-controls { display:flex; align-items:center; gap:.45rem; padding-bottom:.35rem; }
.carousel-button { width:2.5rem; height:2.5rem; border:1px solid var(--line-strong); background:transparent; color:#aaa; font:inherit; cursor:pointer; transition:.2s; }
.carousel-button:hover,.carousel-button:focus-visible { color:var(--ink); background:var(--paper); border-color:var(--paper); }
.focus-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,calc((100% - 2.1rem)/4)); gap:.7rem; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.4rem; }
.focus-track::-webkit-scrollbar { display:none; }
.focus-card { min-width:0; scroll-snap-align:start; }
.focus-image { position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); margin-bottom:1.25rem; background:#111; }
.focus-image::before,.focus-image::after { content:""; position:absolute; inset:0; }
.focus-image::before { background:radial-gradient(circle at 50% 30%,#393939 0,transparent 28%),linear-gradient(150deg,#202020,#0b0b0b 58%,#181818); filter:grayscale(1); }
.focus-image.has-media::before { display:none; }
.focus-media { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.placeholder-02::before { background:linear-gradient(135deg,#0b0b0b 0 28%,#252525 29% 32%,#111 33% 60%,#303030 61% 64%,#090909 65%); }
.placeholder-03::before { background:radial-gradient(ellipse at 52% 42%,#343434 0 12%,#171717 13% 35%,#090909 36% 100%); }
.placeholder-04::before { background:linear-gradient(160deg,#141414,#303030 36%,#0a0a0a 37% 70%,#222 71%); }
.placeholder-05::before { background:radial-gradient(circle at 70% 28%,#444 0 8%,#171717 9% 28%,#090909 29% 100%); }
.placeholder-06::before { background:linear-gradient(25deg,#090909,#292929 48%,#0c0c0c 49%); }
.focus-image::after { z-index:1; background:linear-gradient(to top,rgba(0,0,0,.72),transparent 45%); }
.focus-image span { position:absolute; z-index:2; left:.65rem; bottom:.45rem; font-family:var(--display); font-size:2rem; font-weight:800; line-height:1; }
.focus-card .micro { margin-bottom:.7rem; }
.focus-card h3 { margin-bottom:.8rem; font-family:var(--sans); font-size:1rem; letter-spacing:.12em; line-height:1.25; }
.focus-card > p:last-child { font-size:.84rem; line-height:1.6; }
.focus-strip { display:grid; grid-template-columns:repeat(3,1fr); margin-top:4.5rem; border:1px solid var(--line); }
.focus-strip div { padding:1.25rem 1.35rem; border-right:1px solid var(--line); }
.focus-strip div:last-child { border-right:0; }
.focus-strip strong { display:block; margin-bottom:.35rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.focus-strip span { color:var(--muted); font-size:.8rem; }
.split-intro { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:end; margin-bottom:clamp(3.5rem,7vw,6rem); } .intro-copy { max-width:32rem; justify-self:end; } .intro-copy p:first-child { margin-bottom:1.5rem; font-size:1.02rem; }
.number-grid { display:grid; border:1px solid var(--line); } .number-grid-3 { grid-template-columns:repeat(3,1fr); } .number-grid-4 { grid-template-columns:repeat(4,1fr); }
.number-grid article { min-height:210px; padding:1.6rem; border-right:1px solid var(--line); } .number-grid article:last-child { border-right:0; } .number-grid h3 { margin-bottom:1rem; font-family:var(--sans); font-size:1rem; letter-spacing:.12em; } .number-grid p { font-size:.86rem; }
.spread { display:flex; align-items:end; justify-content:space-between; gap:3rem; margin-bottom:3rem; } .side-note { max-width:11rem; padding-bottom:.8rem; color:#777; line-height:1.7; }
.programme-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:.7rem; } .programme { border:1px solid var(--line); background:var(--ink-soft); } .programme-feature { min-height:500px; display:grid; grid-template-columns:1fr .8fr; overflow:hidden; }
.programme-copy { padding:clamp(2rem,4vw,3.5rem); position:relative; z-index:1; } .programme-copy h3 { margin:1rem 0 2rem; font-family:Georgia,"Times New Roman",serif; font-weight:400; text-transform:uppercase; } .programme-copy>p:not(.micro) { max-width:23rem; margin-bottom:2rem; }
.abstract-art { min-height:100%; border-left:1px solid var(--line); } .arch-art { background:radial-gradient(ellipse at 90% 70%,#37332e 0 8%,#171614 9% 23%,#0c0c0c 24% 100%); }
.programme-stack { display:grid; gap:.7rem; } .programme-compact { min-height:245px; padding:2rem; display:flex; align-items:end; justify-content:space-between; } .programme-compact h3 { margin:.8rem 0; font-family:Georgia,"Times New Roman",serif; font-weight:400; } .programme-compact p { max-width:18rem; font-size:.84rem; } .arrow { font-size:1.5rem; color:#aaa; }
.library-intro { align-items:start; } .library-intro .button { margin-top:1.6rem; } .library-grid article { min-height:260px; display:flex; flex-direction:column; justify-content:end; } .library-grid .number { margin-bottom:auto; }
.quote-section { padding-block:clamp(6rem,11vw,10rem); text-align:center; } .quote-ar { color:var(--paper); font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,5vw,4.5rem); } blockquote { margin:1.4rem 0 .8rem; color:#bbb; font-family:Georgia,"Times New Roman",serif; font-size:1.1rem; }
.join-section { padding-block:clamp(4rem,7vw,6rem); display:grid; grid-template-columns:.8fr 1.2fr; gap:5rem; align-items:end; } .join-section h2 { font-size:clamp(2.7rem,5vw,4.5rem); margin-bottom:1rem; } .join-form { display:grid; grid-template-columns:1fr auto; }
.join-section > *, .site-footer .footer-inner { position:relative; z-index:2; }
.join-form input { min-width:0; padding:0 1.2rem; border:1px solid var(--line-strong); border-right:0; border-radius:0; background:transparent; color:var(--paper); font:inherit; outline:none; } .join-form input:focus { border-color:#777; }
.site-footer { padding-top:1.35rem; padding-bottom:0; margin-bottom:0; }
.footer-inner { position:relative; z-index:1; padding-bottom:0; margin-bottom:0; }
.footer-links { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding-bottom:.8rem; } .footer-links div { display:flex; flex-direction:column; gap:.35rem; } .footer-links .micro { margin-bottom:.4rem; } .footer-links a { color:#aaa; font-size:.82rem; }
.footer-bottom { position:relative; z-index:1; margin:0 calc(-1 * var(--gutter)); padding:.5rem var(--gutter) .08rem; border-top:0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:2rem; font-size:.7rem; line-height:1.25; }
@media(max-width:850px){body::after{width:680px;right:-240px;bottom:0}.site-header{grid-template-columns:1fr auto}.nav{display:none}.header-actions .text-link{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding-right:0}.hero-art{min-height:420px;border-left:0;border-top:1px solid var(--line)}.focus-track{grid-auto-columns:minmax(240px,48%)}.focus-strip{grid-template-columns:1fr}.focus-strip div{border-right:0;border-bottom:1px solid var(--line)}.focus-strip div:last-child{border-bottom:0}.split-intro,.programme-grid,.join-section{grid-template-columns:1fr}.intro-copy{justify-self:start}.number-grid-4{grid-template-columns:repeat(2,1fr)}.number-grid-4 article:nth-child(2){border-right:0}.number-grid-4 article:nth-child(-n+2){border-bottom:1px solid var(--line)}.programme-feature{grid-template-columns:1fr}.abstract-art{min-height:220px;border-left:0;border-top:1px solid var(--line)}.join-section{gap:2.5rem}}
@media(max-width:560px){:root{--gutter:1rem}body::after{width:520px;right:-250px;bottom:0;opacity:.045}.site-header{min-height:88px}.brand{width:155px;height:58px}.header-actions .button{padding-inline:.8rem}.focus-head{align-items:start;flex-direction:column}.carousel-controls{align-self:flex-end}.focus-track{grid-auto-columns:84%}.number-grid-3,.number-grid-4{grid-template-columns:1fr}.number-grid article{border-right:0;border-bottom:1px solid var(--line)}.number-grid article:last-child{border-bottom:0}.number-grid-4 article:nth-child(2){border-right:0}.spread{align-items:start;flex-direction:column}.programme-feature{min-height:0}.footer-links{grid-template-columns:repeat(2,1fr);padding-bottom:.7rem}.footer-bottom{flex-direction:column;align-items:flex-start;gap:.1rem;padding:.45rem var(--gutter) .05rem}.join-form{grid-template-columns:1fr;gap:.6rem}.join-form input{min-height:3.3rem;border-right:1px solid var(--line-strong)}.site-footer{padding-top:1.2rem}}