/* =========================================================
   About: Figma Dev Handoff › About (1092:21916)
   1440 base · ≥1680 (1920 frame) · ≤1199 (834 frame) · ≤699 (390 frame)
   ========================================================= */

.br-m, .ah__divider-t, .ah__divider-m, .ah__corner--m { display: none; }

/* =========================================================
   1 · HERO: fits the viewport, image anchored to the bottom
   ========================================================= */
.ah {
  --grain: .04; /* Figma hero fill: a 15% overlay with nothing under it in the frame, so it barely shows on desktop */
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 31px 40px;
}
.ah > * { position: relative; z-index: 2; }
.ah__top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ah__corner { width: 98.741px; height: 98.741px; flex: none; }
.ah__corner--r { transform: scaleX(-1); }
.ah__title { width: 692px; text-align: center; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.ah__gap { display: inline-block; width: 24px; height: 1.44em; }  /* Figma: two Agharti 96px spaces: widens the gap and deepens line 1 */
.ah__sub { flex: 1 0 auto; width: 100%; min-height: 200px; display: flex; align-items: center; justify-content: space-between; }
.ah__line { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.ah__sub { position: relative; }
.ah__divider { position: absolute; left: 50%; top: 50%; width: min(782px, calc(100% - 420px)); height: 43.84px; transform: translate(-50%, calc(-50% + 6.4px)); overflow: visible; z-index: 0; }
.ah__img {
  position: absolute; z-index: 1; left: 50%; transform: translateX(-50%);
  width: 904px; height: 608px;
  /* Only the bottom edge is a crop line. The painting's top is transparent, so the top and sides stay open and the
     mouse tilt (translate, rotate, 1.07 scale) never cuts the hair or the lion's paw off with a hard edge. */
  clip-path: inset(-50vh -12vw 0 -12vw);
  top: max(350px, calc(100% - 462px));
  perspective: 900px;
}
.ah__img img {
  position: absolute; left: 0; top: -91.99%; width: 100%; height: 223.93%; max-width: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ps, 1));
  transform-origin: center;
}

/* entrance (annotation: text, lines and image fade in) */
@media (prefers-reduced-motion: no-preference) {
  .ah .hdr { animation: ah-fade .8s var(--ease) both; }
  .ah__title { animation: ah-up 1.1s var(--ease-out) .15s both; }
  .ah__corner--l { animation: ah-corner 1.2s var(--ease-out) .35s both; }
  .ah__corner--r { animation: ah-corner-r 1.2s var(--ease-out) .35s both; }
  .ah__line--l { animation: ah-left 1.1s var(--ease-out) .55s both; }
  .ah__line--r { animation: ah-right 1.1s var(--ease-out) .55s both; }
  .ah__dl { transform-box: fill-box; transform-origin: center; animation: ah-draw 1.3s var(--ease-out) .7s both; }
  .ah__dd { animation: ah-fade .8s var(--ease) 1.1s both; }
  .ah__divider-t, .ah__divider-m { animation: ah-fade 1s var(--ease) .8s both; }
  .ah__img img { animation: ah-rise 1.6s var(--ease-out) .3s both; }
  @media (max-width: 699px) { .ah__img img { animation-duration: .9s; animation-delay: 0s; } }
}
@keyframes ah-fade { from { opacity: 0; } }
@keyframes ah-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes ah-left { from { opacity: 0; transform: translateX(-40px); } }
@keyframes ah-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes ah-draw { from { transform: scaleX(0); } }
@keyframes ah-corner { from { opacity: 0; clip-path: inset(0 0 100% 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ah-corner-r { from { opacity: 0; clip-path: inset(0 0 100% 100%); transform: scaleX(-1); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: scaleX(-1); } }
@keyframes ah-rise { from { opacity: 0; translate: 0 60px; } }

/* =========================================================
   2 · I AM RAFID (blue)
   ========================================================= */
.ad {
  --grain: .12;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-height: 88vh; min-height: 88svh; padding: 96px 200px;
  background: linear-gradient(180deg, var(--blue-900), var(--blue-700));
}
.ad__text { position: relative; z-index: 2; width: 1040px; max-width: 100%; text-align: center; font-size: clamp(24px, 2.3vw, 40px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: #b8b8b8; }
.ad__text p + p { margin-top: 1em; }
.ad__text p { color: #ddd2b9; }
.ad__dim, .ad__text p > span { color: rgba(221, 210, 185, .72); }
/* The whole statement fades in as one: it brightens from dim and rises into place as the section scrolls in, and
   is complete while the section still fills the screen. A scroll timeline where supported (no script), otherwise
   about.js adds .is-in when it comes into view and a transition plays. */
@keyframes ad-fade { from { opacity: .14; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ad__text { opacity: .14; transform: translateY(32px); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease-out); }
  .ad__text.is-in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    /* Timed on the section's place in the page: .ad clips its overflow, which makes it its own scroll container, so a
       plain view() on the text would measure inside the section and always read "fully in view". */
    .ad { view-timeline: --ad block; }
    .ad__text, .ad__text.is-in { transition: none; animation: ad-fade linear both; animation-timeline: --ad; animation-range: entry 15% contain 12%; }
  }
}
/* The arches span the full section height (it is near full screen now) and keep the drawing's proportions, so their ends still meet the rule rail below. */
.ad__arch { position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 119.279 / 499.5; z-index: 1; }
.ad__arch--l { left: 38.5px; }
.ad__arch--r { right: 41.7px; transform: scaleX(-1); }

/* =========================================================
   3 · RULES: one item open at a time; rail bump points at it
   ========================================================= */
.ar { --grain: 0; position: relative; padding: 80px 40px; display: flex; flex-direction: column; gap: 46px; }
.ar__rail { position: absolute; left: 39px; top: 0; width: 74px; height: 100%; overflow: visible; pointer-events: none; }
.ar__intro { display: flex; flex-direction: column; gap: 12px; padding: 0 24px; }
.ar__title { width: 416px; font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.ar__lede { width: 424px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text); }
.ar__list { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.rule { cursor: pointer; --open-pl: 120px; box-shadow: inset 0 -1px rgba(109, 95, 38, .4); padding: 24px; transition: padding .6s var(--ease-out); }
.rule.is-open { padding: 24px 0 24px var(--open-pl); }
.rule__head { display: flex; align-items: flex-start; gap: 56px; text-align: left; font-size: 40px; line-height: 1; letter-spacing: -.04em; white-space: nowrap; cursor: pointer; }
.rule__num { font-weight: 600; color: rgba(109, 95, 38, .3); transition: color .5s var(--ease); }
.rule__title { font-weight: 500; color: var(--ink); opacity: .5; transition: opacity .5s var(--ease); }
.rule.is-open .rule__num { color: #6d5f26; }
.rule.is-open .rule__title { opacity: 1; }
.rule:not(.is-open) .rule__head:hover .rule__title { opacity: .75; }
.rule__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.rule__body > div { overflow: hidden; min-height: 0; }
.rule__body p { width: 551px; max-width: 100%; margin-top: 18px; font-size: 16px; line-height: 1.5; color: var(--text); opacity: 0; transition: opacity .4s var(--ease); }
.rule.is-open .rule__body { grid-template-rows: 1fr; }
.rule.is-open .rule__body p { opacity: 1; transition-delay: .15s; }

/* =========================================================
   4 · MY MOTTO
   ========================================================= */
.am {
  --grain: .12;
  position: relative; overflow: hidden; height: 778px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 40px 80px;
  background: linear-gradient(180deg, var(--blue-700), var(--blue-900));
}
.am::before { content: ""; position: absolute; inset: 0; background: url("../img/painting-ruins-960.webp") center / cover no-repeat; opacity: .06; z-index: 0; pointer-events: none; }
.am > * { position: relative; }
.am::after { z-index: 6; }
.am__title { z-index: 5; font-size: 56px; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; padding: .06em .32em .2em; margin: -.06em -.32em -.2em; overflow: visible; }
.am__title .serif { font-size: 1em; display: inline-block; padding-right: .22em; }
.am__title .serif::after { content: "\00a0"; }
.am__lines { position: absolute !important; inset: 0; z-index: 2; margin: 0; }
.am__line { position: absolute; display: block; }
.am__line img { display: block; width: 100%; height: auto; }
.am__line--l { left: 80.9px; top: 371.1px; width: 491.4px; }
.am__line--r { right: 82.5px; top: 370.9px; width: 505.4px; }
/* Figma: 625×666 image, flipped + rotated 168.34°, progressive blur 0 → 31 over its lower half */
.am__photo { --ms: 1; position: absolute !important; z-index: 3; left: calc(50% - 53.62px); top: 99px; width: 746.764px; height: 778.27px; margin-left: -373.382px; display: flex; align-items: center; justify-content: center; pointer-events: none; transform: translate3d(0, var(--my, 0px), 0) scale(var(--ms)); will-change: transform; }
.am__lines { will-change: transform; }
/* Pre-composited motto photo (Figma: flipped, rotated 168.34°, progressive blur over its lower half): baked into one image */
.am__photo-img { display: block; width: 100%; height: 100%; }
.am__glow { position: absolute !important; z-index: 4; left: calc(50% - 846.9px); top: 366.1px; width: 1685.8px; height: 612.8px; max-width: none; pointer-events: none; }
.am__note { z-index: 5; margin-top: auto; font-size: 16px; line-height: 1.5; color: #ddd2b9; white-space: nowrap; }
.am__edges { position: absolute !important; inset: 0 40px 0 40px; z-index: 5; pointer-events: none; border-left: 1px solid #ddd2b9; border-right: 1px solid #ddd2b9; }

/* Motto parallax: the photo drifts 90px and the motto lines 32px against the scroll */
/* 295px of travel (was 230; 180 before that): rises from well below, stops before its bottom edge would show as the section leaves */
@keyframes am-photo-drift { from { transform: translate3d(0, 215px, 0) scale(var(--ms)); } to { transform: translate3d(0, -80px, 0) scale(var(--ms)); } }
@keyframes am-lines-drift { from { transform: translate3d(0, 75px, 0); } to { transform: translate3d(0, -75px, 0); } }
/* Phones: the photo rises slightly less at the end (its bottom edge would show by a couple of pixels at 390px) */
@keyframes am-photo-drift-m { from { transform: translate3d(0, 215px, 0) scale(var(--ms)); } to { transform: translate3d(0, -70px, 0) scale(var(--ms)); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .am { view-timeline: --motto block; }
    .am__photo { animation: am-photo-drift linear both; animation-timeline: --motto; animation-range: cover 0% cover 100%; }
    @media (max-width: 699px) { .am__photo { animation-name: am-photo-drift-m; } }
    .am__lines { animation: am-lines-drift linear both; animation-timeline: --motto; animation-range: cover 0% cover 100%; }
  }
}

/* =========================================================
   ≥1680 · Desktop 1920 frame
   ========================================================= */
@media (min-width: 1680px) {
  .ah { padding: 31px 80px; }
  .ah__line { font-size: 48px; }
  .ah__divider { width: calc(100% - 520px); max-width: 1400px; transform: translate(-50%, calc(-50% + 2.4px)); }
  /* Same proportions and placement as the 1440 design, scaled with the screen (a height cap used to squash it). */
  .ah__img { --w: min(62.8vw, 1400px); width: var(--w); height: calc(var(--w) * .6726); top: max(calc(var(--w) * .387), calc(100% - var(--w) * .511)); }

  .ad { padding: 120px 240px; }
  .ad__arch--l { left: 79.5px; }
  .ad__arch--r { right: 77.7px; }

  .ar { padding: 80px; }
  .ar__rail { left: 80px; }
  .ar__intro { padding: 0 40px; }
  .ar__title { font-size: 64px; }
  .ar__lede { font-size: 20px; }
  .rule__head { font-size: 48px; }
  .rule__body p { font-size: 20px; }

  .am__line--l { left: 160.9px; top: 368.1px; }
  .am__line--r { right: 162.5px; top: 367.9px; }
  .am__note { font-size: 20px; }
  .am__edges { inset: 0 80px; }
}

/* =========================================================
   ≤1199 · Tablet 834 frame
   ========================================================= */
@media (max-width: 1199px) {
  .ah { padding: 31px 40px; gap: 24px; }
  .ah__top { align-items: flex-start; }
  .ah__corner { width: 66px; height: 65px; }
  .ah__title { width: 621px; }
  .ah__sub { align-items: flex-start; padding: 40px 0; }
  .ah__divider { display: none; }
  .ah__divider-t { display: block; flex: none; width: 229px; height: 43px; margin-top: -1.5px; }
  .ah__img { width: 839px; height: 564px; top: max(384px, calc(100% - 428px)); }

  .ad { padding: 96px 120px; }
  .ad__text { width: 100%; font-size: 24px; }
  .ad__arch--l { left: 39.5px; }
  .ad__arch--r { right: 32.7px; }

  .rule { --open-pl: 60px; }

  .am__title { font-size: 56px; }
  .am__line--l, .am__line--r { left: 50%; right: auto; transform: translateX(-50%); }
  .am__line--l { top: 130.2px; width: 409.5px; }
  .am__line--r { top: 193.5px; width: 421.2px; }
  .am__photo { left: calc(50% - 29.9px); top: 203px; }
  .am__edges { inset: 0 40px; }
}

/* =========================================================
   ≤699 · Mobile 390 frame
   ========================================================= */
@media (max-width: 699px) {
  .br-d, .hide-m, .ah__divider-t { display: none; }
  .br-m { display: inline; }
  .ah { --grain: .15; padding: 20px; gap: 10px; background: var(--paper); }
  .ah__top { flex-wrap: wrap; row-gap: 32px; }
  .ah__corner { display: none; }
  .ah__corner--m { display: block; width: 46.52px; height: 46.52px; }
  .ah__title { order: 3; width: 100%; font-size: 40px; }
  .ah__gap { display: inline; width: auto; height: auto; }
  .ah__title .serif { letter-spacing: -.04em; }
  .ah__sub { flex: none; min-height: 0; margin-top: 22px; padding: 0 4px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; }
  .ah__divider-m { display: block; order: -1; width: 100%; max-width: 342px; height: 19.17px; }
  .ah__line { font-size: 28px; }
  .ah__img { width: 760px; height: 511px; left: -14px; transform: none; top: max(375px, calc(100% - 469px)); }

  .ad { padding: 72px 20px; }
  .ad::before { content: ""; position: absolute; inset: 0; background: url("../img/painting-landscape.webp") center / cover no-repeat; opacity: .12; }
  .ad__text { font-size: 20px; width: 350px; }
  .ad__arch { display: none; }

  .ar { --grain: .15; padding: 40px 20px; gap: 40px; background: var(--paper); }
  .ar__rail { display: none; }
  .ar__intro { padding: 0; width: 302px; max-width: 100%; }
  .ar__title { width: auto; font-size: 36px; }
  .ar__lede { width: auto; font-size: 14px; font-weight: 400; }
  .rule, .rule.is-open { padding: 12px 0; }
  .rule__head { flex-direction: column; gap: 8px; font-size: 28px; white-space: normal; }
  .rule__num { font-weight: 500; }
  .rule__body p { width: 100%; }

  .am { padding: 40px 20px; }
  .am__title { font-size: 36px; }
  .am__title .serif { letter-spacing: -.04em; }
  .am__line--l { top: 112.3px; width: 245.7px; }
  .am__line--r { top: 154.9px; width: 252.7px; }
  .am__photo { --ms: .9006; left: calc(50% - 46.9px); top: 150px; transform-origin: 50% 0; }
  .am__glow { left: calc(50% - 505.6px); top: 450.4px; width: 1227.3px; height: 446.1px; }
  .am__edges { inset: 0 16px 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rule, .rule__body, .rule__body p, .rule__num, .rule__title { transition: none; }
}

/* =========================================================
   Motto edges → CTA ornament lines: one continuous pair of lines.
   The ornament's vertical stroke sits at x = 21/117 of its box, so each ornament is placed
   to put that stroke on the centre of the motto's 1px border (inset + .5px).
   ========================================================= */
body.page-about .cta__orn--l { left: calc(var(--edge-l) + .5px - 116px * 21 / 117); }
body.page-about .cta__orn--r { right: calc(var(--edge-r) + .5px - 116px * 21 / 117); left: auto; }
body.page-about { --edge-l: 40px; --edge-r: 40px; }
@media (min-width: 1680px) { body.page-about { --edge-l: 80px; --edge-r: 80px; } }
@media (max-width: 699px) {
  body.page-about { --edge-l: 20px; --edge-r: 16px; }
  body.page-about .cta__orn--l { left: calc(var(--edge-l) + .5px - 62px * 21 / 117); }
  body.page-about .cta__orn--r { left: calc(100% - var(--edge-r) - .5px - 62px + 62px * 21 / 117); right: auto; }
}