/* =====================================================================
   Roma — Hotel & Restaurant template, hand-rebuilt clean version.
   Fonts, colors, sizes and copy extracted 1:1 from the original export.
   Palette:  cream #f9f7ef (rgb 249,247,239) · dark green #264e33 (rgb 38,78,51)
   Fonts:    Bonny (display), Switzer (body)
   ===================================================================== */

/* ---------- Fonts (copied verbatim from the source export) ---------- */
@font-face { font-family: "Bonny"; src: url("fonts/K4WM2XCCNWATUKRUC45COB2XDN52TUYD.woff2"); font-display: swap; font-style: normal; font-weight: 400 }
@font-face { font-family: "Bonny"; src: url("fonts/3LWNDZX7GKDA6F23JNKWTOATL5636NFF.woff2"); font-display: swap; font-style: normal; font-weight: 500 }
@font-face { font-family: "Bonny"; src: url("fonts/V6D52R6BLS7NWVT43T2QEVIGKASQC35W.woff2"); font-display: swap; font-style: normal; font-weight: 700 }
@font-face { font-family: "Switzer"; src: url("fonts/6IN5WOLRCYP4G4MOCOHOMXNON6Q7MDAR.woff2"); font-display: swap; font-style: normal; font-weight: 400 }
@font-face { font-family: "Switzer"; src: url("fonts/6XPIMU23OJVRY676OG5YVJMWEHWICATX.woff2"); font-display: swap; font-style: normal; font-weight: 500 }
@font-face { font-family: "Switzer"; src: url("fonts/Y7SCNZJOT2MW5ADSGOFLDGH4TNL4JCQY.woff2"); font-display: swap; font-style: normal; font-weight: 700 }
@font-face { font-family: "Switzer"; src: url("fonts/O34WRFYO7JNWEBBA2LRV2XYRUSYXYDKH.woff2"); font-display: swap; font-style: italic; font-weight: 400 }
@font-face { font-family: "Switzer"; src: url("fonts/C6VLICDGQWYKV6YT65TM5G3OVN4AOZBN.woff2"); font-display: swap; font-style: italic; font-weight: 500 }

/* ---------- Tokens ---------- */
:root {
  --cream: rgb(249, 247, 239);
  --green: rgb(38, 78, 51);
  --white: #fff;
  --display: "Bonny", Georgia, serif;
  --body: "Switzer", -apple-system, "Segoe UI", sans-serif;
  --maxw: 1440px;
  --gutter: 36px;
  --grain: url("images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--green);
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Subtle film grain overlay (matches the source's 0.04 opacity texture) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: var(--grain);
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* ---------- Shared ---------- */
.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;          /* 52.8px */
  letter-spacing: -1.92px;
  color: var(--green);
}

.ro-ma {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--green);
  white-space: pre;
}

.pill {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-radius: 4px;
}
.pill-label,
.pill-menu { background: var(--green); color: var(--cream); }
/* Menu button = green square with 3 rounded "burger" lines (source: framer-8rn4ze). */
.pill-menu {
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  justify-content: center;
}
.burger { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 28px;
  background: var(--cream);
}
.pill-cta {
  background: var(--green);
  color: var(--cream);
  padding: 14px 22px;
}
.pill-cta .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 4px;
  background: rgba(249, 247, 239, 0.14);
  font-size: 15px;
}

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
}
.brand-logo { width: 65px; height: auto; }
.nav-pills { display: flex; gap: 10px; align-items: center; }

/* ============ MENU OVERLAY ============ */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--green);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.nav-overlay[hidden] { display: flex; }   /* keep transition; toggled by .open */
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay-inner {
  width: 100%;
  max-width: var(--maxw);
  padding: 100px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.nav-overlay .ro-ma { color: var(--cream); font-size: 16px; }
.nav-list { display: flex; flex-direction: column; gap: 6px; }
.nav-list li { display: flex; align-items: baseline; gap: 18px; }
.nav-list a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--cream);
  transition: opacity .2s;
}
.nav-list a:hover { opacity: .6; }
.nav-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  color: var(--cream);
  width: 22px;
}
.nav-sub { display: flex; gap: 24px; flex-wrap: wrap; }
.nav-sub a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  color: var(--cream);
}
.nav-copy {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  color: var(--cream);
  margin-top: 8px;
}

/* ============ HERO ============
   Source: .framer-6io0pu (section, gap:10px, overflow:hidden) >
            .framer-ty7gtv (container, width:95% max 1600px, padding:176px 0 0)
            holding the giant fit-text wordmark (font-size ~369px, lh 0.8em),
   then a full-bleed image (aspect-ratio 3/2). */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.hero-wordmark {
  width: 95%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 176px 0 0;
  /* Fit-text: the source SVG (viewBox 1140x296) scales to fill the full
     container width (95vw, capped 1600px). "RO. MA." in Bonny is ~3.85:1,
     so to fill 95vw the cap glyph height is ~95vw/3.85 ≈ 24.7vw. */
  font-size: clamp(120px, 24.7vw, 396px);
  line-height: 0.8;
  text-align: center;
  white-space: pre;
}
.hero-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* ============ WHAT DEFINES US ============ */
.defines {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 360px var(--gutter) 200px;
  text-align: center;
}
.defines .section-title { margin-bottom: 110px; }
.defines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 130px 132px;
  text-align: left;
}
.define-card { display: flex; flex-direction: column; }
.card-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: .7;
  color: var(--green);
  margin-bottom: 30px;
}
.card-media {
  width: 192px;
  height: 192px;
  overflow: hidden;
  margin-bottom: 32px;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.define-card p {
  max-width: 288px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;       /* 15.4px */
  color: var(--green);
}
.define-card--cta { justify-content: flex-start; }
.define-card--cta p { margin-bottom: 26px; }

/* ============ ROMA STORIES ============ */
.stories {
  padding: 60px 0 120px;
  text-align: center;
  overflow: hidden;
}
.stories .section-title { margin-bottom: 64px; }
/* Static horizontal row — the original has no auto-scroll/marquee. */
.stories-track {
  display: flex;
  gap: 28px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.stories-track::-webkit-scrollbar { display: none; }
.story-card { flex: 0 0 auto; width: 312px; }
.story-card img {
  width: 100%;
  height: 224px;
  object-fit: cover;
  margin-bottom: 14px;
}
.story-card span {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  color: var(--green);
}

/* ============ JOURNAL ============ */
.journal {
  padding: 80px 0 120px;
  overflow: hidden;
}
.journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  margin-bottom: 70px;
}
.journal-track {
  display: flex;
  gap: 64px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.journal-track::-webkit-scrollbar { display: none; }
.journal-card { flex: 0 0 416px; }
.journal-card .card-media {
  width: 416px;
  height: 0;
  padding-bottom: 75%;
  position: relative;
  margin-bottom: 18px;
}
.journal-card .card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.journal-card p {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  color: var(--green);
}

/* ============ CONTACT BANNER ============ */
.contact-banner { width: 100%; }
.contact-banner img {
  width: 100%;
  height: 740px;
  object-fit: cover;
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--cream);
  padding: 140px var(--gutter) 0;
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-top,
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.footer-nav { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-label {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: .7;
  color: var(--green);
  margin-bottom: 12px;
}
.footer-value {
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--green);
}
.footer-logo {
  display: flex;
  justify-content: center;
  padding: 90px 0;
}
.footer-logo img { width: 64px; height: auto; }
.footer-wordmark {
  display: flex;
  justify-content: center;
  padding: 60px 0 80px;
  overflow: hidden;            /* clip the 350px slide-up start state */
}
.footer-wordmark .ro-ma {
  font-size: clamp(120px, 26vw, 360px);
  line-height: .9;
}

/* ============ APPEAR-ON-SCROLL (Framer "appear effect") ============
   Source: inline initial states in the export.
   - Most elements:  opacity:0 + translateY(30px)  ->  rest
   - A few cards:     opacity:0 + scale(0.8)        ->  rest
   Easing/duration mirror Framer's default appear tween. */
.reveal:not(.footer-wordmark):not(.hero-wordmark) {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(0.44, 0, 0.56, 1),
              transform .6s cubic-bezier(0.44, 0, 0.56, 1);
  will-change: transform, opacity;
}
.reveal:not(.footer-wordmark):not(.hero-wordmark).in { opacity: 1; transform: none; }

/* Scale-in variant (matches inline opacity:0;transform:scale(0.8)) */
.reveal.reveal--scale { transform: scale(0.8); }
.reveal.reveal--scale.in { transform: none; }

/* Per-row stagger (set inline via --reveal-delay by JS) */
.reveal { transition-delay: var(--reveal-delay, 0s); }

/* Footer giant wordmark — the only element with explicit appear data in the
   source export (the giant "RO. MA." text):
   from translateY(350px) rotate(-5deg) skewY(20deg) -> identity,
   duration 2s, delay 1.6s, ease cubic-bezier(0.19,1,0.22,1) (expo-out). */
.footer-wordmark .ro-ma {
  display: inline-block;
  opacity: 1;                 /* original keeps opacity:1, only transforms */
  transform: translateY(350px) rotate(-5deg) skewY(20deg);
  transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.footer-wordmark.in .ro-ma {
  transform: translateY(0) rotate(0deg) skewY(0deg);
  transition-delay: 1.6s;
}

/* Hero giant wordmark — same source appear data as the footer wordmark
   (translateY(350px) rotate(-5deg) skewY(20deg) -> identity). */
.hero-wordmark.reveal {
  display: block;
  opacity: 1;
  transform: translateY(350px) rotate(-5deg) skewY(20deg);
  transition: transform 1.6s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.hero-wordmark.reveal.in {
  transform: translateY(0) rotate(0deg) skewY(0deg);
}

/* ============ HOVER: item_block animated underline ============
   Source custom <style> in the export. A 1px line under footer text
   values wipes in left-to-right on hover (origin flips right -> left). */
span.footer-value {
  position: relative;
  display: inline-block;
  width: max-content;
}
span.footer-value::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(0.25, 0.8, 0.5, 1);
}
span.footer-value:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav-list link hover already fades opacity (.2s) above; keep it. */

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal,
  .reveal.reveal--scale,
  .hero-wordmark.hero-wordmark,
  .footer-wordmark.footer-wordmark .ro-ma {
    opacity: 1; transform: none; transition: none;
  }
  span.footer-value::after { transition: none; }
}

/* =====================================================================
   RESPONSIVE  (breakpoints: 1200 / 810 / 600)
   ===================================================================== */
@media (max-width: 1200px) {
  .defines-grid { gap: 90px 60px; }
  .hero-image { height: 720px; }
}

@media (max-width: 810px) {
  .defines { padding: 220px var(--gutter) 120px; }
  .defines-grid { grid-template-columns: repeat(2, 1fr); gap: 72px 48px; }
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
  .hero-image { height: 560px; }
  .section-title { font-size: 38px; letter-spacing: -1.4px; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .nav-list a { font-size: 28px; }
  .hero { padding-top: 120px; }
  .hero-wordmark { padding-bottom: 20px; }
  .hero-image { height: 460px; }
  .defines { padding: 140px var(--gutter) 90px; }
  .defines .section-title { margin-bottom: 56px; }
  .defines-grid { grid-template-columns: 1fr; gap: 56px; justify-items: start; }
  .card-media { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1; }
  .define-card p { max-width: none; }
  .story-card { width: 240px; }
  .journal-card { flex-basis: 280px; }
  .journal-card .card-media { width: 100%; }
  .footer-top, .footer-nav { grid-template-columns: 1fr 1fr; }
  .contact-banner img { height: 420px; }
}