/* ==========================================================================
   Crisp UI · the shared design system for bookcrisp.com
   Tokens first, then primitives (type, buttons, links, navigation).
   Page compositions live with their page; everything here is reusable.

   Principles
   - White ground with ivory accents, forest fields, ink text. The photographs bring the warmth. Orange marks a finished thing (the full stop) and nothing else.
   - Fraunces speaks at full size; Instrument Sans does the work. Space Grotesk is the wordmark only.
   - One radius family, one easing family, one set of durations. Motion settles, it never performs.
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-latin-opsz-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* colour: the approved Crisp palette, plus the neutrals derived from it */
  --forest:#1F4A3A; --forest-2:#183B2E; --ivory:#F3EFE7; --orange:#E07B3C; --cognac:#6B4423; --peach:#F4B07F; --white:#FFFFFF;
  /* ground: white, so the photography carries the warmth. Ivory stays as the accent band (--sand) and as the type colour over film */
  --paper:#FFFFFF; --paper-2:#F3F1ED; --sand:var(--ivory); --surface:#F7F5F1; --input:#FFFFFF; --ink:#1A221E; --ink-2:#4A524D; --night:#121815;
  --on-dark:#F3EFE7; --on-dark-2:#D9D5CC; --field:#8C8576; --ok:#2F6B3F; --wait:#8A5A12; --tint-ok:#DCE6E0;
  --btn:var(--forest); --on-btn:#FFFFFF; --fhead:var(--forest); --link:var(--forest); --foot:#1A221E; --kicker:var(--cognac);
  --hair:rgba(26,34,30,.1); --hair-dark:rgba(243,239,231,.16);

  /* type: three families, one fluid scale */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --logo:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --t-hero:clamp(56px,8.2vw,156px);       /* the opening line, once per page */
  --t-mega:clamp(52px,8.4vw,148px);       /* editorial statements */
  --fs-1:clamp(48px,7vw,116px);           /* page titles */
  --fs-2:clamp(36px,4.3vw,68px);          /* section heads */
  --fs-h3:clamp(24px,2.1vw,32px);         /* item heads */
  --fs-3:clamp(19px,1.55vw,22px);         /* lead */
  --fs-4:17px;                             /* body */
  --fs-5:14px;                             /* small */
  --w-display:350; --w-head:380;

  /* space: a 4px base, named by step */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --m:clamp(20px,3.6vw,56px);             /* page margin */
  --gap:24px; --max:1440px; --read:64ch;
  --sec:clamp(104px,11.5vw,184px);        /* section rhythm */

  /* shape */
  --r:24px; --r-sm:14px; --r-lg:32px; --r-pill:999px;

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.33,1,.68,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:.18s; --dur-2:.3s; --dur-3:.6s; --dur-4:1s; --dur-5:1.4s;

  /* layers */
  --head:60px; --z-head:30;

  /* legacy names used by the booking flow and inner pages */
  --bg:var(--paper); --fg:var(--ink); --muted:var(--ink-2); --line:#E4DFD6; --brand:var(--forest); --accent:var(--orange); --accent-ink:var(--cognac); --accent-band:var(--peach); --accent-tint:#F6E6D8; --band:var(--forest); --on-band:var(--on-dark); --primary:var(--btn); --on-primary:var(--on-btn);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#111814; --paper-2:#17201B; --sand:#151D19; --surface:#1A241F; --input:#111814; --ink:#EEE9E0; --ink-2:#B4BBB5; --forest:#183328; --forest-2:#132A20; --cognac:#8A5A33; --night:#0B100D;
  --on-dark:#EEE9E0; --on-dark-2:#C9CEC8; --field:#5E6A63; --ok:#8FC79D; --wait:#E0B266; --tint-ok:#1E3328; --kicker:#F2A46E; --hair:rgba(238,233,224,.14);
  --btn:#E8915A; --on-btn:#1A1410; --fhead:#EEE9E0; --link:#F2A46E; --foot:#0B100D; --line:#2C3832; --accent-ink:#F2A46E; --accent-tint:#2E2219; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111814; --paper-2:#17201B; --sand:#151D19; --surface:#1A241F; --input:#111814; --ink:#EEE9E0; --ink-2:#B4BBB5; --forest:#183328; --forest-2:#132A20; --cognac:#8A5A33; --night:#0B100D;
  --on-dark:#EEE9E0; --on-dark-2:#C9CEC8; --field:#5E6A63; --ok:#8FC79D; --wait:#E0B266; --tint-ok:#1E3328; --kicker:#F2A46E; --hair:rgba(238,233,224,.14);
  --btn:#E8915A; --on-btn:#1A1410; --fhead:#EEE9E0; --link:#F2A46E; --foot:#0B100D; --line:#2C3832; --accent-ink:#F2A46E; --accent-tint:#2E2219; color-scheme:dark}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 24px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-4)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums}
html,body{overflow-x:clip}
::selection{background:var(--peach);color:#1A221E}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;font-optical-sizing:auto}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--m)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.dot{color:var(--orange)}
.d1{font-family:var(--display);font-size:var(--fs-1);font-weight:var(--w-display);line-height:.96;letter-spacing:-.04em}
.d2{font-family:var(--display);font-size:var(--fs-2);font-weight:370;line-height:1.02;letter-spacing:-.032em}
.mega{font-family:var(--display);font-size:var(--t-mega);font-weight:340;line-height:.94;letter-spacing:-.046em}
.lead{font-size:var(--fs-3);line-height:1.5}
.small{font-size:var(--fs-5);line-height:1.5}
.soft,.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums lining-nums}
/* kicker: a short orange rule and a quiet label (orange alone is too faint for small text on ivory) */
.kicker{display:inline-flex;align-items:center;gap:12px;font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kicker)}
.kicker::before{content:"";width:22px;height:1.5px;background:var(--orange);flex:none}
.field .kicker,.on-photo.kicker{color:var(--peach)}

/* ---------- buttons: one shape, fully round ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);border:0;background:var(--btn);color:var(--on-btn);font:600 16px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-1) ease,color var(--dur-1) ease,box-shadow var(--dur-1) ease,transform .16s var(--ease-out)}
.btn:hover{background:color-mix(in srgb,var(--btn) 86%,#000);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:44px;padding:0 20px;font-size:15px}
.btn.xs{min-height:34px;padding:0 16px;font-size:14px}
.btn.on-dark,.btn.on-photo{background:var(--ivory);color:#1A221E}
.btn.on-dark:hover,.btn.on-photo:hover{background:#fff}
.btn.ghost{background:var(--paper-2);color:var(--ink)}
.btn.ghost:hover{background:color-mix(in srgb,var(--paper-2) 88%,#000)}
.btn.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
.btn.outline:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px var(--ink)}
.btn:disabled{background:var(--paper-2);color:var(--ink-2);cursor:not-allowed;transform:none}
.btn.go::after{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-2) var(--ease-out)}
.btn.go:hover::after{transform:translateX(3px)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--link);text-decoration:none;min-height:44px}
.more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .24s var(--ease-out)}
.more:hover{text-decoration:none}.more:hover::after{transform:translateX(4px) rotate(45deg)}
.on-field .more,.more.on-photo{color:var(--on-dark)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}

/* ---------- SoftNavigation ----------
   Compact and quiet. Over the opening film it is transparent with ivory type; past it, solid ivory with a hairline.
   It steps aside while you read down and returns the moment you scroll up. */
.logo{font-family:var(--logo);font-weight:700;letter-spacing:-.05em;color:inherit;text-decoration:none;font-size:26px;line-height:1;display:inline-flex}
header.site{position:fixed;inset:0 0 auto;z-index:var(--z-head);padding-top:env(safe-area-inset-top,0px);color:var(--ink);background:var(--paper);transition:transform .5s var(--ease-expo),background-color var(--dur-3) ease,color var(--dur-3) ease,box-shadow var(--dur-2) ease}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--head);max-width:var(--max);margin:0 auto;padding-inline:var(--m)}
header.site.scrolled{box-shadow:0 1px 0 var(--hair)}
header.site.tuck{transform:translateY(-100%)}
body.over-hero header.site{background:transparent;color:#F3EFE7;box-shadow:none}
body.over-hero header.site .logo .dot{color:var(--orange)}
body.over-hero nav.main a.btn{background:#F3EFE7;color:#1A221E}
nav.main{display:flex;align-items:center;gap:4px;font-weight:500;font-size:14px;letter-spacing:.005em}
nav.main a{position:relative;color:inherit;text-decoration:none;padding:8px 12px;opacity:.86;transition:opacity var(--dur-1) ease}
nav.main a:hover,nav.main a[aria-current="page"]{opacity:1}
nav.main a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
nav.main a:not(.btn):hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
nav.main a.btn{opacity:1;margin-left:12px;min-height:34px;padding:0 16px;font-size:14px;color:var(--on-btn)}
.menu-btn{display:none;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:0;background:color-mix(in srgb,currentColor 10%,transparent);color:inherit;font:600 14px var(--sans);cursor:pointer}
.menu-btn svg{width:18px;height:18px}
.head-right{display:none;align-items:center;gap:8px}
.head-cta{display:none}
body.over-hero .head-cta{background:#F3EFE7;color:#1A221E}
@media (max-width:900px){
  :root{--head:56px}
  nav.main{display:none;position:fixed;inset:0;background:var(--paper);color:var(--ink);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:calc(84px + env(safe-area-inset-top,0px)) var(--m) 32px;gap:0;z-index:-1;font-size:inherit}
  nav.main.open{display:flex}
  nav.main a{opacity:1;font-family:var(--display);font-size:36px;font-weight:370;letter-spacing:-.03em;padding:14px 2px;border-bottom:1px solid var(--hair)}
  nav.main a:not(.btn)::after{display:none}
  nav.main a[aria-current="page"]{color:var(--forest)}
  nav.main a.btn{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:0;margin:28px 0 0;border-bottom:0;justify-content:center;min-height:56px;background:var(--btn)!important;color:var(--on-btn)!important}
  @media (prefers-reduced-motion:no-preference){nav.main.open a{animation:navin .7s var(--ease-expo) both}nav.main.open a:nth-child(2){animation-delay:40ms}nav.main.open a:nth-child(3){animation-delay:80ms}nav.main.open a:nth-child(4){animation-delay:120ms}nav.main.open a:nth-child(5){animation-delay:160ms}@keyframes navin{from{opacity:0;transform:translateY(14px)}}}
  body.menu-open header.site{background:var(--paper)!important;color:var(--ink)!important;box-shadow:none;transform:none}
  body.menu-open{overflow:hidden}
  .menu-btn,.head-right,.head-cta{display:inline-flex}
  .head-cta{min-height:36px!important;padding:0 14px!important;font-size:14px!important}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}