/* Brand layer — Shurayh Brand Kit v2, "the arch system" (September 2026).
   Applied on top of the generated design: type, colour and grounds only. Layout, copy and
   buttons are untouched. The hero-arch hooks are written by postprocess.py at build time. */
:root{--midnight:#14263F;--lapis:#2E5EAA;--lapis-light:#4A7BD1;--lapis-deep:#24498A;--gold:#A8874C;--ice:#F7F4EC;--hair:#E2DCCB;--ink:#3B3F4A}
body{font-family:Manrope,system-ui,sans-serif;background:var(--ice)}

/* Type roles, gold rules, eyebrows and the dark grounds (arches + lapis glow + grain) are emitted per class into v2.css by transplant.py */

/* Home hero — ground B · ice (the kit's light website-hero variant; Osama 18 Sep 2026: "only light, no midnight shade").
   Ice ground, the single arch as a lapis glow holding the white wordmark, gold hairline arch 16px outside, lapis hairline
   arches falling from the top, midnight type and nav. No photo, no dark shade. Phones: smaller arch centred above the text. */
.hero-arch{--arch-top:clamp(84px,11vh,116px);--arch-right:clamp(28px,6vw,104px);--arch-h:calc(100% - 150px);background:var(--ice);color:var(--midnight)}
.hero-arch > img,.hero-arch > [data-hero-overlay],.hero-arch > [data-hero-fade],.hero-arch > [data-hero-caption]{display:none}
.hero-arch::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 30% 55% at 79% 58%,rgba(74,123,209,.22) 0%,rgba(46,94,170,.08) 50%,rgba(247,244,236,0) 100%),url(../brand/arches-lapis-22.svg) center top/90px 130px repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
.hero-arch::after{display:none}                                  /* grain belongs to dark grounds only */
.hero-arch__glow{position:absolute;right:var(--arch-right);top:var(--arch-top);height:var(--arch-h);aspect-ratio:2/3;max-width:38vw;pointer-events:none;display:grid;place-items:center;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,var(--lapis-light) 0%,var(--lapis) 55%,var(--lapis-deep) 100%);
  -webkit-mask-image:url(../brand/arch-mask.svg),linear-gradient(0deg,transparent 0,#000 30%);-webkit-mask-size:100% 100%,100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;
  mask-image:url(../brand/arch-mask.svg),linear-gradient(0deg,transparent 0,#000 30%);mask-size:100% 100%,100% 100%;mask-repeat:no-repeat;mask-composite:intersect}
.hero-arch__glow img{width:58%;height:auto;margin-top:-6%;filter:drop-shadow(0 12px 30px rgba(15,27,46,.35))}
.hero-arch__line{position:absolute;right:calc(var(--arch-right) - 16px);top:calc(var(--arch-top) - 16px);height:calc(var(--arch-h) + 16px);aspect-ratio:2/3;max-width:calc(38vw + 32px);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1800' preserveAspectRatio='none'%3E%3Cpath d='M4 1800 L4 744 C4 264 266 50 600 4 C934 50 1196 264 1196 744 L1196 1800' fill='none' stroke='%23A8874C' stroke-opacity='.85' stroke-width='5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%)}
/* the nav and buttons inside the ice hero switch from white to midnight (the wordmark = the kit's dark version) */
.hero-arch [data-nav-row] img[alt="Shurayh"]{content:url(../img/wordmark-midnight.png)}   /* fallback: the src is swapped at build time */
.hero-arch p{color:var(--ink)}                                     /* the design paints the intro white; ink on the ice ground */
.hero-arch [data-nav-links] a{color:var(--midnight)}
.hero-arch [data-nav-cta] a:last-child{border-color:rgba(20,38,63,.35);color:var(--midnight)}
.hero-arch .nav-burger{background:rgba(20,38,63,.08);color:var(--midnight)}
.hero-arch > div:last-child a + a{background:rgba(20,38,63,.06);border-color:rgba(20,38,63,.3);color:var(--midnight)}
@media (max-width:959px){   /* phones: a smaller arch centred above the text */
  .hero-arch{--arch-top:84px;--arch-h:min(26vh,220px)}
  .hero-arch > [class]:last-child{margin-top:0;padding-top:calc(var(--arch-top) + var(--arch-h) - 68px + 28px)}   /* text starts below the arch */
  .hero-arch__glow,.hero-arch__line{right:auto;left:50%;transform:translateX(-50%);max-width:70vw}
  .hero-arch__line{height:calc(var(--arch-h) + 16px);top:calc(var(--arch-top) - 16px)}
  .hero-arch::before{background-position:center,center top;background-image:radial-gradient(ellipse 60% 40% at 50% 28%,rgba(74,123,209,.18) 0%,rgba(46,94,170,.06) 50%,rgba(247,244,236,0) 100%),url(../brand/arches-lapis-22.svg)}
  [data-nav-row].is-open [data-nav-links] a{color:#fff}          /* the dropped-down phone menu stays midnight with white links */
}

/* the wordmark in the nav: brand says 48px on the website; 40px keeps the 68px bar breathing */
[data-nav-row] img[alt="Shurayh"]{height:40px}

/* 19 Sep 2026: the design export froze the Apply CTA in its "disabled" look (opacity .45, pointer-events none); the page validates on click, so the button is always live */
#go{opacity:1;pointer-events:auto}

/* limited places (capacity.js) */
.places-left{display:block;margin-top:10px;font-family:Marcellus,Georgia,serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#A8874C}
[data-soldout]{cursor:pointer}

/* workshop landing banner (Deliverables/Website Banner, 1920×640) with the Register button on it */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wb-hero{max-width:none!important;padding:22px clamp(16px,4vw,48px) 34px!important}
.wb-facts{margin-top:0!important;padding-top:clamp(28px,4vw,44px)!important}
.wbanner.full{margin:0;border-radius:0;box-shadow:none}
.wbanner.full img{width:100%;max-width:none}
.wb-hero>p{max-width:760px}
.wbanner{position:relative;margin:18px 0 24px;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(20,38,63,.18);background:#14263F}
.wbanner img{display:block;width:100%;height:auto}
.wbanner__cta{position:absolute;left:6.4%;bottom:13%;display:inline-block;background:#4A7BD1;color:#fff;font:600 15px/1 Manrope,system-ui,sans-serif;letter-spacing:.02em;padding:15px 24px;border-radius:12px;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.28);transition:background .2s}
.wbanner__cta:hover{background:#2E5EAA;color:#fff}
@media (max-width:760px){.wbanner__cta{position:static;display:block;text-align:center;margin:0;border-radius:0;padding:16px}.wbanner{border-radius:12px}}