/* theme.css */ /* Kahf — shared tokens and chrome. One copy, linked by every page. Two grounds, one magazine. Every colour in the site resolves through the tokens below, so the dark face is a second set of values rather than a second stylesheet. Three states: no attribute means follow the system, data-theme="light"/"dark" on means the reader has decided. The inline script in the document head sets that attribute before first paint, so a chosen theme never flashes the other one first. */ :root{ color-scheme:light; --paper:#FFFFFF; --ink:#0E0E0D; --mute:#6B6861; --rule:#E2DFD9; --soft:#4A4741; --crit:#7950B0; --ess:#C43D1A; --poe:#1B34D6; --int:#0F7A4A; --let:#EDAE10; --fic:#E0247A; /* Roles, not colours — the handful of places a value cannot simply be "ink on paper" and must know which way round the page is. */ --on-photo:#F3EFE4; /* type sitting on artwork: always light */ --on-ink:#9C968B; /* quiet type on a var(--ink) fill */ --let-on:var(--ink); /* type on the Letters yellow: always dark */ --mk-src:url("/assets/mark-ink.webp"); --grain:.028; /* the paper tooth; barely there on white */ --flood:.07; /* a row's wash of its own section ink */ --bg-wash:.7; /* the veil over the Spine's screened plate: unlit titles must still read */ --sh-soft:0 10px 30px rgba(0,0,0,.07); --sh-plate:0 18px 50px rgba(0,0,0,.28); --gut:clamp(14px,3.2vw,34px); /* ── the system ────────────────────────────────────────────────────── One set of curves, durations, sizes and spaces for every page. A value typed by hand in a page stylesheet should be the exception with a reason. Motion. Things arriving, answering a hover or settling use --ease, a strong ease-out that starts fast. Things travelling across the screen (the view morph, the switch thumb) use --ease-io. UI answers inside --t-base; only plates, reveals and the morph are allowed longer. */ --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --t-fast:.16s; /* press feedback, colour */ --t-base:.26s; /* hover, small state changes */ --t-move:.42s; /* something changing place */ --t-slow:.7s; /* plates, scroll reveals */ --nudge:12px; /* how far a lit row steps aside; 0 under reduced motion */ /* Type. 11 mono numerals, 12 labels, 13.5 small copy, 15 UI body; the reading measure is set in article.css. Above that, four display steps. */ --fs-lede:clamp(18px,2.1vw,26px); /* the sentence under a page head */ --fs-row:clamp(22px,3.6vw,46px); /* a lit row's title, an address */ --fs-cta:clamp(18px,2.3vw,30px); /* the big call-to-action line */ --fs-head:clamp(36px,6.8vw,104px); /* a feature or room heading */ /* Space. A band's padding and a row's padding, everywhere. */ --pad-band:clamp(32px,5vw,80px); --pad-row:clamp(15px,2.1vw,27px); /* Bilingual stacks. Latin first on purpose — Amiri and Nastaliq both carry Latin glyphs, and letting them render the English made the English in a mixed title a different face from the English everywhere else. */ --ar:"Archivo","Amiri",serif; /* Titles in a list — the archive's two views, lit rows, next/previous — set their Arabic in Readex Pro, a grotesque drawn in Archivo's spirit, so the two scripts in a bilingual row sit at one weight and one height. Headings and reading text keep Amiri. (Kawkab Mono was tried first: its monospaced letters opened uneven gaps inside words.) */ --ar-mono:"Archivo","Readex Pro","Amiri",serif; --ur:"Archivo","Noto Nastaliq Urdu","Amiri",serif; /* For a run that is Arabic and nothing else — a single word set as display type, never a mixed title. The stacks above exist because Amiri also carries Latin glyphs; where there is no Latin to protect, Amiri leads. */ --ar-only:"Amiri",serif; } /* ══════ the dark face ══════ Not an inversion. The five section inks are re-mixed brighter and a little desaturated so they stay themselves against a near-black ground instead of going muddy, the rules lift off the floor rather than sitting on it, and the grain comes up a touch because a dark flat field shows its flatness more. The values appear twice on purpose: once for the system preference (skipped when the reader has explicitly asked for light) and once for the explicit choice, so the attribute always wins in both directions. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --paper:#0F0F0E; --ink:#F1EEE7; --mute:#8E897F; --rule:#2C2B28; --soft:#B3ADA2; --ess:#FF6F47; --poe:#8A97FF; --int:#3DBE85; --let:#EFB937; --fic:#FF62AB; --on-ink:#57544D; --let-on:var(--paper); --mk-src:url("/assets/mark-cream.webp"); --grain:.05; --flood:.13; --bg-wash:.55; --sh-soft:0 10px 30px rgba(0,0,0,.55); --sh-plate:0 18px 50px rgba(0,0,0,.68); } :root:not([data-theme="light"]) .mk{content:url("/assets/mark-cream.webp")} } :root[data-theme="dark"]{ color-scheme:dark; --paper:#0F0F0E; --ink:#F1EEE7; --mute:#8E897F; --rule:#2C2B28; --soft:#B3ADA2; --ess:#FF6F47; --poe:#8A97FF; --int:#3DBE85; --let:#EFB937; --fic:#FF62AB; --on-ink:#57544D; --let-on:var(--paper); --mk-src:url("/assets/mark-cream.webp"); --grain:.05; --flood:.13; --bg-wash:.55; --sh-soft:0 10px 30px rgba(0,0,0,.55); --sh-plate:0 18px 50px rgba(0,0,0,.68); } :root[data-theme="dark"] .mk{content:url("/assets/mark-cream.webp")} *{box-sizing:border-box} body{ margin:0;background:var(--paper);color:var(--ink); font-family:"Archivo",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.35; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} /* while the theme is being switched, paper and ink cross over on --t-base; the class is on for one transition only, so nothing else inherits it */ html.theming body,html.theming .mast,html.theming .foot{transition:background-color var(--t-base) ease,color var(--t-base) ease} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} img{max-width:100%} [hidden]{display:none!important} .mi{font-size:12px;letter-spacing:.075em;text-transform:uppercase;font-weight:700;line-height:1.3} /* a label that carries information (a byline, a price, a spec key, a status line) gets one more pixel; 12px stays for ornament and counts */ .mi.info,.dstatus,.pstatus,.sub-status,.buy-note,.ferr{font-size:13px} .mono{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums} .ink-Essays{color:var(--ess)} .ink-Poems{color:var(--poe)} .ink-Interviews{color:var(--int)} .ink-Letters{color:var(--let)} .ink-Fictions{color:var(--fic)} /* A bilingual title that wraps keeps its Arabic half on the right edge; with justify-content:space-between alone, a wrapped run falls to the start of its new line, which is the wrong side for Arabic. */ .bi > .ar,.bi h2 > .ar{margin-left:auto} /* ══════ skip link ══════ Invisible until keyboard focus lands on it — the emergency exit from the six masthead links plus kicker every page repeats before its own content. */ .skip{ position:absolute;left:var(--gut);top:-100px;z-index:100;background:var(--ink); color:var(--paper);padding:10px 16px;transition:top .2s var(--ease); } .skip:focus{top:10px} /* ══════ masthead ══════ One bar, three zones: the mark, the nav, and the controls that belong to the reader rather than to the site (theme, and on a phone the menu itself). Its height is measured into --mast by site.js, because two sticky things below it (the archive's filter bar, the article's spine rail) and one viewport sum (the Reading Room's height) are all written against it — and it is not the same height on a phone as on a desktop. */ .mast{ display:flex;align-items:center;gap:clamp(12px,2vw,22px); padding:10px var(--gut);border-bottom:1px solid var(--ink); position:sticky;top:0;background:var(--paper);z-index:60; } .mast .mkw{flex:0 0 auto} .mast .mk{height:34px;width:auto;display:block;transition:transform .45s var(--ease),opacity .2s} .mast .mkw:hover .mk{transform:rotate(-1.5deg) scale(1.04)} .mast .mkw:active .mk{opacity:.6} /* the reader's own controls, held together at the right end */ .mast-end{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-left:auto} .mast nav{display:flex;gap:clamp(10px,1.6vw,22px);margin-left:auto} .mast nav a{position:relative;color:var(--mute);transition:color var(--t-base) ease,opacity var(--t-base) ease; white-space:nowrap;padding-bottom:3px} .mast nav a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor; transform:scaleX(0);transform-origin:0 50%;transition:transform .34s var(--ease); } .mast nav a:hover{color:var(--ink)} .mast nav a:hover::after,.mast nav a[aria-current="page"]::after{transform:scaleX(1)} .mast nav a[aria-current="page"]{color:var(--ink)} /* the Spine's dimming move, borrowed: pointing at one link quiets the rest, so the nav reads as a list you are moving through, not six equal shouts */ @media (hover:hover){ .mast nav:hover a:not(:hover){opacity:.4} } /* ══════ the theme switch ══════ A disc of ink that wanes to a crescent — the page's own light, turned down. It shows the state it is in, and says in words what pressing it will do. */ .tmode{ display:flex;align-items:center;justify-content:center;width:42px;height:42px; color:var(--mute);transition:color .22s; } .tmode:hover{color:var(--ink)} .tmode .gl{ display:block;width:15px;height:15px;border-radius:50%; box-shadow:inset 0 0 0 9px currentColor; transition:box-shadow .45s var(--ease),transform .55s var(--ease); } .tmode:active .gl{transform:scale(.88)} :root[data-theme="dark"] .tmode .gl{ box-shadow:inset 0 0 0 1.5px currentColor,inset -5px -2px 0 0 currentColor; transform:rotate(-22deg); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tmode .gl{ box-shadow:inset 0 0 0 1.5px currentColor,inset -5px -2px 0 0 currentColor; transform:rotate(-22deg); } } /* ══════ the menu button ══════ */ .mtoggle{display:none;width:42px;height:42px;align-items:center;justify-content:center} .mtoggle .bars,.mtoggle .bars::before,.mtoggle .bars::after{ display:block;width:20px;height:2px;background:var(--ink);position:relative; transition:transform .25s var(--ease),opacity .2s; } .mtoggle .bars::before,.mtoggle .bars::after{content:"";position:absolute;left:0} .mtoggle .bars::before{top:-6px} .mtoggle .bars::after{top:6px} .mtoggle[aria-expanded="true"] .bars{background:transparent} .mtoggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)} .mtoggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)} /* the scrim under an open menu — the page is still there, just put back */ .navscrim{ position:fixed;left:0;right:0;bottom:0;top:var(--mast,63px);z-index:55; background:var(--ink);opacity:0;visibility:hidden; transition:opacity .32s var(--ease),visibility .32s; } @media (max-width:760px){ .mtoggle{display:flex} /* The sheet. Full width, hung off the bar, and it counts its own entries — the same numbered-row grammar the archive and the shop rows are set in. */ .mast nav{ display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0; background:var(--paper);border-bottom:1px solid var(--ink); padding:2px var(--gut) 14px;counter-reset:nv; max-height:calc(100svh - var(--mast,63px));overflow-y:auto;overscroll-behavior:contain; box-shadow:var(--sh-soft); } .mast nav.open{display:flex} .mast nav a{ display:flex;align-items:center;gap:14px;min-height:52px;padding:0 0 0 10px; border-top:1px solid var(--rule);font-size:13px;color:var(--ink);opacity:1; transition:background-color .24s,color .22s; } .mast nav a:first-child{border-top:0} .mast nav a::before{ counter-increment:nv;content:counter(nv,decimal-leading-zero); font-family:"DM Mono",ui-monospace,Menlo,monospace;font-weight:400; font-size:11px;color:var(--rule);letter-spacing:0; transition:color .24s; } /* the full-bleed underline is a desktop gesture; in a column it reads as a rule between rows, which the rows already have */ .mast nav a::after{display:none} .mast nav a:active{background:color-mix(in srgb,var(--ink) 6%,transparent)} .mast nav a:active::before{color:var(--ink)} .mast nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ink)} .mast nav a[aria-current="page"]::before{transform:translateX(6px)} .mast nav a::before{transition:color .24s,transform var(--t-move) var(--ease)} .mast nav a[aria-current="page"]::before{color:var(--ink)} /* each row arrives just behind the one above it */ .mast nav.open a{animation:navin .32s var(--ease) backwards} .mast nav.open a:nth-child(1){animation-delay:.02s} .mast nav.open a:nth-child(2){animation-delay:.06s} .mast nav.open a:nth-child(3){animation-delay:.10s} .mast nav.open a:nth-child(4){animation-delay:.14s} .mast nav.open a:nth-child(5){animation-delay:.18s} .mast nav.open a:nth-child(6){animation-delay:.22s} .mast nav.open a:nth-child(n+7){animation-delay:.26s} body.nav-open{overflow:hidden} body.nav-open .navscrim{opacity:.34;visibility:visible} } @keyframes navin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ══════ page body ══════ */ .wrap{padding:clamp(30px,6vw,72px) var(--gut);max-width:1500px;margin:0 auto} .wrap.narrow{max-width:min(720px,100%)} h1.big{ margin:0 0 .3em;font-size:clamp(34px,6.4vw,86px);font-weight:500; line-height:.98;letter-spacing:-.035em;text-wrap:balance; } .lede{font-size:clamp(17px,1.9vw,23px);line-height:1.45;max-width:56ch;color:var(--soft)} .rule{border:0;border-top:1px solid var(--rule);margin:clamp(26px,4vw,52px) 0} /* ══════ marquee ══════ */ .mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .mq .tr{display:flex;width:max-content;animation:sl 32s linear infinite} .mq .tr span{padding-right:44px;white-space:nowrap} /* WCAG 2.2.2 — moving content over five seconds needs a way to pause it. */ @media (hover:hover) and (pointer:fine){.mq:hover .tr{animation-play-state:paused}} .mq:focus-within .tr{animation-play-state:paused} .brand{font-style:italic} @keyframes sl{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ══════ footer ══════ */ .foot{border-top:1px solid var(--ink);padding:clamp(26px,4vw,46px) var(--gut) 20px;margin-top:60px} .foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px} @media (min-width:600px) and (max-width:1000px){.foot .cols{grid-template-columns:repeat(2,1fr)}} .foot h3{margin:0 0 10px;color:var(--mute)} .foot a{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .34s var(--ease),color .2s;padding-bottom:2px; } .foot a:hover{background-size:100% 1px} .foot li{transition:transform .28s var(--ease)} .foot li:hover{transform:translateX(3px)} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .foot ul li a{display:inline-block;padding:6px 0} /* form.sub, not .sub: the archive plate's byline line is also .sub, and inherited this form's 330px cap and underline */ form.sub{display:flex;flex-wrap:wrap;gap:0;margin-top:8px;max-width:330px;border-bottom:1px solid var(--ink)} .sub-status{flex-basis:100%;margin:6px 0 0;font-weight:400;letter-spacing:0;text-transform:none; color:var(--mute);min-height:1.3em} .sub-status.is-error{color:var(--ess)} form.sub input{ flex:1 1 auto;min-width:0;border:0;background:none;padding:6px 2px;font:inherit;color:inherit; font-size:16px; /* under 16px iOS Safari zooms the page on focus */ } form.sub input::placeholder{color:var(--mute)} form.sub input:focus{outline:none} form.sub button{padding:12px 2px 12px 10px;min-height:44px;white-space:nowrap} /* The three controls that take money or a manuscript — Buy, Give, Send — keep the arrow language but carry a heavier rule, so a squint finds them. */ .cta-pay{font-weight:700!important;border-bottom:2px solid var(--c,var(--ink))!important} form.sub button:hover{color:var(--ess)} form.sub:focus-within{border-bottom-color:var(--ess)} .cave{margin:6px 0 0;color:var(--soft);font-size:13.5px;line-height:1.5;max-width:44ch} .foot .base{ display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; color:var(--mute);margin-top:32px;padding-top:12px;border-top:1px solid var(--rule); } .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ══════ shared interaction primitives ══════ One vocabulary of hover, so a link on Contact behaves like a link on the archive: rules draw themselves in, arrows step out, ink arrives on hover. */ /* an underline that draws left to right */ .ul{ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .34s var(--ease),color .2s;padding-bottom:2px; } .ul:hover{background-size:100% 1px} /* (the big call-to-action line, .bigl, lives in statics.css) */ /* the page head every standing page opens with */ .phead{position:relative;padding-bottom:clamp(20px,3vw,32px);margin-bottom:clamp(22px,3.4vw,40px)} .phead .lede{margin:0} .phead h1.big{margin-bottom:.22em} .phead-rule{ position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink); transform:scaleX(0);transform-origin:0 50%;animation:drawrule .9s var(--ease) .1s forwards; } @keyframes drawrule{to{transform:scaleX(1)}} /* The bar stays on one line at every width — --mast is a single number, and two sticky elements and a viewport calculation are written against it. */ @media (max-width:640px){ .mast{gap:10px} .mast .mk{height:28px} } /* Reduced motion means fewer and gentler, not none. Nothing travels — rows stop stepping aside, entrances stop dealing in, the marquee stands still — but colour, fills and fades still answer, because they carry state. */ @media (prefers-reduced-motion:reduce){ :root{--nudge:0px} .mq .tr{animation:none} .mast nav.open a{animation:none} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; animation-delay:0s!important;scroll-behavior:auto!important} } /* article.css */ /* ══════════════════════════════════════════════════════════════════════════ article.css — the reading instrument. Was: a 66ch column floating in the middle of an empty page. Now the piece owns the viewport the way the archive does — a full-bleed plate, a sticky spine rail carrying section, byline and progress, figures that break the measure into the margin, and a foot that hands you to the next piece the way the Spine hands you to a plate. ══════════════════════════════════════════════════════════════════════════ */ /* ══════ progress ══════ */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none} .progress i{ display:block;height:100%;background:var(--c,var(--ink)); transform:scaleX(0);transform-origin:0 50%;will-change:transform; } /* ══════ the opening ══════ */ .article{--c:var(--ink)} .ahead{padding:var(--pad-band) var(--gut) clamp(20px,3vw,36px)} .ahead .kick a{color:var(--c);position:relative;padding-bottom:2px; background-image:linear-gradient(currentColor,currentColor); background-size:0 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size var(--t-base) var(--ease)} .ahead .kick a:hover{background-size:100% 1px} /* view-transition-name: the landing spot for a title carried in from the archive or from the neighbouring piece (frame.css, index.js) */ .atitle{ margin:0;font-weight:500;line-height:.92;letter-spacing:-.042em; font-size:clamp(38px,7.4vw,112px);max-width:16ch;text-wrap:balance;color:var(--c); view-transition-name:kahf-title; } .atitle[dir="rtl"]{font-family:var(--ar);font-weight:700;line-height:1.24;letter-spacing:0; max-width:18ch;margin-left:auto;text-align:right;font-size:clamp(34px,6.4vw,94px)} /* A bilingual title — "