/* alhayth.com · web version of the 2026 portfolio.
   The PDF page is 540×960. Every length below is the PDF value × --u,
   where --u = min(100vw, 540px) / 540, so the 540 design maps onto the phone. */

@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/ThmanyahSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/ThmanyahSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/ThmanyahSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/ThmanyahSans-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Thmanyah SS01'; src: url('assets/fonts/ThmanyahSansSS01-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah SS01'; src: url('assets/fonts/ThmanyahSansSS01-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --paper: #fff; --ink: #111; --ink-2: #4a4a4a; --ink-3: #8a8a8a;
  --font-body: 'Thmanyah Sans', -apple-system, sans-serif;
  --font-ss01: 'Thmanyah SS01', 'Thmanyah Sans', sans-serif;
  --u: calc(min(100vw, 540px) / 540);
  --m: calc(36 * var(--u));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #2a2a2a; scroll-snap-type: y proximity; }
/* lock the scroll to one page at a time only when a whole page fits the viewport */
@media (max-width: 540px) and (orientation: portrait), (min-width: 540px) and (min-height: 960px) { html { scroll-snap-type: y mandatory; } }
body { font-family: var(--font-body); color: var(--ink); background: #2a2a2a; -webkit-text-size-adjust: 100%; }
img { display: block; }
.en { direction: ltr; unicode-bidi: isolate; font-feature-settings: 'tnum'; }

/* each page: the field colour runs the full window width, the content column is the PDF's 540 */
section { position: relative; overflow: hidden; display: flex; justify-content: center; background: var(--paper); scroll-snap-align: start; scroll-snap-stop: normal; }
.in { position: relative; width: min(100vw, 540px); min-height: max(100svh, calc(960 * var(--u))); }

/* mark: 14px dot + 52×9 bar */
.mark { display: flex; align-items: center; gap: calc(7 * var(--u)); }
.mark b { display: block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--ink); }
.mark span { display: block; width: calc(52 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--ink); }

/* 1 · cover: cream, the mark and the statement as one unit, as tall as its content */
.cover { background: #efe5cf; }
.cover .in { min-height: 0; padding: calc(40 * var(--u)) var(--m) calc(44 * var(--u)); }
.cover h1 { margin-top: calc(30 * var(--u)); font-family: var(--font-ss01); font-weight: 900; font-size: calc(128 * var(--u)); line-height: .92; letter-spacing: -.015em; margin-inline-end: calc(-6 * var(--u)); }

/* 2 · philosophy: black, the statement, then the three rules as one running line */
.black { background: var(--ink); color: #fff; }
.black .in { min-height: 0; padding: calc(80 * var(--u)) var(--m) calc(88 * var(--u)); }
.black .big { font-family: var(--font-ss01); font-weight: 900; font-size: calc(98 * var(--u)); line-height: .98; letter-spacing: -.01em; color: #fff; }
.black .rules { margin-top: calc(56 * var(--u)); max-width: calc(420 * var(--u)); font-size: max(15px, calc(22 * var(--u))); line-height: 1.55; font-weight: 500; color: #efe5cf; }

/* 3–10 · case pages: name and one line, centred; phones bleed off the bottom */
.case { --field: #111; --on: #fff; background: var(--field); color: var(--on); }
.case .head { position: absolute; top: calc(96 * var(--u)); inset-inline: var(--m); display: flex; flex-direction: column; align-items: center; text-align: center; }
.case .name { font-family: var(--font-ss01); font-weight: 900; font-size: calc(64 * var(--u)); line-height: 1.1; letter-spacing: -.01em; color: var(--on); display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); min-height: calc(72 * var(--u)); }
.case .name.en { font-size: calc(60 * var(--u)); letter-spacing: -.02em; }
.case .wm { height: calc(62 * var(--u)); width: auto; }
.case .wm.h72 { height: calc(72 * var(--u)); }
.case .wm.h70 { height: calc(70 * var(--u)); }
.case .glyph { height: calc(76 * var(--u)); width: auto; }
.case .lead { margin-top: calc(28 * var(--u)); max-width: calc(440 * var(--u)); font-size: max(13px, calc(21 * var(--u))); line-height: 1.45; font-weight: 500; color: var(--on); opacity: .94; }

/* iPhone outline */
.phone { position: absolute; padding: calc(3 * var(--u)); border-radius: calc(62 * var(--u)); background: linear-gradient(160deg, #8f8f8f, #3a3a3a 40%, #6a6a6a 70%, #2b2b2b); box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0,0,0,.35); }
.phone .bez { background: #0a0a0a; border-radius: calc(59 * var(--u)); padding: calc(11 * var(--u)); position: relative; }
.phone .scr { overflow: hidden; background: #fff; aspect-ratio: 1290 / 2796; border-radius: calc(48 * var(--u)); position: relative; }
.phone .scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone .btn { position: absolute; width: calc(3 * var(--u)); background: #4a4a4a; border-radius: 2px; }
.phone .btn.v1 { inset-inline-start: calc(-3 * var(--u)); top: 18%; height: 7%; }
.phone .btn.v2 { inset-inline-start: calc(-3 * var(--u)); top: 26.5%; height: 7%; }
.phone .btn.pw { inset-inline-end: calc(-3 * var(--u)); top: 21%; height: 11%; }
/* one phone, centred, bleeding off the bottom */
.one .phone { width: calc(460 * var(--u)); inset-inline-start: calc(40 * var(--u)); bottom: calc(-304 * var(--u)); }
/* two phones, both bleeding off the bottom */
.two .phone { width: calc(322 * var(--u)); border-radius: calc(54 * var(--u)); padding: calc(2.5 * var(--u)); }
.two .phone .bez { border-radius: calc(52 * var(--u)); padding: calc(10 * var(--u)); }
.two .phone .scr { border-radius: calc(42 * var(--u)); }
.two .p1 { inset-inline-start: calc(-16 * var(--u)); bottom: calc(-9 * var(--u)); z-index: 2; }
.two .p2 { inset-inline-end: calc(-16 * var(--u)); bottom: calc(-99 * var(--u)); z-index: 1; }
/* three phones, stepped, bleeding off the bottom */
.three .phone { width: calc(250 * var(--u)); border-radius: calc(42 * var(--u)); padding: calc(2 * var(--u)); }
.three .phone .bez { border-radius: calc(40 * var(--u)); padding: calc(8 * var(--u)); }
.three .phone .scr { border-radius: calc(32 * var(--u)); }
.three .p1 { inset-inline-start: calc(-6 * var(--u)); bottom: calc(142 * var(--u)); z-index: 3; }
.three .p2 { inset-inline-start: calc(145 * var(--u)); bottom: calc(62 * var(--u)); z-index: 2; }
.three .p3 { inset-inline-start: calc(296 * var(--u)); bottom: calc(-18 * var(--u)); z-index: 1; }

/* 11 · closer */
.closer { background: var(--ink); color: #fff; }
.closer .group { position: absolute; top: calc(330 * var(--u)); inset-inline: var(--m); }
.closer .bigmark { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.closer .bigmark b { display: block; width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%; background: #fff; }
.closer .bigmark span { display: block; flex: 1; height: calc(62 * var(--u)); border-radius: calc(34 * var(--u)); background: #fff; }
.closer .word { margin-top: calc(30 * var(--u)); font-family: var(--font-ss01); font-weight: 900; font-size: calc(112 * var(--u)); line-height: 1; color: #fff; }
.closer .url { position: absolute; bottom: calc(56 * var(--u)); inset-inline: var(--m); text-align: center; font-weight: 700; font-size: max(15px, calc(21 * var(--u))); line-height: 1.5; color: #fff; }
.closer .url a { color: inherit; text-decoration: none; }