/* ==========================================================================
   BEAUTY TRANSIT — Design tokens
   Ink/Paper base, Wine + Brass accents. Display: Fraunces. Body: Work Sans.
   Utility/data: Space Mono (ticket-stub, departure-board feel).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:        #241A1E;
  --ink-soft:   #4A3A3F;
  --paper:      #F4EFE7;
  --paper-dim:  #ECE4D8;
  --wine:       #7A2436;
  --wine-deep:  #5A1A28;
  --brass:      #B08D57;
  --brass-soft: #D9C6A0;
  --rose-dust:  #D8B9B0;
  --stone:      #8A7F76;
  --line:       rgba(36,26,30,0.12);
  --white:      #FFFDF9;

  --font-display: 'Fraunces', serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --container: 1240px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:500; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Eyebrow / label / mono utility */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--wine);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow.on-dark{ color:var(--brass-soft); }
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--brass); display:inline-block; }

/* ==========================================================================
   Departure ticker (top strip)
   ========================================================================== */
.ticker-bar{
  background:var(--ink);
  color:var(--paper-dim);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(244,239,231,0.1);
}
.ticker-track{
  display:inline-flex;
  animation:ticker 38s linear infinite;
}
.ticker-track span{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.08em;
  padding:9px 28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.ticker-track span::before{ content:"✦"; color:var(--brass); font-size:10px; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   Header
   ========================================================================== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,231,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  gap:24px;
}
.logo{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.01em;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.logo .mark{
  color:var(--wine);
  font-style:italic;
  font-weight:400;
}
.logo-sub{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:0.16em;
  color:var(--stone);
  display:block;
  margin-top:-2px;
  text-transform:uppercase;
}

nav.main-nav{ display:flex; align-items:center; gap:36px; }
nav.main-nav a{
  font-size:13.5px;
  letter-spacing:0.03em;
  font-weight:500;
  position:relative;
  padding:4px 0;
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--wine);
  transition:width .25s ease;
}
nav.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  transition:border-color .2s ease, background .2s ease;
}
.icon-btn:hover{ border-color:var(--wine); background:var(--white); }
.menu-toggle{ display:none; }

@media (max-width:920px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; }
}

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
  background:var(--ink); color:var(--paper);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:100; padding:28px 26px; overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{
  display:block; font-family:var(--font-display); font-size:22px;
  padding:14px 0; border-bottom:1px solid rgba(244,239,231,0.12);
}
.mobile-nav .close-btn{
  background:none; border:none; color:var(--paper); font-size:24px;
  margin-bottom:20px;
}
.scrim{
  position:fixed; inset:0; background:rgba(36,26,30,0.5);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:99;
}
.scrim.show{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--radius);
  border:1px solid var(--ink); transition:all .25s ease;
}
.btn-primary{ background:var(--wine); border-color:var(--wine); color:var(--white); }
.btn-primary:hover{ background:var(--wine-deep); border-color:var(--wine-deep); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost.on-dark{ border-color:rgba(244,239,231,0.4); color:var(--paper); }
.btn-ghost.on-dark:hover{ background:var(--paper); color:var(--ink); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  padding:64px 0 88px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero-copy h1{
  font-size:clamp(42px,5.6vw,74px);
  line-height:0.98;
  margin-bottom:24px;
}
.hero-copy h1 em{
  font-style:italic; color:var(--wine); font-weight:400;
}
.hero-copy p{
  font-size:17px; color:var(--ink-soft); max-width:460px; margin-bottom:32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-visual{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius);
  background:
    radial-gradient(circle at 30% 20%, rgba(216,185,176,0.9), transparent 55%),
    linear-gradient(155deg, #C99C86 0%, var(--wine) 46%, var(--ink) 100%);
  overflow:hidden;
}
.hero-visual::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:
    repeating-linear-gradient(115deg, rgba(244,239,231,0.05) 0 2px, transparent 2px 42px);
}
.hero-tag{
  position:absolute; left:20px; bottom:20px; right:20px; z-index:2;
  background:rgba(36,26,30,0.55); backdrop-filter:blur(6px);
  color:var(--paper); padding:16px 18px; border-radius:var(--radius);
  border:1px solid rgba(244,239,231,0.25);
}
.hero-tag .eyebrow{ color:var(--brass-soft); margin-bottom:6px; }
.hero-tag strong{ font-family:var(--font-display); font-size:17px; font-weight:500; display:block; }

@media (max-width:920px){
  .hero{ grid-template-columns:1fr; padding:40px 0 56px; gap:36px; }
  .hero-visual{ order:-1; aspect-ratio:16/11; }
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.section{ padding:78px 0; }
.section-tight{ padding:56px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:40px; gap:24px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(28px,3.2vw,40px); }
.section-head .eyebrow{ margin-bottom:12px; }
.section-link{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap;
}

.on-ink{ background:var(--ink); color:var(--paper); }
.on-ink .stone-text{ color:var(--brass-soft); }

/* ==========================================================================
   Featured editorial grid
   ========================================================================== */
.feature-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:28px;
}
.feature-main{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/11; color:var(--white);
  background:linear-gradient(200deg,#B98A72,var(--wine) 60%,var(--ink));
}
.feature-side{ display:flex; flex-direction:column; gap:28px; }
.card-photo{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10.5;
}
.card-photo.duotone-1{ background:linear-gradient(160deg,#DCC3B4,var(--rose-dust) 55%,var(--wine)); }
.card-photo.duotone-2{ background:linear-gradient(160deg,#C7B79A,var(--brass) 55%,#5c4a2c); }
.card-photo.duotone-3{ background:linear-gradient(160deg,#A9A79C,var(--stone) 55%,var(--ink)); }
.card-photo.duotone-4{ background:linear-gradient(160deg,#D8B9B0,#9c5661 55%,var(--wine-deep)); }
.card-photo.duotone-5{ background:linear-gradient(160deg,#e3d5c0,var(--brass-soft) 55%,var(--brass)); }

/* Real <img> photography sits inside any .card-photo / .hero-visual / .product-photo /
   .article-hero-photo / .rec-photo box, filling it edge to edge. If an image file is
   missing or hasn't been added yet, it hides itself (see onerror on the <img> tags) and
   the brand-color gradient behind it shows through instead — so the site never breaks. */
.card-photo, .product-photo, .article-hero-photo, .rec-photo{ position:relative; overflow:hidden; }
.card-photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(18,12,14,0.65) 0%, rgba(18,12,14,0.05) 45%, transparent 70%);
  pointer-events:none;
}
.card-photo img, .hero-visual img, .product-photo img, .article-hero-photo img, .rec-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.overlay-copy{
  position:absolute; left:0; right:0; bottom:0; padding:26px; z-index:2;
}
.feature-main .overlay-copy{ padding:34px; }
.card-tag{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; background:rgba(244,239,231,0.16); border:1px solid rgba(244,239,231,0.4);
  padding:5px 10px; border-radius:20px; margin-bottom:12px; color:var(--paper);
}
.card-title{ font-family:var(--font-display); font-weight:500; color:var(--white); }
.feature-main .card-title{ font-size:clamp(24px,2.6vw,32px); margin-bottom:10px; line-height:1.1; }
.feature-side .card-title{ font-size:19px; line-height:1.15; }
.card-meta{
  font-family:var(--font-mono); font-size:11px; color:rgba(244,239,231,0.75);
  margin-top:10px; letter-spacing:0.04em;
}

@media (max-width:820px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature-side{ flex-direction:row; }
  .feature-side .card-photo{ flex:1; }
}
@media (max-width:560px){ .feature-side{ flex-direction:column; } }

/* ==========================================================================
   Transit line — category signature element
   ========================================================================== */
.transit-line{ position:relative; padding:36px 0 8px; }
.transit-line .rail{
  position:absolute; top:64px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--brass) 0 10px, transparent 10px 16px);
}
.transit-stops{
  display:grid; grid-template-columns:repeat(7,1fr); gap:16px; position:relative;
}
.stop{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding-top:0;
}
.stop-node{
  width:16px; height:16px; border-radius:50%; background:var(--paper);
  border:2px solid var(--wine); margin-bottom:14px; position:relative; z-index:2;
  transition:transform .2s ease, background .2s ease;
}
.stop:hover .stop-node{ background:var(--wine); transform:scale(1.15); }
.stop-code{ font-family:var(--font-mono); font-size:10.5px; color:var(--stone); margin-bottom:6px; }
.stop-name{ font-family:var(--font-display); font-size:17px; margin-bottom:6px; }
.stop-count{ font-size:12.5px; color:var(--stone); }

@media (max-width:920px){
  .transit-stops{ grid-template-columns:repeat(4,1fr); }
  .transit-line .rail{ display:none; }
}
@media (max-width:600px){
  .transit-stops{ grid-template-columns:repeat(2,1fr); gap:24px 16px; }
}

/* ==========================================================================
   Product / shop cards
   ========================================================================== */
.product-scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:230px; gap:22px;
  overflow-x:auto; padding-bottom:14px; scroll-snap-type:x mandatory;
}
.product-scroll::-webkit-scrollbar{ height:5px; }
.product-scroll::-webkit-scrollbar-thumb{ background:var(--brass-soft); border-radius:4px; }
.product-card{ scroll-snap-align:start; }
.product-photo{
  aspect-ratio:1/1.1; border-radius:var(--radius); margin-bottom:14px; position:relative; overflow:hidden;
}
.product-badge{
  position:absolute; top:10px; left:10px; background:var(--paper); color:var(--ink);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:20px;
}
.product-name{ font-family:var(--font-display); font-size:16px; margin-bottom:4px; }
.product-brand{ font-size:12.5px; color:var(--stone); margin-bottom:8px; }
.product-row{ display:flex; justify-content:space-between; align-items:center; }
.product-price{ font-family:var(--font-mono); font-size:13px; font-weight:700; }
.product-rating{ font-family:var(--font-mono); font-size:12px; color:var(--brass); }
.product-link-hint{
  display:block; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--brass-soft);
}

/* ==========================================================================
   Article cards (editorial grid)
   ========================================================================== */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px; }
.article-card .card-photo{ margin-bottom:18px; aspect-ratio:4/3; }
.article-card .cat-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; color:var(--wine);
  text-transform:uppercase; margin-bottom:10px; display:block;
}
.article-card h3{ font-size:20px; line-height:1.25; margin-bottom:10px; }
.article-card p{ color:var(--ink-soft); font-size:14px; line-height:1.6; margin-bottom:14px; }
.article-card .card-meta{ color:var(--stone); }
@media (max-width:920px){ .article-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .article-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{
  border-radius:var(--radius); background:var(--ink); color:var(--paper);
  padding:56px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.newsletter::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border:1px solid rgba(176,141,87,0.35); border-radius:50%;
}
.newsletter::after{
  content:""; position:absolute; right:-20px; top:-20px; width:220px; height:220px;
  border:1px solid rgba(176,141,87,0.2); border-radius:50%;
}
.newsletter h2{ font-size:clamp(26px,3vw,34px); margin-bottom:12px; }
.newsletter p{ color:var(--brass-soft); max-width:420px; font-size:14.5px; }
.newsletter-form{ display:flex; gap:10px; position:relative; z-index:1; }
.newsletter-form input{
  background:transparent; border:1px solid rgba(244,239,231,0.35); color:var(--paper);
  padding:14px 16px; font-family:var(--font-body); font-size:14px; border-radius:var(--radius);
  min-width:230px;
}
.newsletter-form input::placeholder{ color:rgba(244,239,231,0.5); }
@media (max-width:760px){
  .newsletter{ grid-template-columns:1fr; padding:36px 24px; }
  .newsletter-form{ flex-direction:column; }
  .newsletter-form input{ min-width:0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{ background:var(--ink); color:var(--paper); padding-top:64px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:48px;
  border-bottom:1px solid rgba(244,239,231,0.12);
}
.footer-brand .logo{ color:var(--paper); margin-bottom:14px; }
.footer-brand p{ color:rgba(244,239,231,0.6); font-size:13.5px; max-width:260px; line-height:1.7; }
.footer-col h4{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brass-soft); margin-bottom:16px; font-weight:400;
}
.footer-col a{
  display:block; font-size:13.5px; color:rgba(244,239,231,0.75); padding:6px 0;
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding:22px 0;
  font-family:var(--font-mono); font-size:11px; color:rgba(244,239,231,0.5); flex-wrap:wrap; gap:10px;
}
.social-row{ display:flex; gap:14px; }
.social-row a{
  width:32px; height:32px; border:1px solid rgba(244,239,231,0.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
@media (max-width:920px){
  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ==========================================================================
   Admin password gate (admin.html / editor.html)
   ========================================================================== */
html.bt-locked .admin-shell{ display:none; }
#btGate{ display:none; }
html.bt-locked #btGate{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:var(--ink); padding:24px;
}
.bt-gate-box{
  width:100%; max-width:360px; text-align:center;
  background:rgba(244,239,231,0.04); border:1px solid rgba(244,239,231,0.1);
  border-radius:var(--radius); padding:40px 32px;
}
.bt-gate-box .eyebrow{ margin-bottom:16px; justify-content:center; }
.bt-gate-box h2{ color:var(--paper); font-size:24px; margin-bottom:10px; }
.bt-gate-box p{ color:rgba(244,239,231,0.55); font-size:13.5px; margin-bottom:24px; }
.bt-gate-box input[type=password]{
  width:100%; background:rgba(244,239,231,0.06); border:1px solid rgba(244,239,231,0.2);
  color:var(--paper); padding:13px 16px; border-radius:var(--radius); font-family:var(--font-body);
  font-size:14px; margin-bottom:8px; text-align:center;
}
.bt-gate-error{
  display:none; color:#D89393; font-size:12.5px; margin-bottom:16px !important; text-align:center;
}
.bt-gate-box .btn{ margin-top:8px; }
.bt-gate-back{
  display:inline-block; margin-top:20px; font-family:var(--font-mono); font-size:11.5px;
  color:rgba(244,239,231,0.4); letter-spacing:0.04em;
}
.bt-gate-box.shake{ animation:bt-shake 0.4s ease; }
@keyframes bt-shake{
  0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(6px); }
}

/* Discreet owner-only entry point in the public footer */
.owner-entry{
  font-size:10.5px; color:rgba(244,239,231,0.28); letter-spacing:0.04em;
}
.owner-entry:hover{ color:rgba(244,239,231,0.55); }

.disclosure{
  font-size:12.5px; color:var(--stone); border-left:2px solid var(--brass);
  padding:10px 16px; background:var(--paper-dim); border-radius:0 var(--radius) var(--radius) 0;
}