*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
:root{
  --ground:#0e1115;
  --ground-raised:#161a20;
  --ink:#efe6d6;
  --ink-soft:#b9ae9c;
  --olive:#c9a45c;
  --olive-soft:#c9a45c;
  --brown:#e8744f;
  --brown-deep:#c25a3a;
  --line:rgba(201,164,92,0.38);
}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--ground);
  color:var(--ink);
  font-family:'EB Garamond', Garamond, Georgia, serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Playfair Display', Georgia, serif; font-weight:600; margin:0; text-wrap:balance; }
em.acc{ font-style:italic; font-weight:500; color:var(--brown); }
.eyebrow{ font-family:'EB Garamond', serif; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--olive-soft); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--brown); outline-offset:2px; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }

/* ---- Utility strip ---- */
.utility{
  border-bottom:1px solid var(--line);
  font-family:'Oswald', sans-serif; font-size:11px; letter-spacing:0.14em;
  color:var(--ink-soft); text-transform:uppercase;
}
.utility .wrap{ padding:9px 24px; }

/* ---- Nav / masthead ---- */
.masthead{
  position:sticky; top:0; z-index:100;
  background:var(--ground); border-bottom:1px solid var(--line);
  transition:box-shadow 0.2s ease;
}
.masthead.scrolled{ box-shadow:0 2px 18px rgba(0,0,0,0.5); }
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:48px; width:auto; display:block; }
.brand .word{ font-family:'Playfair Display', serif; font-weight:700; font-size:20px; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:26px; font-family:'Oswald', sans-serif; font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:0.08em; }
.nav-links a{ color:var(--ink-soft); }
.nav-links a.cta{ color:var(--brown); border-bottom:1px solid var(--brown); padding-bottom:2px; }
.nav-links .hide-sm{ display:none; }
@media (min-width:640px){ .nav-links .hide-sm{ display:inline; } }

/* ---- Hero: full-bleed photo, headline overlaid ---- */
.hero{ position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-media{ position:relative; width:100%; aspect-ratio:4/5; }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,17,21,0.05) 0%, rgba(14,17,21,0.68) 62%, rgba(14,17,21,0.97) 100%);
}
.hero-copy{
  position:relative; margin-top:-185px; padding:0 24px 48px;
  max-width:680px;
}
.hero-copy h1{ color:var(--ink); font-weight:800; font-size:clamp(30px,6.5vw,48px); line-height:1.06; letter-spacing:-0.005em; margin-top:12px; }
.hero-copy .dek{ font-size:18px; color:var(--ink-soft); max-width:56ch; margin:18px 0 0; }
.hero-copy .cities{ margin-top:22px; font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:0.1em; color:var(--olive-soft); text-transform:uppercase; }
.hero-copy .cities span:not(:last-child)::after{ content:"·"; margin:0 10px; color:var(--line); }

@media (min-width:760px){
  .hero-media{ aspect-ratio:16/8; }
  .hero-copy{ margin-top:-220px; }
}

/* ---- Section rhythm ---- */
section{ padding:56px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ margin-bottom:32px; }
.section-head h2{ font-size:28px; margin-top:6px; font-weight:700; }

/* ---- About ---- */
.about-top{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.about-photo{
  width:160px; max-width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--line); flex-shrink:0;
}
.about-intro{ display:flex; flex-direction:column; gap:12px; }
.about-name{
  font-family:'Playfair Display', serif; font-weight:600; font-size:15px;
  color:var(--ink);
}
.pull{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:500;
  font-size:24px; line-height:1.35; color:var(--ink); max-width:24ch;
  border-left:2px solid var(--brown); padding-left:20px;
}
.about-body{ margin-top:32px; }
.about-body p{ max-width:66ch; color:var(--ink-soft); }
@media (min-width:640px){ .about-top{ flex-direction:row; align-items:flex-start; gap:28px; } }

/* ---- Photo bar: scrollable carousel ---- */
.photo-bar{ padding:0; border-bottom:1px solid var(--line); }
.photo-carousel{ position:relative; max-width:100%; }
.photo-carousel-track{
  display:flex; width:100%; max-width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.photo-carousel-track::-webkit-scrollbar{ display:none; }
.photo-carousel-item{
  flex:0 0 100%; min-width:0; scroll-snap-align:start; position:relative;
  aspect-ratio:4/3; overflow:hidden;
}
.photo-carousel-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-carousel-item::after{ content:""; position:absolute; inset:0; background:rgba(14,17,21,0.1); }
@media (min-width:640px){ .photo-carousel-item{ flex:0 0 50%; } }

.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; padding:0;
  background:rgba(14,17,21,0.55); border:1px solid var(--line); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carousel-nav:hover{ background:rgba(14,17,21,0.8); border-color:var(--brown); }
.carousel-nav.prev{ left:12px; }
.carousel-nav.next{ right:12px; }
@media (max-width:639px){ .carousel-nav{ display:none; } }

.carousel-dots{ display:flex; justify-content:center; align-items:center; gap:10px; padding:14px 0; background:var(--ground); }
.carousel-dots button{
  width:7px; height:7px; padding:0; border-radius:50%; border:1px solid var(--olive-soft);
  background:transparent; cursor:pointer; transition:background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.carousel-dots button.active{ background:var(--brown); border-color:var(--brown); transform:scale(1.35); }
.carousel-dots button:hover{ border-color:var(--brown); }

/* ---- Journal: editorial grid, no cards ---- */
.gather-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:640px){ .gather-grid{ grid-template-columns:repeat(3,1fr); } }
.gather-item{ display:flex; flex-direction:column; }
.gather-thumb{
  aspect-ratio:4/3; width:100%; margin-bottom:16px;
  background:
    repeating-linear-gradient(135deg, rgba(201,164,92,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--ground-raised), #0b0d10);
  position:relative; overflow:hidden;
}
.gather-thumb svg{ position:absolute; right:14px; bottom:12px; width:38px; height:38px; opacity:0.55; }
.gather-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gather-item .eyebrow{ margin-bottom:8px; }
.journal-empty{ color:var(--ink-soft); grid-column:1 / -1; font-style:italic; }
.coming-soon-grid{
  grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:24px;
}
@media (min-width:640px){ .coming-soon-grid{ grid-template-columns:repeat(4,1fr); } }
.coming-soon-tile{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--ground-raised); }
.coming-soon-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.coming-soon-feature{
  grid-column:1 / -1; margin:24px auto 0; max-width:520px;
}
.coming-soon-feature img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.gather-item h3{ font-size:20px; line-height:1.25; margin-bottom:8px; }
.gather-item .meta{ font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; }
.gather-item p{ margin:0; color:var(--ink-soft); font-size:15px; }

/* ---- Join / subscribe ---- */
.join-panel{ background:var(--ground-raised); color:var(--ink); padding:48px 32px; margin:0 -24px; }
.join-panel .wrap{ padding:0 24px; }
.join-panel h2{ color:var(--ink); font-size:28px; }
.join-panel p{ color:var(--ink-soft); max-width:56ch; margin-top:12px; }
.join-panel form{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.join-panel input{
  flex:1; min-width:180px; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:'EB Garamond', serif; font-size:16px;
  padding:9px 4px; outline:none;
}
.join-panel input::placeholder{ color:var(--ink-soft); opacity:0.7; }
.join-panel input:focus{ border-bottom-color:var(--brown); }
.join-panel button{
  font-family:'Oswald', sans-serif; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; font-size:14px;
  background:var(--brown); color:var(--ground); border:none; border-radius:2px; padding:13px 26px; cursor:pointer;
  align-self:flex-start; margin-top:4px;
}
.join-panel button:hover{ background:var(--brown-deep); color:var(--ink); }
.form-note{ font-size:12px; color:var(--ink-soft); margin-top:12px; }

/* ---- Post page ---- */
.post-body{ color:var(--ink-soft); font-size:17px; }
.post-body p{ margin:0 0 20px; }
.post-body h2{ font-size:24px; margin:32px 0 14px; color:var(--ink); }
.post-body h3{ font-size:19px; margin:28px 0 12px; color:var(--ink); }
.post-body a{ color:var(--brown); border-bottom:1px solid var(--line); }
.post-figure{ margin:28px 0; }
.post-figure img{ width:100%; height:auto; display:block; }
.post-figure figcaption{ font-size:13px; color:var(--ink-soft); margin-top:8px; }
.tag-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tag-pill{
  font-family:'Oswald', sans-serif; font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:4px; padding:6px 10px;
}

/* ---- Footer ---- */
footer{ padding:28px 0 44px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px; font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
footer .brass{ color:var(--olive-soft); }
footer a:hover{ color:var(--brown); }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }