/* ==========================================================================
   Concept websites shown in the portfolio
   Everything is sized in cqw (1% of the device screen width) so the miniature
   sites scale perfectly with their frames. The imagery comes from the SVG
   scenes in the sprite at the top of index.html.
   ========================================================================== */

/* ---------- Themes (shared by desktop and mobile versions) ---------- */

.site--ember, .msite--ember {
  --s-bg: #120b07; --s-ink: #f4e8d6; --s-accent: #e0a45a; --s-on: #1a1209; --s-line: rgba(244, 232, 214, 0.16);
  --s-font: 'Bricolage Grotesque', var(--sans); --s-head: var(--s-font);
}
.site--aurea, .msite--aurea {
  --s-bg: #f0e6d7; --s-ink: #123a40; --s-accent: #123a40; --s-on: #f0e6d7; --s-line: rgba(18, 58, 64, 0.2);
  --s-font: 'Jost', var(--sans); --s-head: var(--s-font);
}
.site--ferrum, .msite--ferrum {
  --s-bg: #14171c; --s-ink: #f6f4ef; --s-accent: #ffc21a; --s-on: #14171c; --s-line: rgba(255, 255, 255, 0.14);
  --s-font: 'Archivo', var(--sans); --s-head: var(--s-font);
}
.site--lume, .msite--lume {
  --s-bg: #f7e8e4; --s-ink: #3b2230; --s-accent: #3b2230; --s-on: #f7e8e4; --s-line: rgba(59, 34, 48, 0.2);
  --s-font: 'Outfit', var(--sans); --s-head: var(--s-font);
}
.site--lineae, .msite--lineae {
  --s-bg: #e9e8e4; --s-ink: #14161a; --s-accent: #14161a; --s-on: #e9e8e4; --s-line: rgba(20, 22, 26, 0.2);
  --s-font: var(--sans); --s-head: var(--s-font);
}
.site--strada, .msite--strada {
  --s-bg: #05070a; --s-ink: #f2f4f7; --s-accent: #ff3b2f; --s-on: #fff; --s-line: rgba(255, 255, 255, 0.14);
  --s-font: 'Outfit', var(--sans); --s-head: var(--s-font);
}

/* ---------- Desktop pages ---------- */

.site {
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: var(--s-font, var(--sans));
  font-size: 1.5cqw;
  line-height: 1.4;
}
.site * { margin: 0; }
.site em, .msite em { font-style: normal; } /* modern sans: accent by colour, no faux italics */

.s-nav {
  position: absolute;
  z-index: 6;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  padding: 2.3cqw 4.5cqw;
  font-size: 1.4cqw;
}
.s-nav b { margin-right: auto; font-family: var(--s-head); font-size: 2.3cqw; font-weight: 400; letter-spacing: 0; }
.s-nav span { opacity: 0.85; }

.s-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.85cqw 2cqw;
  border: 0.14cqw solid currentColor;
  border-radius: 99px;
  font-style: normal;
  font-size: 1.35cqw;
  font-weight: 500;
  white-space: nowrap;
}
.s-nav .s-pill { background: rgba(255, 255, 255, 0.08); }
.s-pill--solid, .s-nav .s-pill--solid { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on); }
.s-link { font-style: normal; font-size: 1.4cqw; padding-bottom: 0.2cqw; border-bottom: 0.12cqw solid currentColor; opacity: 0.9; }

/* hero: full-bleed picture with the copy laid over it */
.s-hero { position: relative; height: 62.5cqw; overflow: hidden; isolation: isolate; }
.s-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-copy { position: absolute; z-index: 3; left: 4.5cqw; top: 50%; width: 40cqw; transform: translateY(-46%); }
.s-copy small { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1.8cqw; font-size: 1.1cqw; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.s-copy small::before { content: ''; width: 3.4cqw; height: 0.15cqw; background: currentColor; opacity: 0.8; }
.s-copy h4 { font-family: var(--s-head); font-size: 7.2cqw; font-weight: 500; line-height: 0.96; letter-spacing: -0.035em; }
.s-copy p { max-width: 28cqw; margin-top: 2cqw; font-size: 1.5cqw; line-height: 1.55; opacity: 0.82; }
.s-btns { display: flex; align-items: center; gap: 2cqw; margin-top: 2.8cqw; }

/* gallery under the hero (what you see while the page scrolls on hover) */
.s-gal { padding: 5cqw 4.5cqw 4cqw; background: var(--s-bg); }
.s-gal__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2.6cqw; }
.s-gal__head small { font-family: var(--s-head); font-size: 4.2cqw; line-height: 1; letter-spacing: -0.02em; }
.s-gal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.s-gal__grid--4 { grid-template-columns: repeat(4, 1fr); }
.s-gal figure { margin: 0; }
.s-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1.2cqw; }
.s-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-gal figcaption { margin-top: 1.3cqw; font-size: 1.5cqw; }

.s-card { overflow: hidden; border: 0.1cqw solid var(--s-line); border-radius: 1cqw; background: rgba(255, 255, 255, 0.04); }
.s-card .s-img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.s-card figcaption { display: grid; gap: 0.4cqw; margin: 0; padding: 1.5cqw 1.8cqw 1.9cqw; }
.s-card figcaption b { font-size: 2cqw; font-weight: 600; }
.s-card figcaption span { font-size: 1.35cqw; opacity: 0.7; }

.s-round .s-ph { aspect-ratio: 1; border-radius: 50%; }
.s-round figcaption { text-align: center; }

.s-foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3cqw;
  padding: 3.6cqw 4.5cqw 9cqw;
  border-top: 0.1cqw solid var(--s-line);
}
.s-foot b { font-family: var(--s-head); font-size: 2.4cqw; font-weight: 400; }
.s-foot span { display: block; width: 60%; height: 0.7cqw; border-radius: 99px; background: var(--s-line); box-shadow: 0 2.2cqw 0 var(--s-line), 0 4.4cqw 0 var(--s-line); }
.s-foot span:nth-child(3) { width: 45%; }

/* ---- Ember & Salt ---- */
.site--ember .s-copy h4 em, .site--ember .s-copy small { color: var(--s-accent); }
.site--ember .s-nav { background: linear-gradient(180deg, rgba(12, 7, 4, 0.7), transparent); }
.site--ember .s-ph { box-shadow: 0 1.5cqw 3cqw -1cqw rgba(0, 0, 0, 0.8); }

/* ---- Hotel Auréa ---- */
.site--aurea .s-copy h4 { color: #0f3238; font-weight: 300; letter-spacing: -0.02em; }
.site--aurea .s-copy small { letter-spacing: 0.32em; }
.site--aurea .s-copy h4 em { color: #c0673c; }
.site--aurea .s-copy small { color: #8a5a3d; }
.s-leaves { position: absolute; z-index: 1; right: -4cqw; top: -5cqw; width: 52cqw; height: auto; opacity: 0.3; pointer-events: none; mix-blend-mode: multiply; }
.s-arch {
  position: absolute;
  z-index: 2;
  right: 7cqw; top: 8cqw;
  width: 31cqw; height: 49cqw;
  overflow: hidden;
  border-radius: 15.5cqw 15.5cqw 0 0;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(18, 58, 64, 0.5);
}
.s-arch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.4); }
.s-booking {
  position: absolute;
  z-index: 4;
  left: 4.5cqw; right: 4.5cqw; bottom: 3cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: 2cqw;
  padding: 1.5cqw 2.4cqw;
  border-radius: 1.4cqw;
  background: rgba(255, 251, 243, 0.94);
  box-shadow: 0 2cqw 4cqw -2cqw rgba(18, 58, 64, 0.5);
  font-size: 1.4cqw;
}
.s-booking small { display: block; margin-bottom: 0.3cqw; font-size: 1cqw; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
.site--aurea .s-ph { box-shadow: 0 2cqw 3.5cqw -1.5cqw rgba(18, 58, 64, 0.5); }

/* ---- Ferrum ---- */
.site--ferrum .s-nav b { font-weight: 800; letter-spacing: 0.26em; font-size: 1.9cqw; }
.site--ferrum .s-nav { background: linear-gradient(180deg, rgba(8, 12, 22, 0.7), transparent); }
.site--ferrum .s-copy h4 { font-size: 6.6cqw; font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.92; }
.site--ferrum .s-copy h4 em { font-style: normal; color: var(--s-accent); }
.site--ferrum .s-copy small { color: var(--s-accent); }
.site--ferrum .s-pill { border-radius: 0.5cqw; }
.site--ferrum .s-card { border-top: 0.45cqw solid var(--s-accent); border-radius: 0.5cqw; }
.site--ferrum .s-gal__head small { font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: 3.4cqw; }

/* ---- Lumé ---- */
.site--lume .s-copy h4 { font-size: 7.8cqw; font-weight: 300; letter-spacing: -0.04em; }
.site--lume .s-copy h4 em { color: #c4707a; }
.site--lume .s-copy small { color: #a5636b; }
.site--lume .s-ph { box-shadow: 0 1.5cqw 3cqw -1.5cqw rgba(59, 34, 48, 0.45); }

/* ---- Lineae ---- */
.site--lineae .s-nav b { font-weight: 600; letter-spacing: -0.02em; font-size: 2.2cqw; }
.site--lineae .s-copy h4 { font-size: 7.4cqw; font-weight: 500; letter-spacing: -0.055em; line-height: 0.9; }
.site--lineae .s-copy small { color: #e0431b; }
.site--lineae .s-pill { border-radius: 0; }
.site--lineae .s-gal__head small { font-weight: 500; letter-spacing: -0.05em; }
.s-index { padding-top: 0.5cqw; }
.s-index p { display: grid; grid-template-columns: 5cqw 1fr auto; align-items: baseline; gap: 2cqw; padding: 2.2cqw 0; border-top: 0.1cqw solid var(--s-line); font-size: 2.2cqw; }
.s-index span { font-size: 1.3cqw; opacity: 0.55; }
.s-index b { font-weight: 500; letter-spacing: -0.02em; }
.s-index i { font-style: normal; font-size: 1.4cqw; opacity: 0.55; }

/* ---- Strada ---- */
.site--strada .s-nav b { font-weight: 800; letter-spacing: 0.3em; font-size: 1.9cqw; }
.site--strada .s-nav { background: linear-gradient(180deg, rgba(3, 4, 7, 0.75), transparent); }
.site--strada .s-copy { width: 38cqw; }
.site--strada .s-copy h4 { font-size: 6.4cqw; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; }
.site--strada .s-copy h4 em { color: var(--s-accent); }
.site--strada .s-copy small { color: var(--s-accent); }
.site--strada .s-pill { border-radius: 0.5cqw; }
.site--strada .s-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }

/* ---------- Mobile pages ---------- */

.msite {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: var(--s-font, var(--sans));
  font-size: 5cqw;
  line-height: 1.2;
}
.msite * { margin: 0; }
.m-scene { position: absolute; top: 0; left: 0; width: 100%; height: 76%; }
.m-top {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11cqw 7cqw 0;
  font-family: var(--s-head);
  font-size: 6cqw;
}
.m-burger { width: 7cqw; height: 3cqw; border-block: 0.55cqw solid currentColor; opacity: 0.85; }
.m-copy {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: grid;
  gap: 5cqw;
  padding: 24cqw 7cqw 7cqw;
  background: linear-gradient(180deg, transparent, var(--s-bg) 46%);
}
.m-copy h4 { font-family: var(--s-head); font-size: 11.5cqw; font-weight: 500; line-height: 0.98; letter-spacing: -0.035em; }
.m-btn { padding: 3.4cqw; border-radius: 99px; background: var(--s-accent); color: var(--s-on); text-align: center; font-style: normal; font-size: 4.6cqw; font-weight: 500; }

.msite--ember h4 em { color: var(--s-accent); }
.msite--aurea h4 em { color: #c0673c; }
.msite--ferrum h4 { font-size: 10.5cqw; font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; }
.msite--ferrum h4 em { font-style: normal; color: var(--s-accent); }
.msite--ferrum .m-btn { border-radius: 1cqw; }
.msite--ferrum .m-top b { font-weight: 800; letter-spacing: 0.24em; }
.msite--lume h4 em { color: #c4707a; }
.msite--lume h4 { font-weight: 300; }
.msite--aurea h4 { font-weight: 300; letter-spacing: -0.02em; }
.msite--lineae h4 { font-weight: 500; letter-spacing: -0.055em; font-size: 12.5cqw; }
.msite--lineae .m-btn { border-radius: 0; }
.msite--strada h4 { font-size: 10.5cqw; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }
.msite--strada h4 em { color: var(--s-accent); }
.msite--strada .m-btn { border-radius: 1cqw; }
.msite--strada .m-top b { font-weight: 800; letter-spacing: 0.3em; }
.msite--strada .m-scene { top: 14cqw; height: 74%; }

/* hotel: the picture sits in an arch on a cream page */
.m-arch { position: absolute; z-index: 1; top: 24cqw; left: 50%; width: 60cqw; height: 88cqw; overflow: hidden; border-radius: 30cqw 30cqw 0 0; transform: translateX(-50%); box-shadow: 0 6cqw 10cqw -5cqw rgba(18, 58, 64, 0.55); }
.m-arch .m-scene { height: 100%; }
.msite--aurea .m-copy { padding-top: 14cqw; }