@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=Rokkitt:wght@300;400;500&display=swap');

/* Palette sampled directly from the Canva artwork */
:root {
  --blush: #fdf1ec;
  --green: #20602a;
  --coral: #ff6f73;
  --white: #ffffff;

  /* Photo frame width drives the whole hero.
     Canva: frame = 23.3% of canvas width, 42.7% of canvas height. */
  --frame-w: min(23.3vw, 41.4vh);
}

@media (orientation: portrait) {
  :root {
    --frame-w: min(44vw, 36vh);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--blush);
}

body {
  color: var(--green);
  /* Rokkitt leads so every guest sees the same thing; American Typewriter
     only steps in if Google Fonts fails to load, on Macs. */
  font-family: 'Rokkitt', 'American Typewriter', Georgia, serif;
}

/* ---------- Nav ---------- */
/* Canva: baseline ~8.8% down the canvas, 3.7% right margin */
nav.site-nav {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 2.4em;
  padding: 7.47vh 3.7vw 0;
  flex-wrap: wrap;
  font-size: clamp(0.72rem, 1.05vw, 0.95rem);
}

nav.site-nav a {
  color: var(--green);
  text-decoration: none;
  text-transform: uppercase;
  /* Geometric sans caps need tracking to breathe */
  letter-spacing: 0.16em;
  font-weight: 400;
  white-space: nowrap;
}

nav.site-nav a.active,
nav.site-nav a:hover {
  color: var(--coral);
}

/* Monogram home link, inner pages only. margin-right:auto pushes the
   remaining links to the right edge without changing nav's flex-end. */
nav.site-nav a.nav-brand {
  margin-right: auto;
  display: block;
  line-height: 0;
  /* nudge up so the artwork's optical centre sits on the nav baseline */
  align-self: center;
  margin-top: -1.25em;
}

nav.site-nav a.nav-brand img {
  display: block;
  height: clamp(38px, 4.2vw, 58px);
  width: auto;
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

/* The frame box is the anchor everything else is positioned against */
.frame {
  position: relative;
  width: var(--frame-w);
  /* Canva frame aspect = 0.970 (w/h) */
  height: calc(var(--frame-w) / 0.970);
  background: var(--white);
  /* Canva border ≈ 14/318 of frame width */
  padding: calc(var(--frame-w) * 0.044);
  margin-top: calc(var(--frame-w) * 0.473); /* room for the 'Alex &' overhang */
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

.script-name {
  position: absolute;
  font-family: 'Ballet', cursive;
  color: var(--coral);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Canva ink extents: 'Alex &' sits 0.343F left of the frame, 0.280F above it,
   and is 1.274F wide. Offsets below are back-solved from the rendered ink box,
   which sits outside the layout box because of Ballet's tall ascenders. */
.script-name.first {
  font-size: calc(var(--frame-w) * 0.358);
  left: calc(var(--frame-w) * -0.326);
  top: calc(var(--frame-w) * -0.181);
}

/* Canva ink extents: 'Pen' ends 0.280F right of the frame, 0.116F below it,
   and is 0.686F wide. */
.script-name.second {
  font-size: calc(var(--frame-w) * 0.382);
  right: calc(var(--frame-w) * -0.277);
  bottom: calc(var(--frame-w) * -0.140);
}

/* Canva: date baseline sits ~0.32F below the frame */
.hero-meta {
  margin: calc(var(--frame-w) * 0.316) 0 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.72rem, 1.05vw, 0.95rem);
  font-weight: 400;
}

/* ---------- Inner pages ---------- */
main.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 6vh 24px 100px;
}

h1.page-title {
  font-family: 'Ballet', cursive;
  color: var(--coral);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  margin: 0 0 0.3em;
}

.page-subtitle {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  font-weight: 400;
  margin-bottom: 3rem;
}

section {
  margin-bottom: 2.5rem;
}

section h2 {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.6em;
}

section p a {
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 111, 115, 0.35);
  transition: border-color 0.15s ease;
}

section p a:hover {
  border-bottom-color: var(--coral);
}

section p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  margin: 0;
}

.center {
  text-align: center;
}

/* ---------- Tables ---------- */
/* wide content scrolls inside its own box so the page never scrolls sideways */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.stays {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.95rem;
  font-weight: 300;
}

table.stays th {
  text-align: left;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  padding: 0 1rem 0.7rem 0;
  border-bottom: 1px solid rgba(32, 96, 42, 0.18);
  white-space: nowrap;
}

table.stays td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid rgba(32, 96, 42, 0.09);
  vertical-align: baseline;
}

/* numeric columns sit tighter and centred; the price column stays on one line */
table.stays th:not(:first-child),
table.stays td:not(:first-child) {
  text-align: center;
  white-space: nowrap;
}

table.stays th:last-child,
table.stays td:last-child {
  text-align: right;
  padding-right: 0;
}

table.stays tr:last-child td {
  border-bottom: none;
}

table.stays td a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 111, 115, 0.45);
  transition: color 0.15s ease, border-color 0.15s ease;
}

table.stays td a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

table.stays .note {
  font-size: 0.8em;
  opacity: 0.65;
  white-space: nowrap;
}

footer {
  text-align: center;
  padding: 8vh 0 4vh;
  font-size: 0.95rem;
  opacity: 0.55;
}

@media (max-width: 640px) {
  nav.site-nav {
    justify-content: center;
    gap: 1.4em;
    padding: 4vh 20px 0;
  }

  /* Monogram gets its own centred line above the links */
  nav.site-nav a.nav-brand {
    margin-right: 0;
    flex-basis: 100%;
    margin-top: 0;
    margin-bottom: 0.4em;
  }

  /* the img is display:block, so centre it with auto margins, not text-align */
  nav.site-nav a.nav-brand img {
    margin-inline: auto;
  }

  /* Stack the stays table into cards so price isn't hidden off-screen */
  table.stays,
  table.stays tbody,
  table.stays tr,
  table.stays td {
    display: block;
    width: auto;
    min-width: 0;
  }

  table.stays thead {
    display: none;
  }

  table.stays tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(32, 96, 42, 0.12);
  }

  table.stays td {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
  }

  table.stays td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
    text-align: left;
  }

  /* property name spans the card as a heading, with no label */
  table.stays td[data-label="Property"] {
    display: block;
    text-align: left;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  table.stays td[data-label="Property"]::before {
    content: none;
  }

  table.stays td[data-label="Price"] {
    margin-top: 0.35rem;
    color: var(--coral);
  }

  table.stays tr:last-child {
    border-bottom: none;
  }
}