/* ==========================================================================
   FONT
   Self-hosted. No Google Fonts request: it blocks first render, and it leaks
   every visitor's IP to Google — which matters for an EU business.
   Drop the two .woff2 files into /fonts and this works offline, forever.
   Until then the fallback stack below renders cleanly on every platform.
   ========================================================================== */
@font-face{
  font-family:'Inter Tight';
  src:url('../fonts/inter-tight-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('../fonts/inter-tight-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   POLYA
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Components  (link, rule, media)
   6. Motion
   7. Sections
   8. Accessibility & print
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --grey:#8A8A8A;
  --hairline:#EAEAEA;

  --section:240px;
  --block:120px;
  --element:48px;
  --tight:24px;
  --margin:80px;

  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.9s;
}
@media (max-width:809px){
  :root{
    --section:96px;
    --block:64px;
    --element:32px;
    --tight:16px;
    --margin:20px;
  }
}

/* 2. RESET & BASE ======================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,picture{display:block;max-width:100%}
img{
  height:auto;
  background-size:cover;      /* LQIP sits here until the real file paints */
  background-position:center;
}
a{color:inherit}
button{font:inherit;color:inherit}
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:1px solid var(--ink);
  outline-offset:6px;
}

/* 3. TYPOGRAPHY ========================================================== */
.display{font-size:44px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.heading{font-size:36px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);font-weight:400}
.body{font-size:15px;line-height:1.7;color:var(--grey)}
.body-ink{font-size:15px;line-height:1.7;color:var(--ink)}
.label,.label-grey{
  font-size:11px;line-height:1.4;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;
}
.label{color:var(--ink)}
.label-grey{color:var(--grey)}
@media (max-width:809px){
  .display{font-size:26px}
  .heading{font-size:24px}
}

/* 4. LAYOUT ============================================================== */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--margin);
}
.section{padding-block:var(--section)}
.rule{height:1px;background:var(--hairline);width:100%}

/* 5. COMPONENTS ========================================================== */

/* Link — the only interactive element on the site. No buttons anywhere. */
.link{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding-block:6px;
  text-decoration:none;color:var(--ink);
}
.link__arrow{transition:transform .4s var(--ease)}
.link::after{
  content:"";
  position:absolute;inset:auto 0 0 0;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.link:hover::after,
.link:focus-visible::after{transform:scaleX(1)}
.link:hover .link__arrow{transform:translateX(4px)}

/* Touch: no hover, so the link must already read as one. */
@media (hover:none),(pointer:coarse){
  .link::after{transform:scaleX(1)}
  .link{padding-block:16px}   /* 44px tap target, no visible box */
}

/* 6. MOTION ============================================================== */
.reveal{
  opacity:0;
  transform:translateY(24px) scale(.98);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;will-change:auto}
.from-r{transform:translateY(24px) translateX(32px) scale(.98)}
@media (max-width:809px){
  .from-r{transform:translateY(24px) scale(.98)}   /* X would overflow */
}

/* 7. SECTIONS ============================================================ */

/* --- header --- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:10;
  display:flex;justify-content:flex-end;gap:32px;
  padding:36px var(--margin);
  transition:background .3s ease,backdrop-filter .3s ease;
}
.header.is-scrolled{
  background:rgb(255 255 255 / .88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.header a{text-decoration:none}

/* --- hero --- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding-block:120px var(--section);
}
.hero__logo{
  width:40vw;max-width:600px;
  height:auto;
}
.hero__place{
  margin-top:64px;
  display:grid;gap:72px;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  font-weight:500;
}
.hero__tagline{margin-top:40px;max-width:30ch}
.hero__cta{margin-top:56px}
@media (max-width:809px){
  .hero__logo{width:64vw;max-width:285px}
  .hero__place{margin-top:40px;gap:44px;letter-spacing:.28em}
  .hero__tagline{margin-top:32px}
  .hero__cta{margin-top:40px}
}

/* hero entrance cascade */
.rise{opacity:0;transform:translateY(16px)}
.hero__logo.rise{transform:translateY(16px) scale(.98)}
.is-loaded .hero__logo{
  opacity:1;transform:none;
  transition:opacity 1.2s var(--ease) .1s,transform 1.2s var(--ease) .1s;
}
.is-loaded .rise--1,
.is-loaded .rise--2,
.is-loaded .rise--3,
.is-loaded .rise--4{opacity:1;transform:none}
.is-loaded .rise--1{transition:opacity .8s var(--ease) .70s,transform .8s var(--ease) .70s}
.is-loaded .rise--2{transition:opacity .8s var(--ease) .85s,transform .8s var(--ease) .85s}
.is-loaded .rise--3{transition:opacity .8s var(--ease) 1.00s,transform .8s var(--ease) 1.00s}
.is-loaded .rise--4{transition:opacity .8s var(--ease) 1.20s,transform .8s var(--ease) 1.20s}

/* --- statement --- */
.statement{max-width:640px}
.statement p + p{margin-top:1.25em}

/* --- work ---
   A 12-column grid with explicit rows. Slots that share a row sit side by side
   with different top margins; that offset is the rhythm. Uneven row spacing is
   deliberate — even gaps would betray the grid. */
.work__grid{display:grid;gap:64px}
.work figure{margin:0;position:relative}
.work img{box-shadow:0 10px 28px -8px rgb(10 10 10 / .05)}
/* a full-bleed image touches both edges: there is no paper for a shadow to fall on */
.s02 img,.s06 img{box-shadow:none}

@media (min-width:810px){
  .work__grid{
    /* A [bleed] track on each side, exactly the width of the wrapper padding.
       Slots spanning bleed-to-bleed reach the viewport edge; everything else
       sits on the 12-column content grid. No negative margins, no overflow. */
    grid-template-columns:
      [bleed-start] var(--margin)
      [content-start] repeat(12,1fr) [content-end]
      var(--margin) [bleed-end];
    column-gap:24px;row-gap:0;
    align-items:start;
  }
  .work__grid{padding-inline:0}
  .work .wrap{max-width:none}
  .slot{grid-column:span 12}
  .s01{grid-column:3 / 9;grid-row:1;margin-top:0px}
  .s02{grid-column:bleed-start / bleed-end;grid-row:2;margin-top:130px}
  .s03{grid-column:8 / 12;grid-row:3;margin-top:120px}
  .s04{grid-column:2 / 8;grid-row:4;margin-top:130px}
  .s05{grid-column:9 / 13;grid-row:4;margin-top:260px}
  .s06{grid-column:bleed-start / bleed-end;grid-row:5;margin-top:140px}
  .s07{grid-column:3 / 8;grid-row:6;margin-top:130px}
  .s08{grid-column:9 / 13;grid-row:6;margin-top:250px}
  .s09{grid-column:4 / 9;grid-row:7;margin-top:140px}
  .s10{grid-column:9 / 14;grid-row:8;margin-top:130px}
}
@media (max-width:809px){
  .work__grid{justify-items:center}
  .slot{width:100%}
  .w-wide{width:88%}
  .w-narrow{width:74%}
}

/* --- about --- */
.about{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:var(--block);
  align-items:start;
}
.about__text > * + *{margin-top:var(--element)}
@media (max-width:809px){
  .about{grid-template-columns:1fr;gap:var(--element)}
  .about__portrait{width:62%}
}

/* --- guest --- */
.guest__intro{margin-bottom:var(--block)}
.guest__intro .rule{margin-top:var(--tight)}
.guest__body{max-width:520px;margin-inline:auto;text-align:center}
.guest__body > * + *{margin-top:var(--element)}
.guest__body .link{margin-top:var(--block)}

/* --- booking info --- */
.info{list-style:none}
.info__item{
  display:grid;
  grid-template-columns:60px 220px minmax(0,1fr);
  gap:var(--element);
  padding-block:var(--element);
  border-top:1px solid var(--hairline);
  align-items:start;
}
.info__item:last-child{border-bottom:1px solid var(--hairline)}
.info__item .body{max-width:52ch}
@media (max-width:809px){
  .info__item{grid-template-columns:36px minmax(0,1fr);gap:var(--tight) 8px}
  .info__item .body{grid-column:2}
}

/* --- form --- */
.form{text-align:center}
.form__note{margin-top:var(--tight)}
.form__panel{
  max-width:860px;
  margin:var(--block) auto 0;
  text-align:left;
}
.lang{
  display:flex;justify-content:center;gap:20px;
  margin-bottom:var(--block);
  border-top:1px solid var(--hairline);
  padding-top:var(--element);
}
.lang button{
  background:none;border:0;cursor:pointer;
  padding:0 0 4px;
  border-bottom:1px solid transparent;
  color:var(--grey);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lang button[aria-pressed="true"]{
  color:var(--ink);
  border-bottom-color:var(--ink);
}
.field{margin-bottom:36px}
.field > label,
.field > legend{
  display:block;margin-bottom:12px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--grey);
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=file],
.field select,
.field textarea{
  width:100%;
  background:none;
  border:0;border-bottom:1px solid var(--hairline);
  border-radius:0;
  padding:6px 0 12px;
  font-family:inherit;font-size:15px;color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:72px}
.field :is(input,select,textarea):focus{
  border-bottom-color:var(--ink);
  outline:none;
}
.field ::placeholder{color:var(--hairline)}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:36px}
.check input{
  flex:none;
  width:14px;height:14px;margin-top:3px;
  accent-color:var(--ink);
}
.check label{font-size:13px;line-height:1.6;color:var(--grey)}
.check a{color:var(--ink)}
.submit{
  width:100%;height:56px;
  background:var(--ink);color:#fff;
  border:0;border-radius:0;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  cursor:pointer;
  transition:opacity .3s var(--ease);
}
.submit:hover{opacity:.85}
.form__status{margin-top:var(--element);text-align:center;min-height:1.7em}
.form__status.is-ok{color:var(--ink)}
.form__status.is-err{color:var(--ink)}

/* Honeypot.
   NOT .visually-hidden: that keeps the field focusable and readable by screen
   readers, so a real user could tab into it and be flagged as a bot.
   display:none removes it from the tab order and the a11y tree, while the
   field still POSTs — which is all Netlify needs. */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
.hp input{pointer-events:none}

/* --- faq --- */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-top:1px solid var(--hairline)}
.faq details:last-of-type{border-bottom:1px solid var(--hairline)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--tight);
  padding-block:var(--element);
  font-size:15px;color:var(--ink);
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq__plus{
  flex:none;position:relative;
  width:12px;height:12px;
  transition:transform .3s var(--ease);
}
.faq__plus::before,
.faq__plus::after{content:"";position:absolute;background:var(--ink)}
.faq__plus::before{inset:5.5px 0 auto 0;height:1px}
.faq__plus::after{inset:0 auto 0 5.5px;width:1px}
.faq details[open] .faq__plus{transform:rotate(45deg)}
.faq__answer{padding-bottom:var(--element);max-width:62ch}

/* --- instagram --- */
.ig__head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:var(--element);
  border-bottom:1px solid var(--hairline);
}
@media (max-width:809px){
  }

/* --- footer --- */
.footer{padding-block:180px 120px;text-align:center}
.footer__logo{width:180px;margin-inline:auto}
.footer__links{
  margin-top:var(--block);
  display:grid;gap:24px;justify-items:center;
  list-style:none;
}
.footer__links a{text-decoration:none}
.footer__legal{margin-top:var(--block)}
.footer__legal a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);text-decoration:none;
}
.footer__legal a:hover{color:var(--ink)}

/* utilities */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.skip{
  position:absolute;top:-60px;left:var(--margin);z-index:20;
  background:var(--ink);color:#fff;
  padding:12px 20px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
  transition:top .2s ease;
}
.skip:focus{top:12px}

/* 8. ACCESSIBILITY ======================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal,.rise{opacity:1!important;transform:none!important}
}

@media print{
  .header,.form__panel,  body{color:#000}
}