/* Content of the fictional sites inside the demo window. Scoped per site. */

/* Halden Review: white literary magazine with a green feature band */
.s-halden { font-family: var(--font-serif); color: #1b1b1b; background: #fff; }
.h-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid #ebe8e1;
  background: #fff;
}
.h-logo { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.h-top nav { display: flex; gap: 18px; font: 13px var(--font-ui); color: #6a675f; }
.h-article { background: #fff; padding: 34px 28px 6px; max-width: 620px; margin: 0 auto; }
.h-article p { font-size: 17px; line-height: 1.62; margin: 0 0 18px; }
.h-kicker { font: 600 12px var(--font-ui) !important; letter-spacing: 0.08em; text-transform: uppercase; color: #1e4d3a; margin-bottom: 10px !important; }
.h-article h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; }
.h-by { font: 13px var(--font-ui) !important; color: #75726b; margin-bottom: 26px !important; }
.h-feature {
  background: #1e4d3a;
  color: #f4efe6;
  padding: 72px 28px;
  margin: 26px 0 30px;
}
.h-feature blockquote {
  max-width: 560px;
  margin: 0 auto 14px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.h-feature p { max-width: 560px; margin: 0 auto; font: 13px var(--font-ui); color: #b9cbbf; }
.h-more { background: #f4efe6; padding: 40px 28px 48px; margin-top: 20px; }
.h-more h2 { max-width: 620px; margin: 0 auto 14px; font-size: 22px; font-weight: 600; }
.h-more ul { max-width: 620px; margin: 0 auto; padding: 0; list-style: none; }
.h-more li { padding: 12px 0; border-top: 1px solid #ddd5c6; font-size: 17px; }
.h-foot { background: #141414; color: #a19f99; padding: 30px 28px 80px; font: 13px var(--font-ui); }

/* Tidewright: docs with a dark left sidebar */
.s-tide { display: flex; min-height: 100%; font-family: var(--font-ui); }
.t-side {
  position: sticky;
  top: 0;
  flex: none;
  align-self: flex-start;
  width: 208px;
  height: 100%;
  min-height: var(--page-h, 600px);
  padding: 20px 18px;
  background: #1f2328;
  color: #c4cad1;
  font-size: 13px;
}
.t-brand { color: #f0f3f6; font-weight: 650; font-size: 15px; margin-bottom: 22px !important; }
.t-group { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #7d8590; margin: 16px 0 6px !important; }
.t-side ul { list-style: none; margin: 0; padding: 0; }
.t-side li { padding: 5px 8px; border-radius: 6px; margin: 0 -8px; }
.t-side li.on { background: #2d333b; color: #fff; }
.t-main { flex: 1; min-width: 0; background: #fff; color: #1f2328; padding: 26px 32px 60px; }
.t-crumb { font-size: 12px; color: #6e7781; margin-bottom: 8px !important; }
.t-main h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 12px; }
.t-main h2 { font-size: 19px; margin: 28px 0 8px; }
.t-main p { font-size: 15px; line-height: 1.6; color: #3d444d; margin: 0 0 12px; max-width: 34em; }
.t-main code { font: 13px var(--font-mono); background: #f2f3f5; padding: 1px 5px; border-radius: 4px; }
.t-main pre { margin: 16px 0; padding: 14px 16px; border-radius: 8px; background: #f6f8fa; border: 1px solid #e4e7eb; overflow: auto; }
.t-main pre code { background: none; padding: 0; line-height: 1.6; }
.t-note { margin: 18px 0; padding: 12px 14px; border-left: 3px solid #3e8fb0; background: #eef6f9; border-radius: 0 6px 6px 0; font-size: 14px; color: #2c4b57; }

/* Marrow: saturated coral studio site */
.s-marrow { font-family: var(--font-display); }
.m-hero { background: #f0643c; color: #1a1a1a; padding: 22px 28px 56px; }
.m-hero header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(56px, 10vh, 110px); }
.m-logo { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; }
.m-hero nav { display: flex; gap: 18px; font: 500 13px var(--font-ui); }
.m-hero h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 0.98; font-weight: 640; letter-spacing: -0.045em; max-width: 12em; margin: 0; }
.m-grid { background: #f0643c; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 28px 28px; }
.m-tile { aspect-ratio: 4 / 3; border-radius: 10px; position: relative; overflow: hidden; }
.m-tile span { position: absolute; left: 14px; bottom: 12px; font: 600 14px var(--font-ui); }
.m-a { background: #1a1a1a; color: #f0643c; }
.m-a::before { content: ""; position: absolute; inset: 22% 30%; border-radius: 50%; background: #f0643c; }
.m-b { background: #f6d7c4; color: #1a1a1a; }
.m-b::before { content: "O"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 min(18vw, 120px)/1 var(--font-display); color: #1a1a1a; }
.m-c { background: #274b5a; color: #f6d7c4; }
.m-c::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46%; height: 5px; background: #f6d7c4; box-shadow: 0 -18px 0 #f6d7c4, 0 18px 0 #f6d7c4; }
.m-d { background: #fff4ea; color: #1a1a1a; }
.m-d::before { content: "¶"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 min(16vw, 110px)/1 var(--font-serif); color: #f0643c; }
.m-dark { background: #1a1a1a; color: #f6d7c4; padding: 56px 28px 90px; }
.m-dark p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; max-width: 18em; }

/* Orrery: dark streaming site */
.s-orrery { background: #0e0e0f; color: #f2f2f2; min-height: 100%; font-family: var(--font-ui); padding-bottom: 40px; }
.o-hero { position: relative; height: clamp(300px, 58%, 420px); min-height: 300px; overflow: hidden; }
.o-art {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0e0e0f 0%, #1a1422 34%, #3a2230 62%, #6b3a33 78%, #0e0e0f 100%);
}
.o-sun {
  position: absolute;
  left: 64%;
  top: 58%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #ffd7a8 0 38%, #f3a26c 52%, rgba(243, 162, 108, 0) 71%);
}
.o-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  bottom: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255, 190, 140, 0.22) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #2b1a22, #0e0e0f 90%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent 10%, #000 45%, #000 80%, transparent);
}
.o-info { position: absolute; left: 28px; bottom: 26px; display: grid; gap: 6px; }
.o-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #f3b27a; }
.o-info h1 { font: 640 clamp(30px, 3.6vw, 44px)/1 var(--font-display); letter-spacing: -0.03em; margin: 0; }
.o-meta { font-size: 13px; color: #a19f9a; }
.o-play {
  justify-self: start;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #f2f2f2;
  color: #0e0e0f;
  font-size: 13px;
  font-weight: 600;
}
.o-row { padding: 22px 28px 4px; }
.o-row h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: #e6e6e6; }
.o-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.o-tiles i { aspect-ratio: 16 / 9; border-radius: 8px; }
.o-t1 { background: linear-gradient(135deg, #243b55, #141e30); }
.o-t2 { background: linear-gradient(135deg, #5a3f37, #2c3e50); }
.o-t3 { background: linear-gradient(135deg, #1f4037, #0e1f1a); }
.o-t4 { background: linear-gradient(135deg, #42275a, #1c1c28); }

@media (max-width: 560px) {
  .h-top nav, .m-hero nav { display: none; }
  .t-side { width: 132px; padding: 16px 12px; }
  .t-main { padding: 20px 18px 48px; }
  .o-tiles { grid-template-columns: repeat(2, 1fr); }
  .o-info { left: 18px; }
}