/* =========================================================================
   Luminaria — shared styles for index.html (body.page-home)
   and thank-you.html (body.page-thanks)
   ========================================================================= */

/* ---- Fonts (local, from font/) — same face the original site used ---- */
@font-face{
  font-family:'TAY Bread Pan';
  src:url('../font/TAYBreadPan.woff2') format('woff2'),
      url('../font/TAYBreadPan.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'TAY Bea';
  src:url('../font/TAYBea.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'TAY Hells Angles';
  src:url('../font/TAYHellsAngles.woff2') format('woff2'),
      url('../font/TAYHellsAngles.woff') format('woff');
  font-display:swap;
}

/* ---- Design tokens ---- */
:root{
  --ink:#111111;
  --paper:#ffffff;
  --glow:#ffe600;      /* the luminaria flame */
  --muted:#5f5f5f;
  --line:#e6e6e6;
}

/* ---- Base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'TAY Bread Pan',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Thank-you page centers its content vertically */
body.page-thanks{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1.25rem 3rem;
}

/* ---- Footer (base + per-page) ---- */
footer{color:var(--muted)}
.page-home footer{
  text-align:center;font-size:.82rem;
  padding:1.5rem;border-top:1px solid var(--line);
}
.page-thanks footer{
  position:fixed;
  bottom:0;left:0;right:0;
  padding:1rem;
  font-size:.8rem;
}

/* =========================================================================
   HOME (index.html): content left, sticky image right
   ========================================================================= */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  min-height:100vh;
}
.content{
  min-width:0;
  padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,3rem);
  max-width:640px;
  margin-left:auto;
  text-align:center;
  overflow-wrap:break-word;
}
.media{
  min-width:0;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.media img{
  max-width:100%;
  max-height:90vh;
  height:auto;
  display:block;
}

/* ---- Left-column typographic rhythm (mirrors the original's offsets) ---- */
.wordmark{
  font-size:clamp(2.6rem,6.5vw,4.6rem);
  line-height:.95;
  margin:0;
  letter-spacing:.01em;
}
.tagline{
  font-size:clamp(1.35rem,3vw,1.9rem);
  margin:.15em 0 0;
  /* indented to the right, as in the original */
  padding-left:2.5em;
}
.lead{
  font-size:clamp(1.5rem,3.4vw,2.15rem);
  line-height:1.15;
  margin:1.9rem 0 0;
}

.booking{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:.4rem 1.4rem;
  margin:1.9rem 0 .2rem;
}
.booking .now{
  font-size:clamp(1.2rem,2.6vw,1.55rem);
  margin:0;
}
.tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem .5rem;
  padding:0;
  margin:0;
}
.tags li{
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.2rem .85rem;
  font-size:.95rem;
}
.place{
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  margin:.9rem 0 0;
}
.place b{font-weight:inherit;box-shadow:inset 0 -.4em 0 var(--glow)}

/* ---- Contact form (left column, below the pitch) ---- */
form{
  margin-top:2.75rem;
  padding-top:2.25rem;
  border-top:1px solid var(--line);
  text-align:left;
}
.form-title{
  font-size:1.4rem;
  text-align:center;
  margin:0 0 1.4rem;
}
.row{display:flex;gap:1rem;flex-wrap:wrap}
.row .field{flex:1 1 46%}
.field{margin-bottom:1.1rem}
label{
  display:block;
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:.35rem;
}
input[type=text],input[type=email],textarea{
  width:100%;
  font:inherit;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:4px;
  padding:.65rem .75rem;
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--glow);
}
.check{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 1.35rem}
.check input{width:1.1rem;height:1.1rem;accent-color:var(--ink)}
.check label{margin:0;font-size:1rem;color:var(--ink);letter-spacing:0}

/* ---- Buttons & the "back home" link (shared yellow style) ---- */
button,
.btn{
  width:100%;
  font-family:inherit;
  font-size:1.15rem;
  color:var(--ink);
  background:var(--glow);
  border:1.5px solid var(--ink);
  border-radius:4px;
  padding:.8rem 1rem;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
button:hover,.btn:hover{background:#fff}
button:active,.btn:active{transform:translateY(1px)}
button[disabled]{opacity:.55;cursor:progress}

.status{text-align:center;margin-top:1rem;font-size:.95rem;min-height:1.4em}
.status.ok{color:#1a7f37}
.status.err{color:#b3261e}

/* ---- Home responsive ---- */
/* Mobile: stack, image as a banner on top */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;min-height:0;align-content:start}
  .media{
    position:static;
    height:auto;
    order:-1;
    padding:2.5rem 2rem .5rem;
  }
  .media img{max-height:46vh}
  .content{margin:0 auto;text-align:center}
  .tagline{padding-left:0}
}
/* Narrow phones: shrink the wide display type so long words never clip */
@media (max-width:600px){
  .wordmark{font-size:2.05rem;letter-spacing:0}
  .tagline{font-size:1.2rem}
  .lead{font-size:1.35rem}
  .booking .now{font-size:1.1rem}
  .tags li{font-size:.85rem;padding:.18rem .7rem}
  .place{font-size:1.05rem}
}

/* =========================================================================
   THANK YOU (thank-you.html)
   ========================================================================= */
.page-thanks .bag{
  width:min(240px,55vw);
  height:auto;
  display:block;
  margin-bottom:1.5rem;
}
.page-thanks h1{
  font-size:clamp(2rem,6vw,3.2rem);
  line-height:1;
  margin:0 0 .35em;
  letter-spacing:.01em;
}
.page-thanks h1 .mark{box-shadow:inset 0 -.38em 0 var(--glow)}
.page-thanks p{
  max-width:32rem;
  font-size:clamp(1.1rem,2.6vw,1.35rem);
  margin:0 0 1.75rem;
}
.page-thanks .btn{
  display:inline-block;
  width:auto;
  font-size:1.1rem;
  text-decoration:none;
  padding:.75rem 1.6rem;
}