/* ========================================================================= Baqiyah, ink and parchment ------------------------------------------------------------------------- Parchment ground, deep ink-green text, warm brass used only in rules and small marks. Cormorant Garamond for display, Inter for setting, Amiri for Arabic. Family resemblance with Buruja: same paper, different ink. Rebuilt 3 August 2026 away from the manuscript direction. The palette, the display face and the Arabic are unchanged; the layout is not. Body type is Inter, the container is 1100px and left aligned, sections are full width bands, and the drop caps, the centred setting and the ornament chapter breaks are gone. Prose is held to a readable measure by a max-width on p; the wide elements are meant to use the whole container. House rules encoded here: - no em dashes or en dashes anywhere in the copy - nothing animates on its own - brass never fills a shape larger than a rule or a numeral Two palettes. Parchment is the default. The dark palette applies when the visitor's system asks for it, and either one can be forced by the switch in the nav, which writes data-theme on . THE DARK BLOCK IS WRITTEN TWICE, once for the system preference and once for the explicit choice. CSS has no way to share it. If you change a value in one, change it in the other. ========================================================================= */ :root{ color-scheme: light; --paper: #f5f0e4; --paper-deep: #efe8d7; --paper-sunk: #eae2cd; --ink: #1e2620; --ink-soft: #5d6960; --ink-faint: #8b9189; --green: #1f4d43; --green-deep: #14352e; --brass: #a3803f; --brass-soft: #c9ad72; --rule: #ddd1b6; --rule-faint: #e7ddc7; --sel: #e3d9bd; --btn-bg: #1f4d43; --btn-bg-hov: #14352e; --btn-fg: #f5f0e4; } /* dark, chosen by the system, unless the visitor has asked for parchment */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --paper: #14120d; --paper-deep: #1a1811; --paper-sunk: #1f1c14; --ink: #eae1cd; --ink-soft: #a2998a; --ink-faint: #726b5e; --green: #7fbdaf; --green-deep: #9ed2c6; --brass: #c9a961; --brass-soft: #8a7141; --rule: #322b1e; --rule-faint: #262115; --sel: #332c1d; /* the primary button stays a deep, quiet green in the dark, rather than inverting into a bright mint slab */ --btn-bg: #235349; --btn-bg-hov: #2e6a5d; --btn-fg: #eae1cd; } } /* dark, asked for by hand */ :root[data-theme="dark"]{ color-scheme: dark; --paper: #14120d; --paper-deep: #1a1811; --paper-sunk: #1f1c14; --ink: #eae1cd; --ink-soft: #a2998a; --ink-faint: #726b5e; --green: #7fbdaf; --green-deep: #9ed2c6; --brass: #c9a961; --brass-soft: #8a7141; --rule: #322b1e; --rule-faint: #262115; --sel: #332c1d; --btn-bg: #235349; --btn-bg-hov: #2e6a5d; --btn-fg: #eae1cd; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection{ background: var(--sel); color: var(--ink); } /* ---------- the container ---------- 1100px, left aligned. Prose inside it is held to a readable measure by .prose; the wide elements (hero, projects, stats, the list, the verses) are meant to use the whole width, which is what stops the page reading as a printed page. */ .leaf{ max-width: 1100px; margin: 0 auto; padding: 0 32px; } .frame{ padding: 0; } /* ---------- type ---------- */ h1, h2, h3{ font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; line-height: 1.08; margin: 0; color: var(--ink); } h1{ font-size: clamp(2.6rem, 5.6vw, 4.2rem); letter-spacing: -.018em; } h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-bottom: 1.4rem; letter-spacing: -.012em; } h3{ font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 1.06rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; margin-bottom: .4rem; } p{ margin: 0 0 1.1rem; color: var(--ink-soft); max-width: 68ch; } p:last-child{ margin-bottom: 0; } strong{ color: var(--ink); font-weight: 600; } em{ font-style: italic; } a{ color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover{ color: var(--brass); } .lead{ font-size: 1.22rem; line-height: 1.55; color: var(--ink); max-width: 46ch; } .small{ font-size: .89rem; } .faint{ color: var(--ink-faint); } .label{ font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 0 0 .8rem; } /* The one place the old book voice is kept on purpose: the closing line of a section, set in the display face. It is a pull quote now, not a flourish. */ .kicker{ font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.4vw, 2rem); font-style: normal; color: var(--ink); line-height: 1.28; max-width: 30ch; margin: 2rem 0 0; padding-left: 1.15rem; border-left: 2px solid var(--brass); } /* .dropcap is retained as an inert hook so old markup does not break. The drop cap itself is gone: it was the loudest book signal on the page. */ .dropcap{ } /* ---------- structure: full width bands ---------- A spread box shadow paints the band colour out past the container on every side, and the clip-path trims the top and bottom of that spread so only the left and right survive. That gives a full width band with no wrapper markup, and box shadows do not add to scrollable width, so nothing overflows. */ section{ padding: 78px 0; } /* Every second section gets the deeper ground. The hero and the page head are always the first section on a page, so they are never banded. Add .band or .noband by hand to override. */ main > section:nth-of-type(2n), .band{ background: var(--paper-deep); box-shadow: 0 0 0 100vw var(--paper-deep); clip-path: inset(0 -100vw); } .noband{ background: none; box-shadow: none; clip-path: none; } /* ---------- hero ---------- */ .hero{ padding: 86px 0 68px; text-align: left; border-top: 0; } .hero .mark{ font-family: Amiri, serif; font-size: 2rem; color: var(--brass); line-height: 1; margin-bottom: 1.6rem; } .hero h1{ max-width: 15ch; } .hero .lead{ margin-top: 1.5rem; } .hero p{ max-width: 46ch; } .hero .btnrow{ margin-top: 2.1rem; } .hero .small{ margin-top: 2.4rem; color: var(--ink-faint); } .page-head{ padding: 72px 0 44px; text-align: left; border-top: 0; } .page-head h1{ max-width: 18ch; } .page-head p{ max-width: 58ch; } .page-head .lead{ margin-top: 1.3rem; } /* ---------- navigation ---------- */ .nav{ border-bottom: 1px solid var(--rule); padding: 22px 0 18px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 22px; } .nav .home{ font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; color: var(--ink); text-decoration: none; letter-spacing: .005em; } .nav .home:hover{ color: var(--brass); } .nav ul{ list-style: none; display: flex; flex-wrap: wrap; gap: 26px; margin: 0; padding: 0; } .nav a.n{ font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); text-decoration: none; } .nav a.n:hover, .nav a.n[aria-current="page"]{ color: var(--brass); } /* the parchment / dark switch. Hidden until the script unhides it, so a visitor without JavaScript is never shown a control that does nothing. */ .nav .theme{ font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-faint); background: none; border: 0; padding: 0; margin: 0 0 0 .2rem; cursor: pointer; line-height: inherit; /* wide enough for the longer of the two words, so the row does not shift when the label changes from Dark to Light */ min-width: 3.4em; text-align: left; } .nav .theme:hover{ color: var(--brass); } .nav .theme[hidden]{ display: none; } .skip{ position: absolute; left: -9999px; background: var(--paper-deep); color: var(--ink); padding: 10px 16px; } .skip:focus{ left: 12px; top: 12px; z-index: 10; } /* ---------- the walls: three across, not a bulleted list ---------- */ .walls{ margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .walls li{ margin: 0; padding: 1.5rem 0 0; border-top: 2px solid var(--brass); color: var(--ink-soft); } .walls li::before{ content: none; } .walls b{ display: block; color: var(--ink); font-weight: 600; margin-bottom: .4rem; font-size: 1.02rem; line-height: 1.35; } .walls span{ font-size: .96rem; } /* ---------- scripture ---------- Arabic on one side, the translation on the other, so it reads as a panel in a layout rather than an inscription on a page. */ .verse{ margin: 2.6rem 0; padding: 2.2rem 2.1rem; background: var(--paper-sunk); border: 0; border-left: 2px solid var(--brass); display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 46px; align-items: center; } .verse .ar{ font-family: Amiri, serif; direction: rtl; display: block; font-size: 1.5rem; line-height: 2.05; color: var(--ink); grid-column: 1; grid-row: 1 / span 3; margin: 0; } .verse .tr{ font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.32rem; line-height: 1.4; font-style: italic; color: var(--ink); margin: 0 0 .6rem; max-width: none; grid-column: 2; } .verse .cite{ font-size: .8rem; color: var(--ink-faint); margin: 0; letter-spacing: .04em; grid-column: 2; max-width: none; } .verse .cite a{ color: var(--ink-faint); text-decoration-color: var(--rule); } .verse .cite a:hover{ color: var(--brass); } .verse .gloss{ grid-column: 2; font-size: .95rem; color: var(--ink-soft); margin: .6rem 0 0; max-width: none; } .gloss{ font-size: 1rem; color: var(--ink-soft); } /* ---------- projects, as cards ---------- */ .projgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 2.4rem; } .proj{ padding: 1.7rem 1.6rem 1.5rem; border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; } .band .proj{ background: var(--paper); } .proj h3{ font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.75rem; font-weight: 500; letter-spacing: -.01em; margin-bottom: .15rem; } .proj h3 a{ text-decoration: none; color: var(--ink); } .proj h3 a:hover{ color: var(--brass); } .proj .host{ font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin: 0 0 .9rem; max-width: none; } .proj p{ margin: 0; font-size: .96rem; max-width: none; } .proj .more{ display: inline-block; margin-top: auto; padding-top: 1.2rem; font-size: .88rem; font-weight: 500; align-self: flex-start; } /* a single project, on its own page: one wide card, not a column */ .proj.solo{ display: block; } /* ---------- numbers ---------- */ .stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 2.4rem 0 2.2rem; border: 0; } .stat{ padding: 1.6rem 1.5rem; text-align: left; border: 0; border-top: 2px solid var(--brass); background: var(--paper-sunk); } .stat .n{ font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.9rem; color: var(--ink); line-height: 1; display: block; /* Cormorant sets old style figures by default, which read as a typo next to the Inter labels. Force lining figures here and in the list numerals. */ font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; } .stat .l{ font-size: .87rem; color: var(--ink-soft); margin-top: .55rem; display: block; line-height: 1.4; } /* ---------- the list, as a table ---------- */ .list{ margin: 2.4rem 0 0; padding: 0; list-style: none; counter-reset: it; } .list li{ display: grid; grid-template-columns: 2.6rem 1fr 1.5fr; column-gap: 34px; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); position: relative; counter-increment: it; color: var(--ink-soft); } .list li:first-child{ border-top: 1px solid var(--rule); } .list li::before{ content: counter(it, decimal-leading-zero); position: static; font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--brass); padding-top: .3rem; } .list b{ display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; line-height: 1.35; margin: 0; } .list span{ font-size: .95rem; } /* plain ruled list, no numerals */ .plain{ margin: 1.9rem 0 0; padding: 0; list-style: none; max-width: 78ch; } .plain li{ padding: 1rem 0; border-bottom: 1px solid var(--rule-faint); color: var(--ink-soft); } .plain li:first-child{ border-top: 1px solid var(--rule-faint); } .plain b{ color: var(--ink); font-weight: 600; } /* ---------- buttons ---------- */ .btnrow{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; } .btn{ display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; font-size: .92rem; font-weight: 500; font-family: Inter, "Helvetica Neue", Arial, sans-serif; text-decoration: none; border-radius: 2px; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; } .btn-primary{ background: var(--btn-bg); color: var(--btn-fg); } .btn-primary:hover{ background: var(--btn-bg-hov); color: var(--btn-fg); } .btn-ghost{ border-color: var(--rule); color: var(--ink); } .btn-ghost:hover{ border-color: var(--brass); color: var(--brass); } .quiet{ font-size: .92rem; color: var(--ink-soft); } .quiet a{ color: var(--ink-soft); } .quiet a:hover{ color: var(--brass); } /* ---------- tables ---------- */ table{ width: 100%; border-collapse: collapse; margin: 1.9rem 0 .4rem; font-size: .95rem; max-width: 82ch; } th, td{ text-align: left; padding: .8rem .6rem .8rem 0; border-bottom: 1px solid var(--rule-faint); vertical-align: top; } th{ color: var(--ink-faint); font-weight: 600; border-bottom-color: var(--rule); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } td{ color: var(--ink-soft); } td.num{ text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- notes and legal ---------- */ .note{ margin: 2rem 0 0; padding: 1.4rem 1.5rem; max-width: 78ch; background: var(--paper-sunk); border-left: 2px solid var(--brass); font-size: .95rem; } .note p:last-child{ margin-bottom: 0; } footer{ padding: 66px 0 78px; border-top: 1px solid var(--rule); } footer .closing{ text-align: left; } footer .closing p{ font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; color: var(--ink); max-width: 26ch; } footer .closing .ar{ font-family: Amiri, serif; font-size: 1.5rem; color: var(--brass); display: block; margin-top: 1.2rem; } .imprint{ margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-faint); font-size: .85rem; color: var(--ink-faint); line-height: 1.6; display: grid; grid-template-columns: 1.6fr 1fr; column-gap: 56px; } .imprint p{ color: var(--ink-faint); margin-bottom: .7rem; max-width: 62ch; } .imprint a{ color: var(--ink-faint); text-decoration-color: var(--rule); } .imprint a:hover{ color: var(--brass); } .imprint .links{ display: flex; flex-direction: column; gap: 8px; margin-top: 0; grid-column: 2; grid-row: 1 / span 3; } /* ---------- responsive ---------- */ @media (max-width: 900px){ .leaf{ padding: 0 26px; } section{ padding: 58px 0; } .walls{ grid-template-columns: 1fr; gap: 26px; } .projgrid{ grid-template-columns: 1fr; gap: 20px; } .stats{ grid-template-columns: 1fr; gap: 16px; } .verse{ grid-template-columns: 1fr; row-gap: 1.2rem; } .verse .ar{ grid-column: 1; grid-row: auto; text-align: center; } .verse .tr, .verse .cite, .verse .gloss{ grid-column: 1; } .list li{ grid-template-columns: 2.2rem 1fr; row-gap: .35rem; } .list span{ grid-column: 2; } .imprint{ grid-template-columns: 1fr; row-gap: 1rem; } .imprint .links{ grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; } } @media (max-width: 620px){ body{ font-size: 16px; } .leaf{ padding: 0 22px; } .frame{ padding: 0; } section{ padding: 46px 0; } .hero{ padding: 52px 0 44px; } .page-head{ padding: 46px 0 30px; } .verse{ padding: 1.6rem 1.3rem; } .verse .ar{ font-size: 1.35rem; line-height: 1.95; } .btn{ flex: 1 1 auto; } } @media print{ .nav, .btnrow{ display: none; } body{ background: #fff; color: #000; font-size: 11pt; } .band{ box-shadow: none; } }