/*
  ============================================================
  Daily Portion · explanatory page
  House of Lyons dark catalogue language with Daily Portion's
  paper surface carried inside the device previews.
  ============================================================
*/

:root{
  --ink:#070605;
  --room:#0D0B09;
  --panel:#141109;
  --bone:#EDE6D6;
  --bone-dim:#C9C1AE;
  --muted:#857E6D;
  --gold:#B8973A;
  --gold-light:#D4B25A;
  --hairline:rgba(184,151,58,0.24);
  --hairline-dim:rgba(184,151,58,0.13);
  --display:'Cormorant Garamond', Georgia, serif;
  --caps:'Cormorant SC', Georgia, serif;
  --utility:'Lato', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--ink); color-scheme:dark; }
body{
  overflow-x:clip;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:rgba(184,151,58,0.35); color:var(--bone); }
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:4px; }
.skip-link{
  position:fixed;
  z-index:100;
  top:0.75rem;
  left:0.75rem;
  padding:0.7rem 1rem;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--utility);
  font-size:0.78rem;
  text-decoration:none;
  transform:translateY(-180%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:none; }

.page-nav{
  position:sticky;
  z-index:50;
  top:0;
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.7rem clamp(1rem, 5vw, 4rem);
  border-bottom:1px solid var(--hairline-dim);
  background:rgba(7,6,5,0.94);
  backdrop-filter:blur(10px);
}
.signature img{
  width:116px;
  opacity:0.78;
  filter:invert(1) hue-rotate(180deg);
  mix-blend-mode:screen;
}
.page-nav-actions{ display:flex; align-items:center; gap:1.3rem; }
.page-nav-actions a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--bone-dim);
  font-family:var(--caps);
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-decoration:none;
}
.page-nav-actions .open-small{ color:var(--gold); }

.daily-hero{
  min-height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(270px, 0.62fr);
  gap:clamp(3rem, 8vw, 8rem);
  align-items:center;
  padding:clamp(5rem, 12vh, 9rem) clamp(1.5rem, 8vw, 8rem);
  background:
    radial-gradient(ellipse 65% 75% at 80% 44%, rgba(184,151,58,0.11), transparent 62%),
    var(--ink);
}
.eyebrow,
.room-name,
.platform{
  color:var(--gold);
  font-family:var(--utility);
  font-size:0.64rem;
  font-weight:400;
  letter-spacing:0.32em;
  text-transform:uppercase;
}
.daily-hero h1{
  margin-top:1rem;
  color:#FBF7EC;
  font-size:clamp(4rem, 9vw, 8rem);
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:0.86;
}
.daily-hero h1 span{ color:var(--gold); }
.hero-line{
  margin-top:1.5rem;
  color:var(--bone);
  font-size:clamp(1.65rem, 3vw, 2.5rem);
  font-style:italic;
  font-weight:300;
}
.hero-lede{
  max-width:34em;
  margin-top:1.5rem;
  color:var(--bone-dim);
  font-size:clamp(1.08rem, 1.5vw, 1.28rem);
  font-weight:300;
  line-height:1.8;
}
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2.2rem; }
.primary-action,
.quiet-action{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  font-family:var(--caps);
  font-size:0.78rem;
  letter-spacing:0.2em;
  text-decoration:none;
}
.primary-action{ padding:0.9rem 1.5rem; background:var(--gold); color:var(--ink); }
.primary-action:hover{ background:var(--gold-light); }
.quiet-action{ color:var(--gold); border-bottom:1px solid var(--hairline); }
.local-note{
  margin-top:1.35rem;
  color:var(--muted);
  font-family:var(--utility);
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.hero-screen,
.walk-screen{
  width:min(100%, 350px);
  justify-self:center;
  padding:0.9rem;
  border:1px solid var(--hairline);
  background:linear-gradient(145deg, rgba(184,151,58,0.11), transparent 44%);
}
.hero-screen img,
.walk-screen img{
  width:100%;
  aspect-ratio:1 / 2;
  object-fit:cover;
  object-position:top;
  box-shadow:0 2.4rem 6rem rgba(0,0,0,0.6);
}

.page-section{
  position:relative;
  padding:clamp(5rem, 12vh, 9rem) clamp(1.5rem, 8vw, 8rem);
  border-top:1px solid var(--hairline-dim);
}
.page-section:nth-of-type(odd){ background:var(--room); }
.section-number{
  margin-bottom:1rem;
  color:var(--gold);
  font-size:1rem;
  font-weight:300;
  opacity:0.75;
}
.page-section h2,
.closing h2{
  max-width:18em;
  margin-top:1rem;
  color:var(--bone);
  font-size:clamp(2.3rem, 5vw, 4rem);
  font-weight:400;
  line-height:1.05;
}
.room-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:1px;
  margin-top:clamp(3rem, 7vh, 5rem);
  background:var(--hairline-dim);
  border:1px solid var(--hairline-dim);
}
.room-grid article{ padding:clamp(1.4rem, 3vw, 2.5rem); background:var(--ink); }
.room-grid h3{
  margin-top:1rem;
  color:var(--bone);
  font-size:clamp(1.35rem, 2vw, 1.8rem);
  font-weight:400;
  line-height:1.2;
}
.room-grid article > p:last-child{
  margin-top:1rem;
  color:var(--bone-dim);
  font-size:1rem;
  font-weight:300;
  line-height:1.7;
}
.walk{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(250px, 0.6fr);
  gap:clamp(3rem, 9vw, 9rem);
  align-items:center;
}
.walk-copy > p:not(.section-number):not(.eyebrow),
.privacy-copy p,
.install-lede,
.closing > p:not(.eyebrow){
  max-width:35em;
  margin-top:1.5rem;
  color:var(--bone-dim);
  font-size:clamp(1.05rem, 1.45vw, 1.23rem);
  font-weight:300;
  line-height:1.8;
}
.walk-copy ul{ margin:1.5rem 0 0 1.2rem; color:var(--bone-dim); }
.walk-copy li{ margin-top:0.65rem; padding-left:0.4rem; line-height:1.6; }
.privacy{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(3rem, 8vw, 8rem); }
.privacy-copy a{
  display:inline-block;
  margin-top:1.5rem;
  color:var(--gold);
  font-family:var(--caps);
  font-size:0.76rem;
  letter-spacing:0.18em;
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
.screens{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(1.2rem, 4vw, 3rem); margin-top:3.5rem; }
.screens figure{ padding:0.7rem; border:1px solid var(--hairline); background:var(--panel); }
.screens img{ width:100%; aspect-ratio:1 / 2; object-fit:cover; object-position:top; }
.screens figcaption{
  padding:1rem 0.35rem 0.4rem;
  color:var(--bone-dim);
  font-size:0.98rem;
  font-style:italic;
  line-height:1.5;
}
.install{ scroll-margin-top:64px; }
.install-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.4rem; margin-top:3rem; }
.install-grid article{ padding:clamp(1.5rem, 3vw, 2.5rem); border:1px solid var(--hairline); background:var(--panel); }
.install-grid ol{ margin:1.3rem 0 0 1.2rem; color:var(--bone-dim); }
.install-grid li{ margin-top:0.75rem; padding-left:0.4rem; line-height:1.65; }
.closing{
  display:grid;
  justify-items:center;
  padding:clamp(5rem, 14vh, 10rem) 1.5rem;
  border-top:1px solid var(--hairline-dim);
  background:radial-gradient(ellipse 55% 85% at 50% 50%, rgba(184,151,58,0.08), transparent 70%), var(--ink);
  text-align:center;
}
.closing h2{ margin-right:auto; margin-left:auto; }
.closing .primary-action{ margin-top:2rem; }
footer{
  padding:3.5rem 1.5rem;
  border-top:1px solid var(--hairline-dim);
  color:var(--muted);
  font-family:var(--utility);
  font-size:0.62rem;
  letter-spacing:0.14em;
  line-height:2;
  text-align:center;
  text-transform:uppercase;
}
footer a{ color:var(--bone-dim); }

@media (max-width:1020px){
  .room-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .room-grid article:last-child{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .page-nav-actions > a:first-child{ display:none; }
  .daily-hero,
  .walk,
  .privacy{ grid-template-columns:1fr; }
  .hero-copy{ text-align:center; }
  .hero-lede,
  .hero-actions{ margin-right:auto; margin-left:auto; justify-content:center; }
  .daily-hero h1{ font-size:clamp(3.5rem, 17vw, 6rem); }
  .hero-screen{ width:min(78vw, 330px); }
  .walk-screen{ width:min(76vw, 310px); }
  .screens{ grid-template-columns:1fr; max-width:22rem; margin-right:auto; margin-left:auto; }
  .install-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .room-grid{ grid-template-columns:1fr; }
  .room-grid article:last-child{ grid-column:auto; }
  .hero-actions{ align-items:stretch; flex-direction:column; }
  .quiet-action{ align-self:center; }
  .local-note{ line-height:1.7; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; }
}