/* Loris: shared styles for every page.
   Colours come from Loris's own brand: the logo navy, cream menu paper, terracotta plates,
   the pale blue shutters of the Gemmayze house and the cobalt awning stripes. */

@font-face{font-family:'Rakkas';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/rakkas-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/alexandria-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/alexandria-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'Aref Ruqaa';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/arefruqaa-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

:root{
  --cobalt:#041967;      /* the logo */
  --cobalt-2:#132b8c;    /* awning stripe, hovers on dark */
  --cobalt-3:#0a2079;
  --cream:#f6eedb;       /* menu paper */
  --cream-2:#ece0c3;
  --paper:#fbf6ea;
  --clay:#a24f28;        /* terracotta plates */
  --sky:#a9cfe8;         /* Gemmayze shutters */
  --ink:#0d1640;
  --ink-soft:#4a5070;
  --on-dark:#f6eedb;
  --on-dark-soft:#c4cae6;
  --font-display:'Rakkas',Georgia,serif;
  --font-body:'Alexandria',system-ui,sans-serif;
  --font-ar:'Aref Ruqaa','Alexandria',serif;
  --gutter:clamp(16px,4vw,48px);
  --wrap:min(1240px,100% - 2*var(--gutter));
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-weight:350;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
::selection{background:var(--cobalt);color:var(--cream)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--sky)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.04;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:clamp(2.4rem,5.2vw,4.4rem)}
h3{font-size:clamp(1.35rem,2vw,1.6rem)}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{width:var(--wrap);margin-inline:auto}
.ar{font-family:var(--font-ar)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cobalt);color:var(--cream);padding:10px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.on-dark{background:var(--cobalt);color:var(--on-dark)}
.on-cream{background:var(--cream);color:var(--ink)}
.on-paper{background:var(--paper);color:var(--ink)}
.on-sky{background:var(--sky);color:var(--cobalt)}
.sec{padding-block:clamp(72px,11vw,148px)}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:56ch}
.muted{color:var(--ink-soft)}
.on-dark .muted,.on-dark .lede{color:var(--on-dark-soft)}
.kicker{font-family:var(--font-ar);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2;color:var(--clay);margin:0 0 .4rem}
.on-dark .kicker{color:var(--sky)}

/* Buttons: square-cornered tablets, Kevin's rule: never pills */
.btn{--bg:var(--cobalt);--fg:var(--cream);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.75em 1.35em;border-radius:var(--r);background:var(--bg);color:var(--fg);font:600 1rem/1.1 var(--font-body);text-decoration:none;border:1.5px solid var(--bg);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .18s var(--ease);box-shadow:0 2px 0 rgba(4,25,103,.25)}
.btn svg{width:18px;height:18px;flex:none}
@media (hover:hover) and (pointer:fine){.btn:hover{box-shadow:0 6px 16px -6px rgba(4,25,103,.45)}}
.btn:active{transform:translateY(1px);box-shadow:none;transition-duration:.08s}
.btn--light{--bg:var(--cream);--fg:var(--cobalt);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn--ghost{--bg:transparent;--fg:currentColor;border-color:currentColor;box-shadow:none}
@media (hover:hover){.btn--ghost:hover{background:rgba(4,25,103,.07)}.on-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(246,238,219,.12)}}

/* Awning: the blue and cream striped canopy of the Loris terraces, used as a divider */
.awning{height:46px;background:repeating-linear-gradient(90deg,var(--cobalt) 0 30px,var(--cream) 30px 60px);
  -webkit-mask:radial-gradient(circle at 15px 30px,#000 14.5px,transparent 15px) 0 0/30px 100% repeat-x,linear-gradient(#000,#000) 0 0/100% 30px no-repeat;
          mask:radial-gradient(circle at 15px 30px,#000 14.5px,transparent 15px) 0 0/30px 100% repeat-x,linear-gradient(#000,#000) 0 0/100% 30px no-repeat;
  position:relative;z-index:2;margin-bottom:-46px}
.awning--on-dark{background:repeating-linear-gradient(90deg,var(--cream) 0 30px,var(--cobalt-2) 30px 60px)}

/* Header */
.site-head{position:fixed;inset:0 0 auto;z-index:50;color:var(--on-dark);transition:background-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.site-head.is-solid,.site-head--solid{background:rgba(4,25,103,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(246,238,219,.12)}
.site-head.is-hidden{transform:translateY(-100%)}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;min-height:44px;margin-right:auto;color:var(--cream)}
.brand svg{height:42px;width:auto}
.nav{display:flex;gap:26px}
.nav a{text-decoration:none;font-size:.95rem;font-weight:450;padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size .3s var(--ease)}
.nav a[aria-current=page]{background-size:100% 1px}
@media (hover:hover){.nav a:hover{background-size:100% 1px}}
.head-call{min-height:44px;padding:.6em 1.05em;font-size:.95rem;white-space:nowrap}
.menu-toggle{display:none;width:44px;height:44px;border:1.5px solid rgba(246,238,219,.5);border-radius:var(--r);background:transparent;cursor:pointer;place-items:center}
.menu-toggle svg{width:20px;height:20px}
@media (max-width:900px){
  .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:96px var(--gutter) 40px;background:var(--cobalt);visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s .3s}
  .nav a{font-family:var(--font-display);font-size:clamp(2.2rem,10vw,3.4rem);line-height:1.15;padding:6px 0}
  .site-head.is-open .nav{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
  .menu-toggle{display:grid}
}
@media (max-width:380px){.head-call .lbl{display:none}}

/* Page hero for sub-pages */
.page-hero{position:relative;overflow:hidden;padding:clamp(140px,22vh,220px) 0 clamp(64px,9vw,112px);background:var(--cobalt);color:var(--on-dark);isolation:isolate}
.page-hero h1{font-size:clamp(3rem,9vw,7.5rem);line-height:.95}
.page-hero .lede{margin-top:1.4rem}
.page-hero-pic{position:absolute;z-index:-1;inset:0;opacity:.32}
.page-hero-pic img{width:100%;height:120%;object-fit:cover;will-change:transform}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,25,103,.55),rgba(4,25,103,.92))}

/* Pointed-arch picture frame, the windows of the Gemmayze house */
.arch{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V46A64 64 0 0 1 50 0A64 64 0 0 1 100 46V140Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V46A64 64 0 0 1 50 0A64 64 0 0 1 100 46V140Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.round-top{border-radius:999px 999px var(--r) var(--r)}
.pic{position:relative;overflow:hidden;background:var(--cream-2)}
.pic img{width:100%;height:100%;object-fit:cover}
.pic--par img{transform:scale(1.16);will-change:transform}

/* Footer */
.foot{position:relative;overflow:hidden;background:var(--cobalt);color:var(--on-dark);padding:clamp(96px,11vw,140px) 0 calc(32px + env(safe-area-inset-bottom))}
.foot-top{display:grid;gap:32px;align-items:end;margin-bottom:clamp(40px,6vw,64px)}
@media (min-width:860px){.foot-top{grid-template-columns:auto 1fr}}
.foot-logo{width:min(100%,420px);color:var(--cream)}
.foot-logo svg{width:100%;height:auto}
.foot-tag{margin:.8rem 0 0;color:var(--on-dark-soft)}
.foot-tag .ar{font-size:1.3rem;margin-left:.5em;color:var(--sky)}
.foot-big{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.1;max-width:18ch;justify-self:end;text-align:right}
@media (max-width:859px){.foot-big{justify-self:start;text-align:left}}
.foot-cols{display:grid;gap:28px;grid-template-columns:1fr;padding-top:32px;border-top:1px solid rgba(246,238,219,.18)}
@media (min-width:700px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot-cols h2{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--on-dark-soft);margin-bottom:.5rem;letter-spacing:0}
.foot-cols p{margin:0;padding:3px 0}
.foot-cols a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
@media (hover:hover){.foot-cols a:hover{background-size:100% 1px}}
.foot-small{margin-top:48px;font-size:.82rem;color:#a8b0d6;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot-small p{margin:0;max-width:80ch}

/* Phone action bar */
.bar{position:fixed;z-index:60;left:0;right:0;bottom:0;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(4,25,103,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .4s var(--ease-out)}
.bar.is-on{transform:none}
.bar .btn{flex:1}
@media (max-width:760px){.bar{display:flex}.foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* Shared motion hooks */
.ln{padding-bottom:.06em;margin-bottom:-.06em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.bar,.site-head,.nav{transition:none!important}
}
main>section{position:relative}
.page-hero .kicker{color:var(--sky)}