/* =========================================================================== Citadel of Aleppo — implementation of `Citadel Website — Design System.md`. Route C, "Stone and Signal". Palette is the Touristech mosaic artwork (confirmed 2026-09-13). Section numbers below refer to that document. =========================================================================== */ /* ---- §2 Tokens --------------------------------------------------------- */ :root{ --navy-deep:#0d2c48; --space-cadet:#123451; --navy-tile:#143a56; --spiro:#19c7e8; --diamond:#b9f4f9; --anti-flash:#eff0f5; --warm-sand:#e7be8a; --terracotta:#d4914a; --brick:#b84e35; --olive:#6b7546; --majorelle:#6846e8; --meat-brown:#edbe38; --choc-cosmos:#5e0e16; --pastel:#d6cfb3; --seal-brown:#512d05; --apricot:#f2bf7f; --cream:#f7ecdc; --gold:var(--meat-brown); --boy-red:var(--olive); --navy-900:var(--navy-deep); --navy-800:var(--space-cadet); --navy-700:var(--navy-tile); --ink:#f4f7fa; --ink-2:#b8cbdc; --ink-3:#93a9bd; --line:rgba(231,190,138,.18); --line-soft:rgba(231,190,138,.11); --grout-bg:rgba(231,190,138,.12); --section:var(--spiro); --section-ink:var(--navy-deep); --tile-ref:108.808px; --wrap:1140px; --gutter:24px; --grout:2px; --cols:12; --s-1:7px; --s-2:14px; --s-3:27px; --s-4:54px; --s-5:81px; --s-6:109px; --font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif; --font-en:"IBM Plex Sans","Aktiv Grotesk","Helvetica Neue",Arial,sans-serif; --font-mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --t-display:clamp(44px,8.5vw,104px); --t-h1:clamp(34px,5.4vw,68px); --t-h2:clamp(25px,3.2vw,38px); --t-h3:clamp(19px,1.6vw,22px); --t-lead:clamp(18px,2.1vw,23px); --t-body:17.5px; --t-small:14.5px; --t-label:11px; --t-num:clamp(22px,2.6vw,34px); --t-tile:clamp(15px,1.4vw,19px); --track:.14em; --track-wide:.18em; --radius-0:0; --radius-1:3px; --radius:14px; --notch:clamp(22px,2.4vw,27px); --notch-s:6px; --dur-1:160ms; --dur-2:320ms; --dur-3:900ms; --ease:cubic-bezier(.16,.8,.3,1); --survey-line:1px; --survey-tick:7px; --survey-node:9px; --crop:1; } body{--ground:var(--navy-deep); --eyebrow:var(--spiro)} body[data-surface="light"]{ --ground:var(--anti-flash); --ink:var(--navy-deep); --ink-2:#48607a; --ink-3:#5c6f85; --line:#d9dbe3; --line-soft:#e4e6ec; --grout-bg:#d9dbe3; --eyebrow:var(--seal-brown); } /* §2 section colour, set on */ body[data-section="visit"] {--section:var(--spiro); --section-ink:var(--navy-deep)} body[data-section="discover"] {--section:var(--warm-sand); --section-ink:var(--navy-deep)} body[data-section="stations"] {--section:var(--majorelle); --section-ink:#fff} body[data-section="whats-on"] {--section:var(--meat-brown); --section-ink:var(--navy-deep)} body[data-section="old-city"] {--section:var(--olive); --section-ink:#fff} body[data-section="damage"] {--section:var(--brick); --section-ink:#fff} body[data-section="about"] {--section:var(--anti-flash); --section-ink:var(--navy-deep)} /* ---- base -------------------------------------------------------------- */ *{box-sizing:border-box} html{color-scheme:dark} body{margin:0;background:var(--ground);color:var(--ink); font-family:var(--font-en);font-weight:400;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body[dir="rtl"]{font-family:var(--font-ar);line-height:1.85;letter-spacing:0} img{max-width:100%;display:block} [hidden]{display:none!important} a{color:var(--warm-sand);text-underline-offset:3px} a:focus-visible,button:focus-visible{outline:2px solid var(--spiro);outline-offset:3px} body[data-surface="light"] a{color:var(--seal-brown)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);container-type:inline-size} .wrap--wide{max-width:1440px} .narrow{max-width:760px} main{display:block} section{padding-block:var(--s-5) 0} @media (max-width:767px){section{padding-block:var(--s-4) 0}} /* §3 type */ h1,h2,h3,h4{margin:0;letter-spacing:-.025em;text-wrap:balance} body[dir="rtl"] h1,body[dir="rtl"] h2,body[dir="rtl"] h3,body[dir="rtl"] h4{letter-spacing:0;line-height:1.3} h2{font-size:var(--t-h2);font-weight:700;margin-bottom:10px} h3{font-size:var(--t-h3);font-weight:600;margin:var(--s-3) 0 10px;color:var(--warm-sand)} body[data-surface="light"] h3{color:var(--seal-brown)} body[dir="rtl"] h1,body[dir="rtl"] h2{font-weight:600} .lead{color:var(--ink-2);font-size:var(--t-lead);max-width:58ch;margin:0 0 var(--s-3)} .prose{max-width:64ch;font-size:var(--t-body);color:var(--ink-2)} .prose p{margin:0 0 19px} .prose>p:first-of-type{font-size:calc(var(--t-body) + 3px);color:var(--ink);line-height:1.5} body[dir="rtl"] .prose>p:first-of-type{line-height:1.75} .prose b,.prose strong{color:var(--ink);font-weight:600} .mono{font-family:var(--font-mono)} .num{font-family:var(--font-en);font-weight:700;font-size:var(--t-num); font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.05} body[dir="rtl"] .num{font-family:var(--font-ar);font-weight:600;letter-spacing:0} /* §5.18 small labels — the mono register */ .k,.kicker,.pill,.eyebrow{font-family:var(--font-mono);font-size:var(--t-label); font-weight:500;text-transform:uppercase;letter-spacing:var(--track);line-height:1.35} body[dir="rtl"] .k,body[dir="rtl"] .kicker,body[dir="rtl"] .pill,body[dir="rtl"] .eyebrow{ font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:500} .pill{display:inline-block;background:var(--section);color:var(--section-ink); padding:5px 10px;letter-spacing:var(--track-wide); clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch-s)),calc(100% - var(--notch-s)) 100%,0 100%)} body[dir="rtl"] .pill{letter-spacing:0; clip-path:polygon(0 0,100% 0,100% 100%,var(--notch-s) 100%,0 calc(100% - var(--notch-s)))} .hero .pill,.phead--photo .pill{background:var(--diamond);color:var(--navy-deep)} .kicker{color:var(--section-ink);margin:0 0 14px} .phead--photo .kicker{color:var(--diamond)} .eyebrow{display:flex;align-items:center;gap:11px;color:var(--eyebrow);margin:0 0 18px} .eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none} /* ---- §5.1 masthead ----------------------------------------------------- */ .masthead{height:54px;background:var(--navy-deep) url(/assets/brand/band-masthead.webp) repeat-x center/auto 100%} @media (max-width:767px){.masthead{height:42px}} /* ---- §5.2 nav ---------------------------------------------------------- */ .site-head{background:rgba(13,44,72,.96);border-bottom:1px solid var(--line-soft); position:sticky;top:0;z-index:30} body[data-surface="light"] .site-head{background:var(--navy-deep)} .site-head .wrap{display:flex;align-items:center;gap:16px;padding-block:13px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f4f7fa;margin-inline-end:auto} .brand .mark{width:28px;height:28px;flex:none;stroke:var(--terracotta);fill:none;stroke-width:1.6;stroke-linejoin:round} .brand b{font-weight:600;font-size:16.5px;letter-spacing:-.01em;line-height:1.15;display:block} .brand small{display:block;font-size:10px;color:#93a9bd;letter-spacing:var(--track);text-transform:uppercase;font-weight:500} body[dir="rtl"] .brand small{letter-spacing:0;font-size:11.5px;text-transform:none} nav.main{display:flex;gap:2px;flex-wrap:wrap} nav.main a{color:#b8cbdc;text-decoration:none;font-size:14.5px;padding:8px 11px; border-bottom:2px solid transparent;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} nav.main a:hover{color:#f4f7fa} nav.main a[aria-current="page"]{color:#f4f7fa;border-bottom-color:var(--section)} .lang{font-size:13px;border:1px solid var(--line);color:#b8cbdc;padding:6px 12px; border-radius:var(--radius-1);text-decoration:none;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)} .lang:hover{border-color:var(--terracotta);color:var(--warm-sand)} /* ---- image system ------------------------------------------------------ */ figure{margin:0;position:relative} .fig{position:absolute;inset:0} .fig img{width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center; animation:resolve var(--dur-2) var(--ease) both} @keyframes resolve{from{opacity:.35}to{opacity:1}} .credit{position:absolute;inset-inline-end:9px;bottom:8px;z-index:4; font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.66); background:rgba(13,44,72,.55);padding:3px 8px;border-radius:var(--radius-1);max-width:70%;text-align:end} .illus{position:absolute;inset-inline-start:9px;bottom:8px;z-index:4;font-family:var(--font-mono); font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-deep); background:var(--apricot);padding:3px 8px;border-radius:var(--radius-1);font-weight:600} .duo{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply; background:linear-gradient(150deg,rgba(13,44,72,.66),rgba(25,199,232,.16) 55%,rgba(13,44,72,.86))} /* ---- §5.3 survey hero -------------------------------------------------- */ .hero--survey{position:relative;aspect-ratio:16/9;width:min(100%,calc(88svh * 16 / 9)); margin-inline:auto;overflow:hidden;background:var(--space-cadet);display:flex;align-items:flex-end} .hero--survey::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to top,rgba(13,44,72,.95) 2%,rgba(13,44,72,.62) 26%,rgba(13,44,72,.08) 62%,rgba(13,44,72,.34) 100%)} .hero__in{position:relative;z-index:5;padding:0 var(--s-3) var(--s-3);width:100%} .hero__in h1{font-size:var(--t-display);line-height:.98;font-weight:700;max-width:15ch; letter-spacing:-.035em;margin-top:10px} body[dir="rtl"] .hero__in h1{line-height:1.26;letter-spacing:0;font-weight:600;max-width:18ch} .tagline{margin:14px 0 0;color:var(--warm-sand);font-weight:600;font-size:var(--t-lead)} @media (max-width:639px){ .hero--survey{aspect-ratio:auto;display:grid;grid-template-rows:auto auto;width:100%} .hero--survey .fig{position:relative;aspect-ratio:16/9} .hero--survey::after{display:none} .hero--survey .survey{display:none} .hero__in{padding:var(--s-3) var(--gutter)} } /* §7 survey layer */ .survey{position:absolute;inset:0;z-index:3;pointer-events:none} .survey__dim{position:absolute;left:calc(var(--x1) * 1%);width:calc((var(--x2) - var(--x1)) * 1%); top:calc(var(--y) * 1%);height:var(--survey-line);background:var(--spiro);opacity:.85} .survey__dim::before,.survey__dim::after{content:"";position:absolute;top:calc(var(--survey-tick) / -2 + .5px); width:1px;height:var(--survey-tick);background:var(--spiro)} .survey__dim::before{left:0}.survey__dim::after{right:0} .survey__node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%); width:var(--survey-node);height:var(--survey-node);margin:-4px 0 0 -4px; border:1.4px solid var(--spiro);border-radius:50%;background:rgba(25,199,232,.2)} .survey__ann{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%); font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.05em;color:var(--diamond);white-space:nowrap} .survey__ann--v{writing-mode:vertical-rl} /* ---- §5.4 page header -------------------------------------------------- */ .phead{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)} .phead--photo{aspect-ratio:21/9;display:flex;align-items:flex-end;background:var(--space-cadet)} .phead--photo::after{content:"";position:absolute;inset:0;z-index:2; background:linear-gradient(to top,rgba(13,44,72,.96) 0%,rgba(13,44,72,.76) 32%,rgba(13,44,72,.14) 72%)} .phead--photo .wrap{position:relative;z-index:4;padding-block:var(--s-4) var(--s-3);width:100%} .phead--flat{background:var(--section);color:var(--section-ink);border-bottom:0} .phead--flat .wrap{padding-block:var(--s-4) var(--s-3)} .phead h1{font-size:var(--t-h1);line-height:1.04;font-weight:700;max-width:18ch;letter-spacing:-.03em} .phead .alt{font-size:var(--t-lead);margin:8px 0 0;font-weight:500;color:var(--warm-sand)} .phead--flat .alt{color:var(--section-ink);opacity:.72} .phead .sub{font-size:var(--t-lead);color:var(--ink-2);max-width:52ch;margin:16px 0 0} .phead--flat .sub{color:var(--section-ink);opacity:.85} @media (max-width:819px){.phead--photo{aspect-ratio:16/9}} /* ---- §4 grid + §5.5 tile ----------------------------------------------- */ .mos{--U:calc((100cqw - (var(--cols) - 1) * var(--grout)) / var(--cols)); display:grid;grid-template-columns:repeat(var(--cols),1fr); grid-auto-rows:88px;grid-auto-rows:var(--U);grid-auto-flow:dense; gap:var(--grout);padding:var(--grout);background:var(--grout-bg)} @media (max-width:1023px){:root{--cols:8}} @media (max-width:767px){:root{--cols:6;--gutter:16px}} @media (max-width:479px){:root{--cols:4}} .t{grid-column:span var(--w,1);grid-row:span var(--h,1); position:relative;overflow:hidden;border-radius:var(--radius-0); padding:var(--s-2);display:flex;flex-direction:column;justify-content:flex-end; background:var(--navy-tile);text-decoration:none;color:inherit} @media (max-width:479px){.t{padding:10px}} .w2{--w:2}.w3{--w:3}.w4{--w:4}.w6{--w:6}.h2{--h:2}.h3{--h:3} @media (max-width:767px){.w6{--w:4}} @media (max-width:479px){.w6,.w4{--w:4}.w3{--w:2}.h3{--h:2}} .t__shade{position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(13,44,72,.93),rgba(13,44,72,.15))} .t .k{position:relative;z-index:2;color:var(--diamond)} .t__title{position:relative;z-index:2;font-size:var(--t-tile);font-weight:700; line-height:1.18;margin-top:5px;color:#fff;transition:color var(--dur-1) var(--ease)} body[dir="rtl"] .t__title{font-weight:600;line-height:1.42} .t__alt{position:relative;z-index:2;font-size:12.5px;color:var(--warm-sand);margin-top:3px;font-family:var(--font-en)} a.t:hover .t__title{color:var(--warm-sand)} .t .num{position:relative;z-index:2;color:var(--warm-sand);margin-top:4px} .t--glyph{padding:0} .t--glyph img{width:100%;height:100%;object-fit:cover} .t--spiro{background:var(--spiro)} .t--diamond{background:var(--diamond)} .t--sand{background:var(--warm-sand)} .t--gold{background:var(--meat-brown)} .t--flash{background:var(--anti-flash)} .t--majorelle{background:var(--majorelle)} .t--olive{background:var(--olive)} .t--brick{background:var(--brick)} .t--cosmos{background:var(--choc-cosmos)} .t--spiro .k,.t--diamond .k,.t--sand .k,.t--gold .k, .t--spiro .num,.t--diamond .num,.t--sand .num,.t--gold .num, .t--spiro .t__title,.t--diamond .t__title,.t--sand .t__title,.t--gold .t__title{color:var(--navy-deep)} .t--flash .k{color:var(--seal-brown)} .t--flash .num,.t--flash .t__title{color:var(--navy-deep)} .t--majorelle .num,.t--majorelle .t__title,.t--olive .k,.t--olive .num,.t--olive .t__title, .t--brick .k,.t--brick .num,.t--brick .t__title{color:#fff} .t--majorelle .k{color:var(--diamond)} .t--cosmos .k,.t--cosmos .num,.t--cosmos .t__title{color:var(--warm-sand)} /* ---- §5.7 band rule ---------------------------------------------------- */ .band{border:0;height:18px;margin-block:var(--s-4);background-repeat:repeat-x; background-position:center;background-size:auto 100%} .band--battlement{background-image:url(/assets/glyph/band-battlement.webp)} .band--dots{background-image:url(/assets/glyph/band-dots.webp)} .band--diamond{background-image:url(/assets/glyph/band-diamond.webp)} .band--circles{background-image:url(/assets/glyph/band-circles.webp)} /* ---- §5.8–5.10 panels -------------------------------------------------- */ .notch{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%); border-radius:0} [dir="rtl"] .notch{clip-path:polygon(0 0,100% 0,100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)))} .panel--cream{background:var(--cream);color:#2a4257;padding:24px 26px} .panel--cream .eyebrow{color:var(--seal-brown)} .panel--cream .eyebrow::before{display:none} .panel--cream p{margin:0;font-size:16px} .panel--cream b{color:var(--navy-deep)} .stand-note{margin:0 0 var(--s-3)} .dia{display:inline-block;width:26px;height:26px;flex:none} .dia i{display:block;width:100%;height:100%;transform:rotate(45deg); background: linear-gradient(var(--terracotta),var(--terracotta)) 50% 0/34% 34% no-repeat, linear-gradient(var(--terracotta),var(--terracotta)) 0 50%/34% 34% no-repeat, linear-gradient(var(--terracotta),var(--terracotta)) 100% 50%/34% 34% no-repeat, linear-gradient(var(--terracotta),var(--terracotta)) 50% 100%/34% 34% no-repeat} /* ---- §5.11 film slot --------------------------------------------------- */ .video{position:relative;display:block;aspect-ratio:16/9;max-width:720px;overflow:hidden; background:var(--space-cadet);border:1px solid var(--line-soft);margin:0 0 var(--s-3); text-decoration:none;color:var(--ink-3)} .video img{width:100%;height:100%;object-fit:cover} .video__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;text-align:center;padding:20px;font-size:var(--t-small)} .video__play svg{width:30px;height:30px;stroke:var(--spiro);fill:none;stroke-width:1.5} /* ---- §5.12 data bar ---------------------------------------------------- */ .databar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:0 0 var(--s-3); background:var(--space-cadet);gap:1px;background-image:none} .databar>div{background:var(--space-cadet);padding:16px 18px;box-shadow:1px 0 0 var(--line-soft)} .databar>div:last-child{box-shadow:none} .databar dt{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--track); text-transform:uppercase;color:var(--spiro);margin:0 0 6px} body[dir="rtl"] .databar dt{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:12.5px} .databar dd{margin:0;font-size:var(--t-small);color:var(--ink-2)} .databar dd b{font-size:var(--t-num);color:var(--ink);font-weight:700; font-variant-numeric:tabular-nums;margin-inline-end:6px} .databar--light{background:var(--anti-flash)} .databar--light>div{background:var(--anti-flash);box-shadow:1px 0 0 #d9dbe3} .databar--light dt{color:var(--seal-brown)} .databar--light dd,.databar--light dd b{color:var(--navy-deep)} @media (max-width:619px){.databar{grid-auto-flow:row}.databar>div{box-shadow:0 1px 0 var(--line-soft)}} /* ---- §5.13 era row ----------------------------------------------------- */ .era{display:grid;grid-template-columns:86px minmax(110px,160px) 1fr 56px;gap:0 22px; align-items:center;border-top:1px solid var(--line-soft);padding-block:var(--s-2)} .era__swatch{display:block;width:86px;height:64px;background:var(--era,var(--pastel))} .era__when{font-family:var(--font-mono);font-size:13px;color:var(--spiro);font-weight:500} body[dir="rtl"] .era__when{font-family:var(--font-ar);font-size:14px} .era__when span{display:block;color:var(--ink-3);font-weight:400;font-size:12px;margin-top:4px} .era h4{font-size:19px;font-weight:600;color:var(--ink)} .era p{margin:6px 0 0;color:var(--ink-2);font-size:15px;max-width:62ch} .era .ev{font-size:12.5px;color:var(--ink-3);margin-top:6px} .era__glyph{width:56px;height:56px;object-fit:cover} @media (max-width:619px){ .era{grid-template-columns:1fr;gap:8px;border-inline-start:6px solid var(--era,var(--pastel));padding-inline-start:14px} .era__swatch,.era__glyph{display:none} } /* ---- §5.14 rows -------------------------------------------------------- */ .rows{border-top:1px solid var(--line-soft);margin:0} .row{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:6px 26px; padding:15px 0;border-bottom:1px solid var(--line-soft);align-items:baseline} .row dt{font-weight:600;color:var(--ink);font-size:15.5px;margin:0} .row dd{margin:0;color:var(--ink-2);font-size:15.5px} @media (max-width:619px){.row{grid-template-columns:1fr}} /* monument fact strip */ .mfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:1px; background:var(--line-soft);border-block:1px solid var(--line-soft);margin:0 0 var(--s-4)} .mfact{background:var(--ground);padding-block:20px;padding-inline:0 20px} .mfact dt{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--track); text-transform:uppercase;color:var(--ink-3);margin:0 0 7px} body[dir="rtl"] .mfact dt{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:12.5px} .mfact dd{margin:0;font-size:15.5px;color:var(--warm-sand);font-weight:600;line-height:1.35} /* ---- §5.15 pager ------------------------------------------------------- */ .pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s-5); border-top:1px solid var(--line);padding-top:var(--s-3)} .pager a{text-decoration:none;color:var(--ink-3)} .pager a:last-child{text-align:end} .pager a b{display:block;color:var(--warm-sand);font-weight:600;font-size:19px;margin-top:6px; letter-spacing:-.015em;line-height:1.25;transition:color var(--dur-1) var(--ease)} body[dir="rtl"] .pager a b{letter-spacing:0} .pager a:hover b{color:var(--ink)} @media (max-width:619px){.pager{grid-template-columns:1fr}.pager a:last-child{text-align:start}} /* ---- §5.16 provisional ------------------------------------------------- */ .ph{background:rgba(212,145,74,.16);color:var(--apricot); border-bottom:1px dashed var(--terracotta);padding:0 4px;border-radius:var(--radius-1)} body[data-surface="light"] .ph{background:rgba(212,145,74,.18);color:var(--seal-brown)} .ph-note{display:flex;gap:12px;align-items:flex-start;background:rgba(212,145,74,.10); border:1px solid rgba(212,145,74,.4);border-radius:var(--radius);padding:14px 16px; color:var(--apricot);font-size:var(--t-small);margin:var(--s-3) 0 0} body[data-surface="light"] .ph-note{color:var(--seal-brown)} .ph-note svg{flex:none;width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;margin-top:3px} .ph-note p{margin:0} /* ---- plain cards (pages with no imagery) ------------------------------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px} .card{background:var(--space-cadet);border:1px solid var(--line-soft); padding:24px;text-decoration:none;color:inherit;display:block; transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)} body[data-surface="light"] .card{background:#fff;border-color:var(--line)} .card:hover{border-color:var(--terracotta)} .card .k{color:var(--spiro);display:block;margin-bottom:9px} .card h4{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.3;color:var(--ink)} .card p{margin:0;font-size:var(--t-small);color:var(--ink-2)} /* section head */ .shead{display:flex;align-items:baseline;gap:16px;margin-bottom:var(--s-3);flex-wrap:wrap} .shead h2{margin:0} .shead .n{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--track); color:var(--ink-3);margin-inline-start:auto;text-transform:uppercase} body[dir="rtl"] .shead .n{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:12.5px} /* ---- §5.17 footer ------------------------------------------------------ */ footer{background:var(--space-cadet);margin-top:0} body[data-surface="light"] footer{background:var(--navy-deep);color:#f4f7fa} footer .wrap{padding-block:var(--s-4) var(--s-2);display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px} footer h5{margin:0 0 13px;font-family:var(--font-mono);font-size:var(--t-label); letter-spacing:var(--track);text-transform:uppercase;color:var(--spiro);font-weight:600} body[dir="rtl"] footer h5{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:12.5px} footer a{display:block;color:#b8cbdc;text-decoration:none;font-size:var(--t-small);padding:4px 0; transition:color var(--dur-1) var(--ease)} footer a:hover{color:var(--warm-sand)} .authority{border-top:1px solid var(--line);padding-block:var(--s-3) var(--s-4); font-size:13px;color:#93a9bd;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between} .authority b{color:#b8cbdc;font-weight:500;display:block;margin-bottom:3px} .authority .by{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none} .authority .by .k{color:#93a9bd} .authority img{height:22px;width:auto} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }