/* ==========================================================================
   Ilfracombe Five Star — premium layer
   Editorial serif display type, cinematic hero, cursor, curtains, marquee.
   Loaded after main.css and overrides it where needed.
   ========================================================================== */

:root {
	--gold: #bf9b62;
	--gold-dark: #9c7c47;
	--gold-soft: rgba(191, 155, 98, .16);
	--ink: #151412;
	--dark: #12110f;
	--dark-2: #1d1b18;
	--text: #6b665e;
	--tint: #f6f1e9;
	--line: #e6ded1;
	--display: "Cormorant Garamond", Georgia, serif;
	--expo: cubic-bezier(.19, 1, .22, 1);
}

body { background: #fbf8f3; color: var(--text); }
::selection { background: var(--gold); color: #fff; }

/* Display typography ---------------------------------------------------- */
.section-title,
.hero__title,
.page-hero__title,
.footer-cta__title,
.experience__title,
.room-card__title,
.room-divided__title,
.booking-bar__title,
.single-post__title,
.book-card__title,
.not-found__code {
	font-family: var(--display);
	font-weight: 300;
	text-transform: none;
	letter-spacing: -.015em;
}
.section-title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; margin-bottom: .35em; }
.section-title em, .hero__title em, .page-hero__title em, .footer-cta__title em, .experience__title em, .booking-bar__title em {
	font-style: italic; color: var(--gold); font-weight: 300;
}
.section-title .line, .experience__title .line { padding-bottom: .06em; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font: 600 .68rem/1.4 var(--sans); font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
	margin-bottom: 1.4em;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; flex-shrink: 0; }
.section-heading--center .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; flex-shrink: 0; }
.section-heading .rule { display: none; }
.lead { font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.5; color: var(--ink); font-weight: 400; }
.lead .line { padding-bottom: .04em; }

.link-arrow { font: 600 .7rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); border: 0; padding: 0 0 8px; position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform-origin: right; transition: transform .6s var(--expo); }
.link-arrow:hover { color: var(--gold-dark); }
.link-arrow:hover::after { transform: scaleX(.3); transform-origin: left; }
.link-arrow .ilf-icon { color: var(--gold); }

.btn { padding: 19px 38px; font-size: .68rem; letter-spacing: .26em; border-radius: 0; }
.btn::before { transition: transform .7s var(--expo); }
.btn--gold { background: var(--gold); }

/* Header ---------------------------------------------------------------- */
.site-header { background: rgba(251, 248, 243, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-scrolled { background: rgba(251, 248, 243, .9); box-shadow: 0 1px 0 var(--line); }
.has-hero .site-header:not(.is-scrolled) { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent); }
.site-header { transition: background-color .6s var(--expo), height .6s var(--expo), box-shadow .6s var(--expo), transform .8s var(--expo); }
.primary-nav a { font-size: .68rem; letter-spacing: .24em; }
.brand__name { font-family: var(--display); font-size: 1.55rem; font-weight: 400; letter-spacing: .18em; }
.brand__sub { font-family: var(--sans); font-style: normal; font-size: .58rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; margin-top: 4px; }

/* Hero ------------------------------------------------------------------ */
.hero { min-height: 680px; background: #0d0c0b; }
.hero__media::after {
	background:
		radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(0, 0, 0, .55) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .7) 100%);
}
.hero__media { will-change: transform; }
.hero__media img { transform: scale(1.08); }
.hero__content { align-items: center; padding-bottom: 210px; }
.hero__eyebrow { color: rgba(255, 255, 255, .9); font-size: .7rem; letter-spacing: .32em; }
.hero__eyebrow::before { background: var(--gold); }
.hero__title {
	font-size: clamp(3.4rem, 10vw, 9.6rem); line-height: .94; margin: .1em 0 0; max-width: 14ch;
	text-shadow: 0 10px 50px rgba(0, 0, 0, .25);
}
.hero__title .word { padding: 0 .02em .08em; }
.hero__side {
	position: absolute; left: var(--gutter); top: 50%; z-index: 3; transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl; display: flex; align-items: center; gap: 18px;
	color: rgba(255, 255, 255, .7); font: 600 .6rem var(--sans); letter-spacing: .4em; text-transform: uppercase;
}
.hero__side-line { width: 1px; height: 70px; background: rgba(255, 255, 255, .4); }
.hero__controls { bottom: 150px; }
.hero__count { gap: 18px; font-family: var(--display); font-size: 1.1rem; letter-spacing: .05em; }
.hero__current { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; font-size: 1.6rem; }
.hero__current span { display: inline-block; }
.hero__total { opacity: .6; }
.hero__bar { width: 160px; background: rgba(255, 255, 255, .25); }
.hero__arrows { display: flex; gap: 12px; }
.hero__arrow { width: 60px; height: 60px; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); background: rgba(255, 255, 255, .04); }

/* Booking bar ----------------------------------------------------------- */
.booking-bar { margin-top: -120px; }
.booking-bar__box { background: rgba(21, 20, 18, .96); border-top: 0; padding: 34px 44px; box-shadow: 0 40px 80px rgba(0, 0, 0, .25); position: relative; }
.booking-bar__box::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--gold), transparent); }
.booking-bar__title { font-size: 2.1rem; letter-spacing: 0; margin-bottom: .15em; }
.booking-bar__head .eyebrow { font-size: .6rem; margin-bottom: .8em; }
.booking-bar__head .eyebrow::before { width: 20px; }

/* Intro ----------------------------------------------------------------- */
.intro__img--small { border-width: 12px; border-color: #fbf8f3; }
.intro__badge { background: var(--ink); color: #fff; }
.intro__badge .stars { color: var(--gold); }
.stats strong { font-family: var(--display); font-weight: 300; font-size: clamp(3rem, 5vw, 4.2rem); color: var(--ink); }
.stats { border-color: var(--line); }

/* Marquee --------------------------------------------------------------- */
.marquee { overflow: hidden; padding: clamp(30px, 5vw, 60px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbf8f3; }
.marquee__track { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); width: max-content; will-change: transform; }
.marquee span {
	font: 300 clamp(3rem, 8.5vw, 8rem)/1 var(--display); color: var(--ink); white-space: nowrap; letter-spacing: -.01em;
}
.marquee .is-outline { color: transparent; -webkit-text-stroke: 1px var(--gold); font-style: italic; }
.marquee i { font-style: normal; color: var(--gold); font-size: clamp(1.2rem, 2vw, 2rem); }

/* Rooms rail ------------------------------------------------------------ */
.room-card__title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -.01em; line-height: 1.1; }
.room-card__media img { transition: transform 1.6s var(--expo); }
.room-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .35)); pointer-events: none; }
.room-card__num { font-family: var(--display); font-size: 1.3rem; z-index: 1; }
.room-card .eyebrow { margin-bottom: .8em; }

/* Experience ------------------------------------------------------------ */
.experience { position: relative; height: 120vh; min-height: 720px; display: flex; align-items: flex-end; overflow: hidden; background: #fbf8f3; }
.experience__media { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.experience__media img { position: absolute; left: 0; top: -10%; width: 100%; height: 120% !important; max-width: none; object-fit: cover; }
.experience__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .65)); }
.experience__content { position: relative; z-index: 2; padding-bottom: clamp(70px, 12vh, 140px); color: #fff; }
.experience__content .eyebrow { color: #fff; }
.experience__content .eyebrow::before { background: var(--gold); }
.experience__title { color: #fff; font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: 1.02; max-width: 16ch; margin: 0; }

/* Feature (breakfast) --------------------------------------------------- */
.feature__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.feature__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 5 / 4; }

/* Amenities ------------------------------------------------------------- */
.amenities { background: var(--tint); }
.amenities__grid { border-color: var(--line); }
.amenity { position: relative; background: transparent; padding: 52px 40px; border-color: var(--line); transition: background .8s var(--expo); }
.amenity:hover { background: #fff; }
.amenity__num { position: absolute; top: 26px; right: 30px; font: italic 300 1.4rem var(--display); color: var(--gold); }
.amenity__icon { border-color: var(--line); }
.amenity__title { font-size: .78rem; letter-spacing: .2em; }

/* Location -------------------------------------------------------------- */
.location__img { box-shadow: 0 30px 70px rgba(0, 0, 0, .14); }
.location__img--2, .location__img--3 { border-color: #fbf8f3; }
.location__img--2 { aspect-ratio: 3 / 4; width: 40%; top: 6%; }
.distances em { font-size: 1.2rem; font-style: italic; }

/* Testimonials ---------------------------------------------------------- */
.testimonials { background: var(--dark); }
.testimonial__text { font-size: clamp(1.7rem, 3.2vw, 2.7rem); font-weight: 300; line-height: 1.35; }
.testimonials__dots button { width: 46px; height: 2px; position: relative; overflow: hidden; background: rgba(255, 255, 255, .18); }
.testimonials__dots button span { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.testimonials__dots button.is-active { background: rgba(255, 255, 255, .3); }

/* Gallery teaser -------------------------------------------------------- */
.gallery-teaser__item img { transition: transform 1.6s var(--expo); }

/* Page hero ------------------------------------------------------------- */
.page-hero { height: clamp(520px, 86vh, 860px); }
.page-hero__title { font-size: clamp(3.2rem, 9vw, 8rem); line-height: .95; letter-spacing: -.02em; }
.page-hero .eyebrow { color: #fff; font-size: .7rem; }
.page-hero .eyebrow::before { background: var(--gold); }
.page-hero .rule { display: none; }
.page-hero__sub { font-family: var(--display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-style: italic; }
.js:not(.reduced-motion) [data-hero] { clip-path: inset(0 0 100% 0); }

/* Footer CTA ------------------------------------------------------------ */
.footer-cta { padding: clamp(130px, 18vw, 240px) 0; }
.footer-cta__title { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .98; margin-bottom: .4em; }
.footer-cta .eyebrow { justify-content: center; font-size: .66rem; }
.footer-cta .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.site-footer { background: #0f0e0c; }
.site-footer__credit { font-size: .72rem; color: rgba(255, 255, 255, .35); padding-bottom: 22px; margin: 0 auto; }

/* Inner pages ----------------------------------------------------------- */
.room-divided__title { font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: -.01em; line-height: 1.05; }
.room-divided__num { font-family: var(--display); font-size: 5rem; font-weight: 300; }
.room-divided__media img { transition: transform 1.6s var(--expo); }
.room-divided__media:hover img { transform: scale(1.04); }
.promo-card { background: var(--dark-2); }
.promo-card__code { font-family: var(--display); font-weight: 300; }
.policy { border-bottom-color: var(--gold); }
.review-card__title { font-family: var(--display); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.reviews-summary__score strong { font-family: var(--display); font-weight: 300; font-size: 6rem; }
.single-post__title { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; }
.photo-gallery__content h2 { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.4rem); text-transform: none; letter-spacing: -.01em; }
.contact-card h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.not-found__code { font-size: clamp(7rem, 20vw, 14rem); }

/* Image curtain reveal -------------------------------------------------- */
[data-clip] { position: relative; }
.clip-curtain { position: absolute; inset: 0; z-index: 3; background: var(--gold); transform: scaleX(0); pointer-events: none; }
.location__img[data-clip], .intro__img--small[data-clip] { position: absolute; }

/* Page transition curtain ---------------------------------------------- */
.page-curtain { position: fixed; inset: 0; z-index: 9990; pointer-events: none; visibility: hidden; display: grid; place-items: center; }
.page-curtain__panel { position: absolute; inset: 0; background: var(--dark); transform: scaleY(0); }
.page-curtain__panel--gold { background: var(--gold); z-index: 1; inset: 0 0 auto 0; height: 100%; }
.page-curtain__panel:not(.page-curtain__panel--gold) { z-index: 2; }
.page-curtain__mark { position: relative; z-index: 3; color: var(--gold); opacity: 0; }
.page-curtain__mark .ilf-icon { width: 34px; height: 34px; }
.preloader { clip-path: inset(0 0 0 0); }
.preloader__word { font-family: var(--display); font-weight: 300; font-size: 1.6rem; letter-spacing: .4em; }

/* Film grain ------------------------------------------------------------ */
.grain {
	position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: .055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
	0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
	60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* Custom cursor --------------------------------------------------------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; visibility: hidden; opacity: 0; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
.cursor__ring {
	width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(191, 155, 98, .6);
	display: grid; place-items: center; transition: width .5s var(--expo), height .5s var(--expo), margin .5s var(--expo), background-color .5s var(--expo), border-color .5s;
	mix-blend-mode: normal;
}
.cursor__label { font: 700 .58rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(191, 155, 98, .12); border-color: var(--gold); }
.cursor.is-label .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gold); border-color: var(--gold); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }
html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor] { cursor: none; }

/* Smooth scroll compat -------------------------------------------------- */
.has-smooth .room-single__aside { position: static; }
#smooth-content { will-change: transform; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.feature__grid { grid-template-columns: 1fr; }
	.hero__side { display: none; }
	.experience { height: 90vh; }
}
@media (max-width: 720px) {
	.hero__title { font-size: clamp(3rem, 15vw, 4.6rem); }
	.hero__eyebrow, .page-hero .eyebrow { justify-content: center; text-align: center; letter-spacing: .24em; }
	.hero__eyebrow::before, .page-hero .eyebrow::before { display: none; }
	.hero__content { padding-bottom: 190px; }
	.hero__controls { bottom: 112px; }
	.hero__bar { width: 70px; }
	.hero__arrow { width: 46px; height: 46px; }
	.booking-bar { margin-top: -84px; }
	.booking-bar__box { padding: 26px 22px; }
	.booking-bar__title { font-size: 1.8rem; }
	.section-title { font-size: clamp(2.3rem, 11vw, 3rem); }
	.experience { height: 80vh; min-height: 560px; }
	.amenity { padding: 40px 28px; }
	.grain { display: none; }
	.location__img--2 { width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
	.grain { animation: none; }
	[data-hero] { clip-path: none !important; }
}