/* SABEEL
   Everything a visitor needs, on one page, forever correct.

   A sabeel is an endowed public drinking fountain: it does one thing,
   freely, for everyone.

   The signature move is what is absent. No color, no border radius, no
   shadows, no cards, no icons, no hero image, no motion, no hamburger.
   The restraint reads premium rather than empty because everything that
   remains is executed properly: a type scale that opens at 104px, true
   tabular figures, two deliberate rule weights, warm paper rather than
   white, and near-zero density everywhere except the timetable, which is
   very dense. That contrast is what reads as editing rather than absence.

   Emphasis is produced by inversion, never by hue. Links are underlined
   rather than colored, which is both the accessible choice and the
   printed-page choice.

   Type is Atkinson Hyperlegible, drawn by the Braille Institute for
   low-vision readers with deliberately distinct 1/l/I and 0/O. The audience
   includes elderly congregants reading Fajr on a phone at 5am, so
   legibility is the concept, not a stylistic preference. */

:root {
  --paper: #FBFAF8;
  --ink: #111312;   /* 17.88 on paper, AAA, both directions */
  --body: #3A3D3C;  /* 10.53, AAA */
  --muted: #6E7271; /* 4.67 on paper, AA. Banned inside the inverted row,
                       where it measures 3.83 and fails. */
  --rule: #DCDAD5;
  --radius: 0;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(48px, 8vw, 104px); font-weight: 700; line-height: 0.96; letter-spacing: -0.035em; hanging-punctuation: first; }
h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; }
h3 { font-size: 22px; font-weight: 700; }
p { margin: 0; }

/* Underline, never color. */
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness 100ms linear; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 200; text-decoration: none; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.mono { font-family: 'Atkinson Hyperlegible Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.preview-flag {
  position: fixed; bottom: 12px; left: 12px; z-index: 150;
  background: var(--ink); color: var(--paper);
  font-size: 12px; padding: 6px 12px;
}

/* Two deliberate rule weights. 1px hairline for rows, 2px ink for section
   breaks. The original spec called for 0.5px, but sub-device-pixel borders
   round inconsistently across DPRs and vanish entirely on 1x displays,
   which would kill the lighter of the only two emphasis levels this design
   has. 1px against 2px survives everywhere. */
.rule { height: 2px; background: var(--ink); margin: 0; border: 0; }

/* ---------- Masthead ---------- */

.mast { padding: 28px 0 0; }
.mast-in { display: flex; align-items: baseline; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.wm { font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
.mast nav { display: flex; gap: 26px; flex-wrap: wrap; }
.mast nav a { font-size: 16px; text-decoration: none; }
.mast nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- The statement. This is the entire hero. ---------- */

.statement { padding: clamp(72px, 10vh, 128px) 0 clamp(56px, 8vh, 96px); }
.statement h1 { max-width: 15ch; }
.statement p { margin-top: 28px; max-width: 60ch; font-size: 19px; }
.statement-links { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.statement-links a { font-size: 17px; }

/* ---------- The timetable. The centerpiece and the reason the template
     exists. Very high density here, near zero elsewhere. ---------- */

.times { padding: clamp(48px, 6vh, 72px) 0; }
.times-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.times-meta span { font-size: 15px; color: var(--muted); }

table.tt { width: 100%; border-collapse: collapse; }
table.tt caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.tt th {
  text-align: right; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding: 0 0 12px; border-bottom: 1px solid var(--rule);
}
table.tt th:first-child { text-align: left; }
table.tt td { padding: 0; border-bottom: 1px solid var(--rule); }
table.tt td .cell { display: block; padding: 16px 0; height: 56px; display: flex; align-items: center; justify-content: flex-end; font-size: 17px; }
table.tt td:first-child .cell { justify-content: flex-start; font-weight: 700; color: var(--ink); }

/* The current prayer inverts: ink background, paper text, full width to the
   content edge, no radius. The most striking thing on the page, and it costs
   nothing. Indicated redundantly by aria-current and a weight change, never
   by background alone. */
table.tt tr.is-now td { background: var(--ink); border-bottom-color: var(--ink); }
table.tt tr.is-now .cell { color: var(--paper); font-weight: 700; }
table.tt tr.is-now td:first-child .cell { padding-left: 14px; margin-left: -14px; }
table.tt tr.is-now td:last-child .cell { padding-right: 14px; margin-right: -14px; }
.now-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- The one photograph. Content width, not full bleed. The only
     colour on the site. After a monochrome scroll it lands hard. ---------- */

.photo { margin: clamp(48px, 6vh, 72px) 0 0; }
.photo-frame { aspect-ratio: 16 / 9; background: linear-gradient(160deg, #6c7570, #2f3633); display: flex; align-items: center; justify-content: center; color: rgba(251,250,248,0.5); font-size: 14px; }
.photo figcaption { margin-top: 12px; font-size: 15px; color: var(--muted); }

/* ---------- Give ---------- */

.give { padding: clamp(56px, 8vh, 96px) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.give p { margin-top: 14px; max-width: 44ch; }
.give-amt { margin-top: 28px; font-size: 36px; font-weight: 700; color: var(--ink); }
/* A 2px rule that is part ink and part hairline. Not a rounded bar. */
.give-bar { height: 2px; background: var(--rule); margin-top: 14px; }
.give-bar i { display: block; height: 100%; background: var(--ink); }
.give-note { margin-top: 10px; font-size: 15px; color: var(--muted); }
.give-form { border: 1px solid var(--rule); padding: 24px; }
.give-form h3 { margin-bottom: 8px; }
.amts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.amts button { flex: 1 1 0; min-width: 72px; min-height: 46px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.amts button:hover, .amts button.on { border-color: var(--ink); }
.amts button.on { background: var(--ink); color: var(--paper); }
.btn-block { display: block; width: 100%; min-height: 48px; background: var(--ink); color: var(--paper); border: 0; font: inherit; font-weight: 700; cursor: pointer; text-align: center; line-height: 48px; text-decoration: none; }
.give-fine { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- Visit ---------- */

.visit { padding: clamp(56px, 8vh, 96px) 0; }
.visit dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 28px 0 0; }
.visit .row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.visit dt { color: var(--muted); font-size: 16px; }
.visit dd { margin: 0; color: var(--ink); font-size: 16px; text-align: right; }
.arabic { font-family: 'Noto Naskh Arabic', serif; font-size: 24px; color: var(--muted); margin-top: 36px; }

/* ---------- Footer ---------- */

.foot { padding: 24px 0 40px; }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 2px solid var(--ink); font-size: 15px; color: var(--muted); }

/* ---------- Monthly page ---------- */
.month { width: 100%; border-collapse: collapse; margin-top: 24px; }
.month th { text-align: right; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 0 12px; border-bottom: 1px solid var(--rule); }
.month th:first-child { text-align: left; }
.month td { padding: 14px 0; text-align: right; border-bottom: 1px solid var(--rule); font-size: 17px; }
.month td:first-child { text-align: left; color: var(--ink); font-weight: 700; }
.month tr.is-now td { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }

@media (max-width: 900px) {
  .give { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .visit dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .mast nav { gap: 18px; }
  .mast nav a { font-size: 15px; }
  /* The timetable is the whole page, so it must not scroll sideways and it
     has no box to wrap in. Tighten the cells instead. */
  table.tt th { font-size: 11.5px; letter-spacing: 0.04em; }
  table.tt td .cell { font-size: 16px; height: 52px; }
  .visit .row { flex-direction: column; gap: 2px; }
  .visit dd { text-align: left; }
}

/* Nothing to disable, which is the point. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }