:root {
  --ink: #070708;
  --paper: #f4edf1;
  --silver: #d7d2d5;
  --pink: #e8aac6;
  --muted: #aaa2a7;
  --line: rgba(243, 235, 240, .62);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: "Courier New", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--paper);
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.05), transparent 24%),
    radial-gradient(circle at 92% 8%, rgba(232,170,198,.04), transparent 20%),
    repeating-radial-gradient(circle at 40% 30%, transparent 0 2px, rgba(255,255,255,.012) 3px 4px),
    var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image: url("assets/homepage-v2-reference.png");
  background-size: cover;
  mix-blend-mode: soft-light;
  filter: grayscale(1) contrast(1.4);
  z-index: -1;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.skip-link { position:absolute; left:-9999px; top:0; background:#fff; color:#000; padding:.7rem; z-index:99; }
.skip-link:focus { left:.5rem; top:.5rem; }
.site-header {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,.15);
  background: rgba(7,7,8,.94);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
}
.mini-mark { font: italic 1.9rem/1 var(--serif); text-decoration:none; margin-right:auto; letter-spacing:-.08em; }
.main-nav { display:flex; align-items:center; gap: clamp(1.1rem, 2.8vw, 2.8rem); }
.main-nav a { text-decoration:none; text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; padding: 1.4rem 0 1rem; border-bottom: 3px solid transparent; white-space:nowrap; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color:#f2c1d6; border-color:var(--pink); }
.header-icons { display:flex; gap:.85rem; font-size:1.45rem; }
.header-icons a { text-decoration:none; }
.menu-toggle { display:none; background:none; color:#fff; border:0; font-size:1.7rem; cursor:pointer; }
.shell { width:min(1140px, calc(100% - 3rem)); margin-inline:auto; }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
body:has(.masthead)::before { display:none; }
.masthead {
  width:100vw;
  height:25.05vw;
  margin-left:calc(50% - 50vw);
  background-image:url("assets/homepage-v2-reference.png");
  background-position:center -5.34vw;
  background-size:100% auto;
  background-repeat:no-repeat;
  overflow:hidden;
}

.hero-grid { display:grid; grid-template-columns:minmax(0, 3.25fr) minmax(235px, 1fr); border-bottom:1px solid var(--line); padding-bottom:1.2rem; }
.hero-photo { min-height:360px; background:url("assets/hero.png") center/cover no-repeat; }
.hero-copy { padding:1.1rem 0 1rem 2rem; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { text-transform:uppercase; font: .72rem var(--mono); letter-spacing:.1em; color:#ded6db; }
.rule-label { display:flex; align-items:center; gap:1rem; }
.rule-label::after { content:""; height:1px; background:var(--line); flex:1; }
.hero-copy h1,.page-title { font:italic clamp(3.2rem,5.5vw,5rem)/.92 var(--serif); margin:1.3rem 0; letter-spacing:-.045em; }
.hero-copy p { font: .78rem/1.55 var(--mono); text-transform:uppercase; letter-spacing:.13em; }
.arrow-link { display:inline-block; font-size:2rem; text-decoration:none; transition:transform .2s; }
.arrow-link:hover { transform:translateX(.45rem); }

.destination-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:2rem 0; }
.destination-card { min-height:230px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background-size:cover; background-position:center; text-indent:-9999px; box-shadow:0 8px 22px #000; transition:.25s ease; }
.destination-card:hover { transform:translateY(-5px); border-color:#fff; box-shadow:0 14px 30px #000, 0 0 18px rgba(232,170,198,.12); }
.destination-card.diary { background-image:url("assets/diary.png"); }
.destination-card.currently { background-image:url("assets/currently.png"); }
.destination-card.boards { background-image:url("assets/boards.png"); }
.destination-card.custom-image { display:flex; flex-direction:column; justify-content:flex-end; position:relative; padding:1.25rem; text-indent:0; text-decoration:none; background-position:center; color:#fff; }
.destination-title { font:italic clamp(1.6rem,3vw,3rem)/1 Georgia,serif; margin-bottom:1rem; text-shadow:0 2px 12px #000; }
.destination-subtitle { font:.75rem/1.2 "Courier New",monospace; text-transform:uppercase; letter-spacing:.02em; padding-right:2rem; text-shadow:0 2px 8px #000; }
.destination-arrow { position:absolute; right:1.2rem; bottom:.9rem; font-size:1.8rem; }
.home-lower { display:grid; grid-template-columns:1fr 1.55fr 1.15fr; gap:2rem; align-items:center; padding:1rem 0 2.5rem; }
.millie-note { background:#d8c8ce; color:#171417; padding:1.4rem 1.2rem; transform:rotate(-2deg); box-shadow:0 8px 18px #000; position:relative; }
.millie-note::before { content:"A Note from Millie"; font:italic 1.6rem var(--serif); display:block; margin-bottom:.7rem; }
.millie-note p { font:.8rem/1.55 var(--mono); margin:0; }
.playlist { border:1px solid var(--line); border-radius:16px; padding:1rem; display:grid; grid-template-columns:105px 1fr; gap:1.1rem; align-items:center; text-decoration:none; transition:.2s; }
.playlist:hover { border-color:var(--pink); transform:translateY(-3px); }
.playlist img { border:1px solid #978f95; width:105px; aspect-ratio:1; object-fit:cover; }
.playlist h2 { font:italic 1.7rem var(--serif); margin:0 0 .35rem; }
.playlist p { margin:.15rem 0; font:.75rem var(--mono); text-transform:uppercase; }
.playlist-action { color:#111; background:var(--pink); display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; margin-top:.7rem; font-size:1.1rem; }
.chrome-cta { display:block; color:#111; text-align:center; text-decoration:none; font:italic clamp(1.4rem,2.4vw,2.2rem) var(--serif); padding:1.05rem 1.2rem; border-radius:999px; border:4px double #676167; background:linear-gradient(180deg,#fbf7fa 0,#aca4a9 17%,#f6edf3 38%,#d49db9 53%,#f7edf3 69%,#8b858a 87%,#eee 100%); box-shadow:inset 0 0 9px #fff, 0 0 16px rgba(232,170,198,.55), 0 9px 18px #000; }
.chrome-cta:hover { filter:brightness(1.14); transform:translateY(-2px); }

.inner-page { padding:clamp(2rem,5vw,5rem) 0 4rem; }
.page-kicker { color:var(--pink); text-transform:uppercase; letter-spacing:.2em; font:.72rem var(--mono); }
.page-intro { max-width:720px; font:clamp(1.05rem,2vw,1.35rem)/1.6 var(--serif); color:#d8d0d5; }
.section-heading { font:italic clamp(2rem,4vw,3.4rem) var(--serif); margin:3rem 0 1.2rem; }
.category-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2.3rem 0 2.8rem; }
.category-feature { display:flex; flex-direction:column; min-height:355px; padding:1.5rem; color:#eee9ed; text-decoration:none; border:1px solid rgba(229,215,225,.36); background:radial-gradient(circle at 100% 0,rgba(196,185,196,.15),transparent 42%),#121013; transition:transform .2s,border-color .2s; }
.category-feature:hover { transform:translateY(-4px); border-color:#eab6cf; }
.category-feature:nth-child(2) { background:radial-gradient(circle at 100% 0,rgba(234,182,207,.18),transparent 46%),#121013; }
.category-feature.mayhem-feature { background:radial-gradient(circle at 100% 0,rgba(179,217,235,.18),transparent 48%),#121013; }
.category-number { color:#eab6cf; font:.67rem var(--mono); text-transform:uppercase; letter-spacing:.15em; }
.category-feature h2 { font:italic clamp(2rem,3vw,3rem)/.95 var(--serif); margin:1.7rem 0 .8rem; }
.category-feature strong { font:italic 1.15rem/1.3 var(--serif); color:#fff; }
.category-feature p { color:#c8c0c7; line-height:1.6; font-size:.9rem; }
.category-go { margin-top:auto; padding-top:1rem; color:#d7e8f0; font:.7rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.category-page-tagline { color:#d7e8f0; font:italic clamp(1.5rem,3vw,2.25rem) var(--serif); margin:.4rem 0; }
.diary-page[data-diary-category] .category-overview { display:none; }
.diary-empty { color:#bcb2ba; padding:2rem 0; font:italic 1.4rem var(--serif); }
.category-tabs { display:flex; gap:.7rem; flex-wrap:wrap; margin:1.7rem 0 2rem; }
.pill { border:1px solid var(--line); border-radius:999px; padding:.65rem 1rem; text-transform:uppercase; font:.72rem var(--mono); background:transparent; color:#fff; text-decoration:none; cursor:pointer; }
.pill:hover,.pill.active { color:#171417; background:var(--pink); border-color:var(--pink); }
.editorial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.story-card { border:1px solid rgba(255,255,255,.24); background:#111; text-decoration:none; overflow:hidden; transition:.2s; }
.story-card:hover { transform:translateY(-4px); border-color:var(--pink); }
.story-art { min-height:210px; display:grid; place-items:center; font-size:4rem; background:radial-gradient(circle at 70% 20%,#64515b,transparent 35%),linear-gradient(135deg,#161417,#050506); }
.story-body { padding:1.2rem; }
.story-body h2 { font:italic 1.8rem/1 var(--serif); margin:.35rem 0 .6rem; }
.story-body p { color:#bbb2b8; line-height:1.5; font-size:.9rem; }
.story-meta { font:.68rem var(--mono); text-transform:uppercase; color:var(--pink); }
.article { max-width:760px; margin:auto; }
.article h1 { font:italic clamp(3rem,8vw,6rem)/.9 var(--serif); letter-spacing:-.05em; }
.article .dek { font:1.3rem/1.5 var(--serif); color:#cec5cb; }
.article-copy { border-top:1px solid var(--line); padding-top:2rem; }
.article-copy p { font:1.08rem/1.8 var(--serif); color:#e0d8dd; }
.article-copy h2 { font:italic 2.2rem var(--serif); margin-top:2.5rem; }
.group-chat { margin:4rem 0 3rem; padding:clamp(1.3rem,4vw,2.4rem); border:1px solid #b6c6d0; background:radial-gradient(circle at 90% 5%,rgba(163,205,226,.12),transparent 38%),linear-gradient(145deg,#17171b,#09090b); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 36px #0007; }
.group-chat-kicker { color:#cfe4ee; font:.7rem var(--mono); letter-spacing:.17em; text-transform:uppercase; }
.group-chat h2 { font:italic clamp(2rem,5vw,3.5rem)/1 var(--serif); margin:.5rem 0; color:#f4eef3; }
.group-chat-subhead { color:#e8b7d0; font:italic 1.45rem var(--serif); margin:.2rem 0 1.2rem; }
.group-chat-question { border-left:2px solid #b9d9e6; padding-left:1rem; font:1.15rem/1.5 var(--serif); color:#f2eaf0; }
.group-chat-guideline,.group-chat-status,.group-chat-note { color:#bac3c9; font:.75rem/1.5 var(--mono); }
.group-chat-form { display:grid; gap:.8rem; margin:1.5rem 0 2.5rem; }
.group-chat-form label { color:#dce6eb; font:.72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.group-chat-form input,.group-chat-form textarea { width:100%; box-sizing:border-box; background:#09090b; color:#fff; border:1px solid #78828a; padding:.85rem 1rem; font:1rem/1.45 var(--sans); }
.group-chat-form textarea { min-height:135px; resize:vertical; }
.group-chat-form input:focus-visible,.group-chat-form textarea:focus-visible { outline:2px solid #b9d9e6; outline-offset:2px; }
.group-chat-form .honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.group-chat-submit { justify-self:start; background:linear-gradient(#fff,#d7e4ea 40%,#9b9ca4); border:1px solid #e5e8ec; color:#111; padding:.78rem 1.4rem; font:.75rem var(--mono); text-transform:uppercase; cursor:pointer; }
.group-chat-submit:disabled { opacity:.5; cursor:wait; }
.comment-list { list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:.8rem; }
.comment { border-top:1px solid rgba(208,224,233,.25); padding:1rem 0 .5rem; }
.comment-top { display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.comment-name { color:#f7eff4; font:italic 1.2rem var(--serif); }
.comment-date { color:#a9b7be; font:.67rem var(--mono); }
.comment-body { white-space:pre-wrap; overflow-wrap:anywhere; color:#d8d3d8; line-height:1.55; margin:.45rem 0; }
.comment-more { background:transparent; color:#d1e4ed; border:1px solid #768892; padding:.65rem 1rem; cursor:pointer; }
.placeholder-note { border-left:3px solid var(--pink); padding:.8rem 1rem; background:rgba(232,170,198,.08); color:#d6ced3; font:.78rem/1.5 var(--mono); }
.favorites-grid,.boards-grid,.portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.favorite,.board,.portfolio-item { border:1px solid rgba(255,255,255,.25); padding:1.4rem; min-height:220px; position:relative; overflow:hidden; background:linear-gradient(145deg,#161416,#09090a); }
.favorites-empty,.portfolio-empty,.inquiry-unavailable { border:1px solid rgba(255,255,255,.25); background:linear-gradient(145deg,#171418,#0b0a0c); padding:1.4rem; color:#d8cdd4; font:italic 1.3rem/1.5 var(--serif); max-width:760px; }
.entry-media { width:100%; max-height:320px; object-fit:cover; margin:0 0 1rem; border:1px solid rgba(255,255,255,.25); }
.article-media { width:100%; max-height:520px; object-fit:cover; margin:1.5rem 0; }
.favorite::after,.board::after { content:"✦"; position:absolute; right:1rem; top:.5rem; color:var(--pink); font-size:2.5rem; opacity:.35; }
.favorite h2,.board h2,.portfolio-item h2 { font:italic 2rem var(--serif); margin:.5rem 0; }
.favorite .number { font:700 4rem var(--sans); color:rgba(255,255,255,.09); position:absolute; right:1rem; bottom:.2rem; }
.board { display:flex; flex-direction:column; justify-content:flex-end; min-height:270px; text-decoration:none; }
.board:nth-child(1) { background:linear-gradient(0deg,#090909,transparent),url("assets/boards.png") center/cover; }
.board:nth-child(2) { background:linear-gradient(0deg,#090909,rgba(0,0,0,.2)),url("assets/hero.png") center/cover; }
.board:nth-child(n+3) { background:radial-gradient(circle at 25% 20%,#705766,transparent 25%),linear-gradient(135deg,#242124,#070707); }
.board.custom-image { background-size:cover; background-position:center; }
.board.custom-image h2,.board.custom-image span,.board.custom-image p { text-shadow:0 2px 12px #000; }
.archive-controls { display:grid; grid-template-columns:2fr 1fr 1fr; gap:.8rem; margin:2rem 0; }
.control { width:100%; background:#121113; color:#fff; border:1px solid var(--line); padding:.85rem 1rem; border-radius:0; }
.archive-list { display:grid; gap:.6rem; }
.archive-item { display:grid; grid-template-columns:130px 1fr auto; gap:1rem; align-items:center; padding:1rem; border-top:1px solid rgba(255,255,255,.22); }
.archive-item h2 { font:italic 1.45rem var(--serif); margin:0; }
.archive-item time,.archive-item span { font:.7rem var(--mono); text-transform:uppercase; color:#bdb4ba; }
.empty-state { display:none; padding:2rem; text-align:center; color:var(--muted); }
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0; }
.service { padding:1.2rem; border-top:1px solid var(--pink); background:rgba(255,255,255,.025); }
.service h3 { font:italic 1.5rem var(--serif); }
.inquiry-form { display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:820px; }
.field { display:grid; gap:.4rem; }
.field.full { grid-column:1/-1; }
.field label { font:.7rem var(--mono); text-transform:uppercase; letter-spacing:.12em; }
.field input,.field select,.field textarea { background:#111; color:#fff; border:1px solid var(--line); padding:.85rem; }
.field textarea { min-height:140px; resize:vertical; }
.submit-button { justify-self:start; border:0; cursor:pointer; min-width:220px; }
.form-status { grid-column:1/-1; color:#f1bfd5; font:.8rem/1.5 var(--mono); }
.form-hint { grid-column:1/-1; color:#bfb6bd; font:.72rem/1.5 var(--mono); margin:0; }
.site-footer { border-top:1px solid var(--line); padding:1.4rem 0 2rem; }
.footer-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.footer-line { flex:1; height:1px; background:var(--line); }
.footer-tag { font:.72rem var(--serif); letter-spacing:.25em; text-transform:uppercase; text-align:center; }
.footer-meta { display:flex; justify-content:space-between; color:#8f878c; font:.65rem var(--mono); margin-top:1.4rem; }

@media (max-width: 850px) {
  .site-header { height:58px; }
  .menu-toggle { display:block; }
  .header-icons { display:none; }
  .main-nav { position:fixed; inset:58px 0 auto; background:#09090a; padding:1rem 1.3rem 1.7rem; display:none; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:.85rem 0; }
  .masthead { height:185px; background-size:auto 812px; background-position:center -40px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-photo { min-height:clamp(270px,60vw,400px); }
  .hero-copy { padding:1.5rem 0 2rem; }
  .hero-copy h1 { max-width:9ch; }
  .destination-grid { grid-template-columns:1fr; }
  .destination-card { min-height:230px; background-size:cover; }
  .home-lower { grid-template-columns:1fr; }
  .millie-note { margin: .5rem 1rem; }
  .editorial-grid { grid-template-columns:1fr; }
  .category-overview { grid-template-columns:1fr; }
  .category-feature { min-height:0; }
  .favorites-grid,.boards-grid,.portfolio-grid { grid-template-columns:1fr; }
  .services { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .shell { width:min(100% - 1.4rem, 1140px); }
  .masthead { height:185px; }
  .archive-controls { grid-template-columns:1fr; }
  .archive-item { grid-template-columns:1fr; gap:.35rem; }
  .inquiry-form { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .footer-tag { letter-spacing:.12em; }
  .footer-meta { flex-direction:column; gap:.4rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }