/* OpenClinicalHistory — layout
   Page-level structure: hero, interior headers, section frame,
   and the editorial grids the pages are built on. */

/* ---- home hero ---- */
.hero{position:relative; padding:88px 0 72px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1fr 1.02fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,60px); line-height:1.02; margin:0 0 22px}
.hero .lead{font-size:clamp(17px,2vw,20px); color:var(--bone); max-width:34ch; margin:0 0 30px}
.hero-note{font-size:14px; color:var(--bone-dim); max-width:40ch}
.hero-fig{position:relative; justify-self:center}
.hero-fig img{position:relative; z-index:2; width:min(360px,82vw); height:auto; display:block;
  filter:drop-shadow(0 0 50px rgba(120,150,200,.10));
  -webkit-mask-image:radial-gradient(95% 98% at 50% 50%, #000 80%, transparent 100%);
  mask-image:radial-gradient(95% 98% at 50% 50%, #000 80%, transparent 100%)}

/* Overview video in place of the anatomical figure. */
.hero-video{position:relative; z-index:2}

.hero-video video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

.hero-video .video-frame{box-shadow:0 30px 70px -34px rgba(0,0,0,.95), 0 0 0 1px var(--line)}
.hero-video::before{content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:120%; height:120%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,158,46,.16), rgba(120,150,200,.06) 55%, transparent 74%);
  filter:blur(22px)}
/* Overview video in place of the anatomical figure. */
.hero-video{position:relative; z-index:2; cursor:pointer; transition:transform 0.2s ease}
.hero-video:hover{transform:scale(1.02)} /* Gives a nice little hover effect */

.hero-video video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 6px; /* Optional: smooths the corners */
}

/* ---- Lightbox Modal for Video ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(4, 6, 12, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-content {
  position: relative;
  width: 90%;
  max-width: 1280px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  border-radius: 8px;
}
.lightbox-content video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.close-btn {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--bone);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.close-btn:hover {
  color: #fff;
}

.video-cap{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em;
  color:var(--bone-dim); margin:14px 0 0}
.hero-fig::before{content:""; position:absolute; z-index:1; left:50%; top:44%;
  width:300px; height:300px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,158,46,.16), rgba(120,150,200,.06) 50%, transparent 72%);
  filter:blur(10px); animation:pulse 6.5s ease-in-out infinite}

@keyframes pulse{0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(1)}50%{opacity:.95; transform:translate(-50%,-50%) scale(1.05)}}
.hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 72% 30%, rgba(80,110,170,.14), transparent 60%)}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:28px}
  .hero-fig{order:-1}
  .hero-video{order:2}
  .hero .lead{max-width:none}
}
@media(max-width:620px){.hero{padding:56px 0 52px}}

/* ---- interior page header ---- */
.page-head{position:relative; padding:74px 0 8px; overflow:hidden}
.page-head::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 70% at 20% 0%, rgba(255,158,46,.07), transparent 62%)}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{font-size:clamp(32px,5vw,54px); line-height:1.04; margin:0 0 20px; max-width:19ch}
.page-head .lead{font-size:clamp(17px,2vw,20px); max-width:56ch; margin:0}
@media(max-width:620px){.page-head{padding:52px 0 8px}}

/* ---- section frame ---- */
.section{padding:78px 0; border-top:1px solid var(--line)}
.section.tight{padding:56px 0}
.sec-eyebrow{margin-bottom:16px}
.section h2{font-size:clamp(26px,3.6vw,40px); line-height:1.08; margin:0 0 22px; max-width:20ch}
.intro-copy{font-size:18px; color:var(--bone); max-width:52ch}
@media(max-width:620px){.section{padding:56px 0} .section.tight{padding:44px 0}}

/* ---- editorial prose ---- */
.prose{font-family:"Newsreader",Georgia,serif; font-size:clamp(19px,2.3vw,23px);
  line-height:1.62; color:#d7deea; max-width:36ch}
.prose p{margin:0 0 24px}
.prose .roll{color:var(--bone-bright)}
.story{background:linear-gradient(180deg, #070a11, #05060a)}
.story h2{font-family:"Newsreader",Georgia,serif; font-weight:500; font-style:italic; font-size:clamp(30px,4.4vw,46px)}
.consent{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.04em;
  color:var(--bone-dim); margin:6px 0 0; border-left:2px solid var(--amber-deep);
  padding-left:14px; max-width:44ch}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media(max-width:860px){.story-grid{grid-template-columns:1fr; gap:20px} .prose{max-width:none}}

/* ---- thesis ---- */
.thesis{background:linear-gradient(180deg,#06080e,#080b12)}
.thesis h2{max-width:18ch; font-size:clamp(24px,3.1vw,34px)}
.thesis .big{font-family:"Space Grotesk",sans-serif; font-size:clamp(19px,2vw,24px);
  color:var(--bone-bright); line-height:1.35; max-width:34ch; margin:24px 0 0; font-weight:500}
.thesis .big em{font-style:normal; color:var(--amber)}
.thesis-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.thesis .body p{max-width:50ch; margin:0 0 20px; color:var(--bone)}
@media(max-width:860px){.thesis-grid{grid-template-columns:1fr; gap:8px}}

/* ---- two-up info blocks ---- */
.os h2{max-width:14ch}
.os-copy{font-size:18px; color:var(--bone); max-width:56ch; margin-bottom:30px}
.os-two{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:34px}
@media(max-width:720px){.os-two{grid-template-columns:1fr}}

/* ---- is / isn't ---- */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px}
@media(max-width:720px){.cols{grid-template-columns:1fr}}

/* ---- record vs person ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px}
@media(max-width:720px){.split{grid-template-columns:1fr}}

/* ---- bio ---- */
.bio-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start}
.bio-grid p{max-width:56ch}
@media(max-width:860px){.bio-grid{grid-template-columns:1fr; gap:24px}}

/* ---- next-page link ---- */
.next{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:14px; padding:24px 26px; background:var(--film); margin-top:14px}
.next .t{font-family:"Space Grotesk",sans-serif; font-size:19px; color:var(--bone-bright); margin:0 0 4px}
.next p{margin:0; font-size:15px; color:var(--bone-dim)}

/* ---- architecture diagrams (scroll sideways rather than shrink) ---- */
.diagram{margin:0 0 48px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.diagram svg{display:block; width:100%; min-width:680px; height:auto}
.diagram figcaption{font-size:14.5px; color:var(--bone-dim); margin-top:16px; max-width:70ch; min-width:680px}
@media(max-width:760px){
  .diagram{margin-right:-28px; padding-right:28px}
  .diagram figcaption{min-width:0; width:calc(100vw - 56px)}
}