@font-face{font-family:Fraunces;src:url(/fonts/fraunces-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:Amiri;src:url(/fonts/amiri-wordmark.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0627,U+0633,U+0644,U+0645}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink-soft) var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.5 var(--font-body);padding-bottom:calc(var(--tap) + env(safe-area-inset-bottom,0px));caret-color:var(--ink)}
::selection{background:var(--ink);color:var(--paper)}
[hidden]{display:none!important}
img,svg{display:block;max-width:100%;height:auto} img{border-radius:0} figure{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;margin:0 0 1rem;font-variation-settings:'SOFT' 50}
h1{font-size:2.625rem;line-height:1.048;font-variation-settings:'opsz' 42,'SOFT' 50}
h2{font-size:1.875rem;line-height:1.133;font-variation-settings:'opsz' 30,'SOFT' 50}
h3{font-size:1.5rem;line-height:1.167;font-variation-settings:'opsz' 24,'SOFT' 50}
p{margin:0 0 1rem} a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px;min-height:var(--tap);min-width:var(--tap);display:inline-flex;align-items:center;overflow-wrap:anywhere}
a:hover{text-decoration-thickness:2px} :focus-visible{outline:2px solid var(--ink);outline-offset:4px}
button,input,select,textarea{font:inherit;color:inherit;max-width:100%;min-width:0}
button,a.button,summary{min-height:var(--tap);min-width:var(--tap);cursor:pointer}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;border:1px solid var(--ink);border-radius:var(--radius-control);background:var(--paper);color:var(--ink);font-size:.9375rem;line-height:1.333;font-weight:600;text-decoration:none}
.button-primary{background:var(--ink);color:var(--paper);border-left:4px solid var(--terracotta)} .button-quiet{background:transparent;border-color:var(--line)}
button:disabled,.button[aria-disabled=true]{cursor:wait;color:var(--ink-soft);border-color:var(--line);background:var(--cream)}
input,select,textarea{min-height:var(--tap);padding:.625rem .75rem;border:1px solid var(--ink);border-radius:var(--radius-control);background:var(--paper);width:100%}
input[type=checkbox],input[type=radio]{width:var(--tap);height:var(--tap);flex:0 0 var(--tap);accent-color:var(--ink);vertical-align:middle}
textarea{min-height:8rem;resize:vertical} label{font-weight:600} label:has(input[type=checkbox]),label:has(input[type=radio]){display:flex;align-items:center;gap:.75rem;font-weight:400}
fieldset{min-width:0;border:1px solid var(--line);padding:1rem} legend{font-weight:600;padding:0 .5rem}
.form{display:grid;gap:1.25rem;max-width:36rem}.field{display:grid;gap:.5rem}.form-inline{margin-block:1rem}.field-hint,.small{font-size:.8125rem;line-height:1.385}.field-error{font-weight:600;border-block:1px solid var(--line);padding-left:.75rem}.field-error:empty{display:none}
[aria-invalid=true]{border:2px solid var(--ink)} .form-feedback,.flash-item,.notice{background:var(--paper);padding:1rem;border:1px solid var(--line);border-block:1px solid var(--line)}
.flash{display:grid;gap:.5rem;max-width:var(--max);margin-inline:auto}.flash:empty{display:none}
.main{max-width:var(--max);margin-inline:auto;min-height:50vh}.page,.oc-shell{padding:1.5rem var(--gutter) 3rem}.page-narrow{max-width:42rem;margin-inline:auto}.reading{max-width:var(--reading)}
.stack>*+*{margin-top:1rem}.muted,.lede{color:var(--ink-soft)}.lede{max-width:60ch}.eyebrow,.source-label,.credit{font-size:.75rem;line-height:1.5;color:var(--ink-soft)}
.plate{background:var(--paper);padding:1.25rem;border-block:1px solid var(--line)}
.card-grid,.list-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0} .card-grid>*{min-width:0}
.state-word{display:inline-flex;align-items:center;border-left:4px solid var(--ink);padding-left:.5rem;font-size:.8125rem;line-height:1.385;min-height:1.125rem}.state-words{display:flex;gap:1rem;flex-wrap:wrap;margin-block:.75rem}
.actions,.view-links{display:flex;flex-wrap:wrap;gap:.75rem}.view-links{border-bottom:1px solid var(--line);margin-block:1rem}.view-links a{padding:.5rem 1rem;text-decoration:none;border-bottom:2px solid transparent}.view-links [aria-current=page]{border-color:var(--ink);font-weight:600;position:relative}.view-links [aria-current=page]::after{content:"";position:absolute;left:0;bottom:-2px;width:.75rem;height:2px;background:var(--terracotta)}
.table-wrap{overflow-x:auto;max-width:100%}table{border-collapse:collapse;width:100%;font-size:.8125rem}th,td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:.75rem}th{font-weight:600}time,.figure,.money{font-variant-numeric:tabular-nums}
summary{padding:.75rem 0;font-weight:600}details{border-block:1px solid var(--line);margin-block:1rem}details+details{border-top:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-10rem;z-index:100;background:var(--paper);padding:.5rem 1rem}.skip:focus{top:.5rem}
.site-header{background:var(--cream);border-bottom:1px solid var(--line)}.nav{max-width:var(--max);margin:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);gap:1rem}
.wordmark{font:500 1.1875rem/1.263 var(--font-display);text-decoration:none;gap:.5rem;white-space:nowrap}.wordmark-arabic{font:400 1.4375rem/1.217 var(--font-arabic)}.nav-links{display:none;list-style:none;padding:0;margin:0;gap:1rem}.nav-links a{font-size:.8125rem;text-decoration:none}.nav-links [aria-current=page]{text-decoration:underline}
.tabbar{position:fixed;inset:auto 0 0;z-index:30;display:flex;background:var(--cream);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}.tabbar a{position:relative;flex:1;justify-content:center;font-size:.8125rem;line-height:1.385;text-decoration:none;border-top:2px solid transparent;min-height:var(--tap)}.tabbar [aria-current=page]{border-color:var(--ink);font-weight:600}.tabbar [aria-current=page]::after{content:"";position:absolute;top:-2px;left:0;width:.75rem;height:2px;background:var(--terracotta)}
.site-footer{max-width:var(--max);margin:0 auto;padding:1.5rem var(--gutter) 2rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-soft)}.footer-line{margin-bottom:.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem}.footer-line a{min-height:var(--tap)}
.currency{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.currency-select{width:auto}.currency[data-ready] .currency-go{display:none}
.pager{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-block:1.5rem}.pager a,.pager span[aria-current]{padding:.625rem .875rem;min-height:var(--tap);min-width:var(--tap)}
@media(min-width:768px){.nav-links{display:flex}.tabbar{display:none}body{padding-bottom:0}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.menu-disclosure{position:fixed;inset:var(--tap) 0 calc(var(--tap) + env(safe-area-inset-bottom,0px));overflow-y:auto;z-index:25;background:var(--cream);padding:1rem var(--gutter) 2rem;border-block:1px solid var(--line)}
.menu-disclosure>.menu-index{max-width:42rem;margin:auto}.menu-disclosure>[data-menu-close]{display:flex;margin:0 0 1.5rem auto}.area-index{list-style:none;padding:0;margin:0 0 2rem}.area-index li{border-bottom:1px solid var(--line)}.area-index a{display:flex;flex-direction:column;align-items:flex-start;padding:1rem 0;text-decoration:none;gap:.25rem}.area-index span{font:500 1.5rem/1.167 var(--font-display)}.area-index small{font-size:.8125rem;color:var(--ink-soft)}.menu-extra{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1.5rem}
@media(min-width:768px){.menu-disclosure{inset:var(--tap) 0 0}}

.oc-opening{position:relative;isolation:isolate;min-height:clamp(23.5rem,65vw,36rem);height:auto;background:var(--cream);overflow:hidden}
.oc-reveal,.oc-reveal-image,.oc-opening picture,.oc-placeholder{position:absolute;inset:0}.oc-opening img{width:100%;height:100%;object-fit:cover}.oc-placeholder{background:var(--cream)}
.oc-opening-copy{position:relative;z-index:1;padding:1.25rem var(--gutter);pointer-events:none}.oc-opening-label{display:table;background:var(--cream);padding:.375rem .625rem;font-size:.8125rem;line-height:1.385;margin-bottom:1rem}.oc-opening h1{font-size:3.875rem;line-height:1;font-variation-settings:'opsz' 62,'SOFT' 50;max-width:12ch;overflow-wrap:normal}.oc-opening-subtitle{max-width:30ch}.oc-image-label{position:absolute;bottom:1rem;left:var(--gutter);font-size:.75rem;background:var(--cream);padding:.125rem .375rem}
.oc-ledge{min-height:10rem;height:auto}.oc-ledge h1{font-size:2.625rem;line-height:1.048;max-width:22ch;font-variation-settings:'opsz' 42,'SOFT' 50}.oc-ledge-guest{height:auto;min-height:6rem}.oc-ledge-guest .oc-opening-label{margin:0}
.oc-claim p{margin-bottom:.5rem}.oc-claim .source-label{margin-bottom:1rem}.oc-claim{max-width:var(--reading)}
@supports(mask-image:linear-gradient(#000,#000)){.oc-reveal{mask-image:linear-gradient(#000,#000)}.is-changing .oc-reveal{animation:oc-reveal var(--reveal) var(--ease)}.is-changing .oc-reveal-image{animation:oc-counter var(--reveal) var(--ease)}}
@keyframes oc-reveal{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes oc-counter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(min-width:768px){.oc-opening:not(.oc-ledge) h1{font-size:6.5rem;line-height:1;font-variation-settings:'opsz' 104,'SOFT' 50}.oc-opening-copy{padding-top:2rem}.oc-ledge .oc-opening-copy{padding-top:1.25rem}}

.error-page{padding-top:3rem}.error-page h1{max-width:18ch}.error-page .actions{margin-block:1.5rem}.offline-line{margin:0;padding:1rem var(--gutter);background:var(--paper);border-bottom:1px solid var(--line);font-size:.8125rem}.form-error,.form-status{background:var(--paper);border-block:1px solid var(--line);padding:1rem;max-width:60ch}.form-status:empty{display:none}.form[aria-busy=true]{cursor:progress}.form-feedback p:last-child{margin-bottom:0}.form-feedback+.actions{margin-top:1rem}.admin-email-text{white-space:pre-wrap;overflow-wrap:anywhere}pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}

.support-record{padding:1.5rem 0;border-bottom:1px solid var(--line)}.support-record h2{font-size:1.5rem}.me-session-list{list-style:none;padding:0}.me-session{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.me-current{display:block;font-size:.8125rem}.booking-result .me-actions{display:flex;gap:.75rem;flex-wrap:wrap}

.oc-opening-photo h1{display:table;background:var(--cream);padding:.125em}.oc-ledge-guest img{object-position:left bottom}.oc-ledge-guest .oc-image-label{font-size:.625rem;bottom:.25rem}
/* Home opening on the phone. The square master has 48px of quiet wall above the reveal's ceiling at 375, and
   the pink beside the return is 142px wide, so a 62px place name cannot sit on plaster on one line; the name
   takes the opaque cream backing DESIGN.md prescribes when a crop fails 4.5:1 at every letter. The plate is
   anchored left and bottom so the burned Illustration label stays inside the crop at 320 and above the sill
   at 390 and 414. From 768 the wide crop gives the name room on the wall and the desktop crop applies. */
@media(max-width:767.98px){.oc-scene-home h1{display:table;background:var(--cream);padding:.125em .625rem}.oc-scene-home .oc-reveal-image img{object-position:0 100%}}
/* Band height. Phone: 376px on the 812 reference screen and shorter on shorter screens (DESIGN.md: shorter screens
   change the coordinates; shorten the picture when necessary) so the featured place, its Story and Visit pair,
   Read this place and the Eating and Prayer links share the first screen. From 768 the wide screen gains
   image space, not a taller poster: the band is capped near the phone height and to what leaves the featured
   place and its controls on screen at 800px tall. The 16rem floor (256px) is what leaves the primary action clear
   of the tab bar at 320 by 568 (docs/status/fix-p7d.md, fix 2). */
@media(max-width:767.98px){.oc-scene-home{min-height:clamp(16rem,46.4vh,23.5rem);min-height:clamp(16rem,46.4svh,23.5rem)}}
@media(min-width:768px){.oc-scene-home{min-height:clamp(23.5rem,100vh - 25rem,26rem)}}

/* Open City motion. Scenes are driven from the engine's --sc-p through CSS; nothing here moves
   without html.oc-motion, which the island adds only when scripting runs and motion is not reduced.
   Without JavaScript or under reduced motion every scene renders its resting composition. */
:root{--oc-ease-out:cubic-bezier(.23,1,.32,1)}

/* Scenes read a normalised timeline, --oc-t, that the island derives from the engine's progress: 0 with
   the page at its top, 1 as the band leaves. Without the island it stays at 0, the resting composition. */
.oc-scene{--oc-t:0}

/* Home opening: three planes. Sky and ridge behind the wall's opening, the wall itself at page speed
   carrying the headline, a peach sill in front. Amplitudes are set per width below. */
.oc-scene-home{--oc-sky-y:18px;--oc-sky-s:.06;--oc-sill-y:-12px;--oc-ridge-h:40%}
.oc-plane{position:absolute;inset:0}
.oc-plane-inner{position:absolute;inset:0}
.oc-plane-sky{inset:-40px 0 0;background:linear-gradient(180deg,#9ec1e5 0%,#b9d2ea 100%);transform:translate3d(0,calc(var(--oc-t) * var(--oc-sky-y)),0) scale(calc(1 + var(--oc-t) * var(--oc-sky-s)));transform-origin:82% 62%}
.oc-ridge{position:absolute;left:0;right:0;bottom:0;height:var(--oc-ridge-h);width:100%;display:block}
.oc-plane-wall{z-index:1}
.oc-plane-sill{z-index:2;inset:auto 0 -24px;height:calc(6% + 24px);transform:translate3d(0,calc(var(--oc-t) * var(--oc-sill-y)),0)}
.oc-plane-sill .oc-plane-inner{background:var(--peach);border-top:2px solid #d9b08f}
.oc-plane-sill .oc-plane-inner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:#e3bfa1}
.oc-scene-home .oc-opening-copy{z-index:3}
/* The Illustration label on the home is the template's cream label, set just above the sill. The wall plate carries a
   burned copy of the label that scales with the plate (about a third of the wall's height at 1280); until the plate is
   regenerated without it, .oc-plate-mask covers the burned patch with the plaster directly above it, cut from the same
   derivative, mirrored so the top edge is continuous. Geometry follows the plate's cover fit: the rendered plate is
   --oc-u square on the phone (the wider of the band's width and height, anchored bottom left) and --oc-u by .6252 of
   it from 768 (the wide crop at 50% 88%); the patch is x .0463 to .2903 and y .8493 to .937 of the square master,
   and the mask reaches .004 beyond it on every side to take the patch's soft edge
   (docs/status/fix-p7d.md, fix 3). Without container units the mask collapses and the burned label shows as before. */
.oc-scene-home{container-type:inline-size;--oc-band:clamp(16rem,46.4svh,23.5rem);--oc-u:max(100cqw,var(--oc-band))}
.oc-scene-home .oc-image-label{z-index:3;bottom:calc(6% + .5rem)}
.oc-plate-mask{position:absolute;overflow:hidden;left:calc(var(--oc-u) * .0423);width:calc(var(--oc-u) * .252);bottom:calc(var(--oc-u) * .059);height:calc(var(--oc-u) * .0957);transform:scaleY(-1)}
.oc-plate-mask picture{position:static}
.oc-plate-mask img{position:absolute;width:var(--oc-u);height:auto;max-width:none;object-fit:fill;left:calc(var(--oc-u) * -.0423);bottom:calc(var(--oc-u) * -.1547)}

/* Ledges: the picture lags the title by a small amount. Scaled from the bottom so the burned
   Illustration label keeps its place and the top edge never uncovers cream. */
.oc-scene-ledge .oc-reveal-image{transform:translate3d(0,calc(var(--oc-t) * 14px),0) scale(1.1);transform-origin:50% 100%}

/* Place opening: same crop in Story and Visit; only Story lets the picture sit behind the words. */
.oc-scene-place .oc-reveal-image{transform:scale(1.05);transform-origin:50% 100%}
.oc-scene-place.oc-story .oc-reveal-image{transform:translate3d(0,calc(var(--oc-t) * 18px),0) scale(1.05)}

/* Heritage chapter: the frame holds at the top while the reading sheet rises over it, and the
   photograph settles from a slight enlargement during the first stretch of scroll. */
.oc-scene-chapter .oc-reveal-image{transform:scale(calc(1 + .05 * (1 - var(--oc-y,1))));transform-origin:50% 40%}
html.oc-motion .oc-scene-chapter{position:sticky;top:0;z-index:0}
html.oc-motion .heritage-sheet{position:relative;z-index:1;background:var(--cream)}

/* Entrance reveals fire once, transform and opacity only. Content on screen at load is present at
   once; only what enters later rises in. */
html.oc-motion [data-sc-in]:not([data-sc-stagger]):not(.sc-in),html.oc-motion [data-sc-stagger]>:not(.sc-in){opacity:1;transform:none}
html.oc-motion [data-sc-in]:not([data-sc-stagger]),html.oc-motion [data-sc-stagger]>*{transition:opacity 620ms var(--oc-ease-out),transform 620ms var(--oc-ease-out)}
html.oc-motion .oc-in-now,html.oc-motion .oc-in-now>*{transition:none}

/* will-change only while a scene is live, cleared when it stops. */
[data-oc-live] [data-oc-plane],[data-oc-live] .oc-reveal-image{will-change:transform}

@media(min-width:768px){.oc-scene-home{--oc-sky-y:28px;--oc-sky-s:.08;--oc-sill-y:-18px;--oc-ridge-h:46%}.oc-plane-sill{height:calc(7% + 24px)}.oc-plane-sky{transform-origin:82% 50%}.oc-scene-home .oc-plane-wall img{object-position:50% 88%}.oc-scene-home .oc-ridge{bottom:40px}.oc-scene-home{--oc-u:100cqw}.oc-scene-home .oc-image-label{bottom:calc(7% + .5rem)}.oc-plate-mask{top:calc(88% - var(--oc-u) * .0797);bottom:auto}.oc-plate-mask img{top:calc(var(--oc-u) * -.3748);bottom:auto}}

@media(prefers-reduced-motion:reduce){.oc-scene{--oc-t:0}[data-oc-settle]{--oc-y:1}.oc-plane-inner{transform:none!important}}