/* santa-ray.com — vintage storybook print. Signature: deckle-edged snapshot prints, slightly askew. */
@font-face{font-family:"Lobster";src:url(/assets/fonts/lobster-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/librecaslontext-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/librecaslontext-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/assets/fonts/librecaslontext-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --parchment:#F4ECDC; --paper:#FBF7EE; --cocoa:#2E1F18; --cocoa-2:#5A463B;
  --red:#A3291F; --red-dark:#7E1D15; --sage:#46553F; --gold:#B8892B; --gold-soft:#EAD49C;
  --script:"Lobster",Georgia,serif; --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--parchment);color:var(--cocoa);font-family:var(--serif);font-size:1.0625rem;line-height:1.7;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
a:hover{color:var(--red-dark)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--paper);padding:8px 14px}

h1,h2,h3{font-family:var(--script);font-weight:400;line-height:1.12;margin-block:0 .45em;color:var(--red)}
h1{font-size:clamp(2.5rem,5.2vw,4.4rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:1.6rem}
p{margin-block:0 1em}
.label{font-family:var(--serif);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--cocoa-2);margin-block:0 .9rem;display:flex;align-items:center;gap:.8rem}
.label::before{content:"";width:34px;height:2px;background:var(--gold);flex:none}
.lede{font-size:1.2rem;line-height:1.6;color:var(--cocoa-2)}

.btn{display:inline-block;background:var(--red);color:var(--paper);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:.95rem;letter-spacing:.04em;padding:.7em 1.3em;border:2px solid var(--red);border-radius:3px}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:var(--paper)}
.btn-lg{font-size:1.05rem;padding:.85em 1.6em}
.btn-cream{background:var(--paper);color:var(--red);border-color:var(--paper)}
.btn-cream:hover{background:transparent;color:var(--paper);border-color:var(--paper)}

/* ---------- the print (signature) ---------- */
.print{margin:0;display:block;filter:drop-shadow(0 1px 1px rgba(46,31,24,.25)) drop-shadow(0 10px 14px rgba(46,31,24,.18));transform:rotate(var(--r,0deg))}
.paper{--d:4px;display:block;background:var(--paper);padding:12px 12px 14px;
  -webkit-mask:radial-gradient(var(--d),#000 96%,#0000) calc(-1*var(--d)) calc(-1*var(--d))/calc(2*var(--d)) calc(2*var(--d)) round,linear-gradient(#000 0 0) center/calc(100% - 2*var(--d)) calc(100% - 2*var(--d)) no-repeat;
          mask:radial-gradient(var(--d),#000 96%,#0000) calc(-1*var(--d)) calc(-1*var(--d))/calc(2*var(--d)) calc(2*var(--d)) round,linear-gradient(#000 0 0) center/calc(100% - 2*var(--d)) calc(100% - 2*var(--d)) no-repeat}
.paper img{width:100%;background:#e9dfcc}
@media (prefers-reduced-motion:no-preference){
  a.print{transition:transform .25s ease}
  a.print:hover,a.print:focus-visible{transform:rotate(0deg) scale(1.02)}
}

/* ---------- header ---------- */
.masthead{background:var(--paper);border-bottom:1px solid #e3d6bd;position:relative;z-index:5}
.masthead-in{display:flex;align-items:center;gap:28px;min-height:96px}
/* Logo doubled 2026-10-06 (Chris: "make the logo bigger, 2x"): 208px badge hangs ~118px below the header,
   so the first section on every page gets extra top padding on desktop (rule below). */
.brand{flex:none;margin-block:6px -118px;position:relative;z-index:6}
.brand img{width:208px;height:208px;filter:drop-shadow(0 6px 10px rgba(46,31,24,.22))}
@media (min-width:1081px){#main>section:first-child{padding-top:168px}}
@media (min-width:1081px) and (max-width:1280px){.masthead .tel{display:none}}   /* keeps the nav on one line beside the 208px logo */
.nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:28px;row-gap:6px}
.nav a{color:var(--cocoa);text-decoration:none;font-size:.98rem;padding-block:4px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--gold);color:var(--cocoa)}
.masthead nav{flex:1}
.masthead-cta{display:flex;align-items:center;gap:20px;flex:none}
.tel{color:var(--cocoa);font-weight:700;text-decoration:none;white-space:nowrap}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,110px);overflow:hidden;position:relative}
.snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.hero-in{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{max-width:12ch}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-block:1.6em 1.8em}
.hero-act span{color:var(--cocoa-2)}
.hero-act span a{color:var(--cocoa);font-weight:700}
.events{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-style:italic;color:var(--cocoa-2);font-size:.98rem}
.events li::before{content:"✦";font-style:normal;color:var(--gold);padding-right:.5em;font-size:.7em;vertical-align:.15em}
.events-col{display:block}
.events-col li{padding-block:.25em;border-bottom:1px dotted #cdbb98}
.events-col li::before{content:none}
/* Small prints only overlap EMPTY corners of the big reindeer print (trees top-left, snow bottom-right) —
   never a face. Chris 2026-10-06: the baby print was covering Santa's face. Geometry is all %, so it holds at every width. */
.hero-stack{position:relative;aspect-ratio:1/1.06}
.hero-stack .print{position:absolute}
.hero-stack .p1{--r:-2deg;width:70%;left:20%;top:18.9%;z-index:1}
.hero-stack .p3{--r:-5deg;width:28%;left:0;top:0;z-index:3}
.hero-stack .p2{--r:4deg;width:36%;left:60%;top:66%;z-index:2}

/* ---------- about ---------- */
.about{padding-block:clamp(56px,8vw,110px);background:var(--paper);border-block:1px solid #e3d6bd}
.about-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:start}
.about-print{--r:-1.6deg;position:sticky;top:30px;max-width:440px}
.about-copy h2{max-width:18ch}
.pull{margin:1.8em 0;padding:1.1em 0 1em 0;border-block:2px solid var(--gold);position:relative}
.pull p{font-family:var(--script);font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.35;color:var(--sage);margin:0}

/* ---------- how to book (sage band; was "Christmas Magic") ---------- */
.magic{background:var(--sage);color:var(--paper);padding-block:clamp(56px,8vw,100px)}
.magic-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,90px)}
.magic h2,.magic h3{color:var(--paper)}
.magic .label{color:var(--gold-soft)}
.magic-head p:last-child{font-size:1.15rem;opacity:.92}
.magic-list{list-style:none;counter-reset:m;margin:0;padding:0}
.magic-list li{counter-increment:m;display:grid;grid-template-columns:4.2rem minmax(0,1fr);column-gap:1.2rem;padding-block:1.4rem;border-top:1px solid rgba(251,247,238,.28)}
.magic-list li:last-child{border-bottom:1px solid rgba(251,247,238,.28)}
.magic-list li::before{content:counter(m,decimal-leading-zero);grid-row:span 3;font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--gold-soft)}
.magic-list h3{margin-block:0 .25em}
.magic-list p{margin:0}
.magic-list .arrow{color:var(--gold-soft);font-weight:700;margin-top:.5em;display:inline-block}
.magic-list .arrow::after{content:" →"}

/* ---------- gallery ---------- */
.gallery{padding-block:clamp(56px,8vw,110px)}
.gallery-head{margin-bottom:clamp(28px,4vw,48px)}
.prints{list-style:none;margin:0;padding:0;column-count:4;column-gap:clamp(16px,2.2vw,30px)}
.prints li{break-inside:avoid;margin-bottom:clamp(18px,2.4vw,32px);padding:4px}
.prints li:nth-child(5n+1) .print{--r:-1.8deg}
.prints li:nth-child(5n+2) .print{--r:1.3deg}
.prints li:nth-child(5n+3) .print{--r:-.7deg}
.prints li:nth-child(5n+4) .print{--r:2.1deg}
.prints li:nth-child(5n+5) .print{--r:-1.2deg}
.prints .paper{padding:9px 9px 11px}

/* lightbox (site.js) */
.lb{border:0;padding:0;background:transparent;max-width:min(94vw,1200px);max-height:94vh;overflow:visible}
.lb::backdrop{background:rgba(30,20,15,.88)}
.lb img{max-height:86vh;width:auto;margin-inline:auto;border:10px solid var(--paper)}
.lb-bar{display:flex;justify-content:center;gap:12px;margin-top:12px}
.lb-bar button{font-family:var(--serif);font-weight:700;background:var(--paper);color:var(--cocoa);border:0;padding:.5em 1em;border-radius:3px;cursor:pointer}

/* ---------- closing band ---------- */
.close{background:var(--red);color:var(--paper);padding-block:clamp(48px,7vw,84px)}
.close-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.close h2{color:var(--paper)}
.close p{font-size:1.15rem;margin:0}
.close-reach{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.close-reach a{color:var(--paper)}
.big-tel{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.1;text-decoration:none;letter-spacing:.02em}
.close-reach .btn{margin-top:10px}
.close-reach .btn-cream{color:var(--red)}
.close-reach .btn-cream:hover{color:var(--paper)}

/* photo backgrounds under the two colour bands (Chris 2026-10-10): Ray's own photos,
   tinted with the band colour so the cream text keeps its contrast */
.magic{background:linear-gradient(100deg,rgba(70,85,63,.80) 0%,rgba(70,85,63,.84) 45%,rgba(70,85,63,.92) 100%),url(/assets/img/bg-booking.jpg) center 30%/cover no-repeat var(--sage)}
.close{background:linear-gradient(100deg,rgba(163,41,31,.80) 0%,rgba(163,41,31,.86) 55%,rgba(126,29,21,.90) 100%),url(/assets/img/bg-close.jpg) center/cover no-repeat var(--red)}

/* ---------- footer ---------- */
.foot{background:var(--cocoa);color:#e9dcc6;padding-top:56px;font-size:.98rem}
.foot a{color:#f6eedd}
.foot .label{color:var(--gold-soft)}
.foot-in{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px}
.foot-brand img{width:132px;height:132px;margin-bottom:12px}
.foot-contact{font-style:normal;display:flex;flex-direction:column;gap:6px}
.foot-nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.foot-nav li{margin-bottom:6px}
.foot-base{border-top:1px solid rgba(233,220,198,.2);margin-top:44px;padding-block:20px;font-size:.85rem;color:#c9b99d}
.foot-base p{margin:0}

/* ---------- inner pages ---------- */
.page-head{padding-block:clamp(44px,6vw,80px)}
.page-head-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.head-print{--r:2deg;max-width:520px;justify-self:end}
.page-head-plain{padding-bottom:20px}
.book{padding-block:20px clamp(56px,8vw,100px)}
.book-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,64px);align-items:start}
.widget{min-height:520px}
.book-aside{background:var(--paper);padding:28px 30px;border-top:4px solid var(--red)}
.book-aside h2{font-size:1.7rem;color:var(--cocoa)}
.book-aside h2+*{margin-bottom:1.6em}
.reach{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 1.6em}
.reach dt{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--cocoa-2);padding-top:.35em}
.reach dd{margin:0;overflow-wrap:anywhere}
.aside-note{font-size:.95rem;font-style:italic;color:var(--cocoa-2);margin:0}

/* Santa's List — a ledger page */
.ledger-wrap{padding-block:10px clamp(56px,8vw,100px)}
.ledger{background:var(--paper);padding:clamp(22px,4vw,44px);border-top:4px solid var(--red);box-shadow:0 10px 24px rgba(46,31,24,.08)}
.ledger fieldset{border:0;margin:0 0 8px;padding:0 0 22px;border-bottom:1px solid #e3d6bd}
.ledger fieldset+fieldset{padding-top:18px}
.ledger legend{font-family:var(--script);font-size:1.7rem;color:var(--red);padding:0;margin-bottom:.4em}
.ledger label{display:block;margin-bottom:14px}
.ledger label>span{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--cocoa-2);margin-bottom:4px}
.ledger label em{color:var(--red);font-style:normal}
.ledger input,.ledger select,.ledger textarea{width:100%;font-family:var(--serif);font-size:1.02rem;color:var(--cocoa);background:#fffdf8;border:1px solid #cdbb98;border-radius:2px;padding:.6em .7em}
.ledger textarea{background:repeating-linear-gradient(#fffdf8 0 1.7em,#eadfca 1.7em calc(1.7em + 1px));line-height:1.7em;padding-top:.2em}
.ledger input:focus,.ledger select:focus,.ledger textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.row3{display:grid;grid-template-columns:1fr 1fr 1.25fr;column-gap:18px}
.row3 .row2{grid-template-columns:.75fr 1.25fr}
.count{max-width:340px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:22px 0 0}
.submit span{font-size:.95rem;color:var(--cocoa-2)}
html.js .child[hidden]{display:none}
.thanks{padding-bottom:clamp(56px,8vw,100px);min-height:42vh}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .masthead-in{flex-wrap:wrap;row-gap:0;padding-block:8px}
  .masthead nav{order:3;flex-basis:100%;padding-block:4px 10px}
  .nav{column-gap:22px}
  .masthead-cta{margin-left:auto}
  .brand{margin-block:0}
  .brand img{width:140px;height:140px}
  .prints{column-count:3}
}
@media (max-width:860px){
  .hero-in,.about-in,.magic-in,.close-in,.page-head-in,.book-in,.foot-in{grid-template-columns:minmax(0,1fr)}
  .hero-stack{max-width:560px;width:100%;margin-inline:auto}
  .about-print{position:static;max-width:360px;margin-inline:auto}
  .head-print{justify-self:center}
  .prints{column-count:2}
  .row3{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:1rem}
  .tel{display:none}
  .brand img{width:120px;height:120px}
  .masthead-cta .btn{padding:.55em .9em;font-size:.88rem}
  .row2{grid-template-columns:1fr}
  .row3 .row2{grid-template-columns:1fr 1fr}
  .prints{column-gap:12px}
  .prints .paper{padding:6px 6px 8px;--d:3px}
  .foot-nav ul{columns:1}
}
/* phones: the band photos sit behind the stacked text, so tint them evenly and heavier */
@media (max-width:860px){
  .magic{background-image:linear-gradient(rgba(70,85,63,.9),rgba(70,85,63,.9)),url(/assets/img/bg-booking.jpg)}
  .close{background-image:linear-gradient(rgba(163,41,31,.88),rgba(126,29,21,.9)),url(/assets/img/bg-close.jpg)}
}