/* ACME Book Company — v3. Palette from the owl logo; each book band wears its own world. */
:root{
  --paper:#ffffff;
  --sky:#e9f6fd;
  --ink:#10283a;
  --ink-2:#4a6070;
  --cyan:#1aa7e8;
  --cyan-ink:#0a6fa3;
  --lime:#9fd84f;
  --night:#0b1726;
  --night-2:#13243a;
  --frost:#dbe8f5;
  --ember:#e5562b;
  --soot:#120f12;
  --display:"Futura","Century Gothic","Avenir Next","Avenir","URW Gothic","Trebuchet MS",sans-serif;
  --text:"Charter","Bitstream Charter","Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.7 var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-ink)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em}

/* masthead */
.masthead{background:var(--paper);border-bottom:1px solid #e3edf3}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:130px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand img{width:clamp(190px,20vw,250px)}
.masthead nav{display:flex;gap:4px 24px;flex-wrap:wrap;font-family:var(--display);font-size:1.08rem}
.masthead nav a{color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.masthead nav a:hover{border-bottom-color:var(--lime)}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:.98rem;text-decoration:none;padding:12px 20px;border-radius:999px;background:var(--cyan);color:#fff;border:2px solid var(--cyan);line-height:1.2;margin:4px 6px 4px 0}
.btn:hover{background:var(--cyan-ink);border-color:var(--cyan-ink)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-quiet:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-light{background:#fff;color:var(--night);border-color:#fff}
.btn-light:hover{background:var(--frost);border-color:var(--frost)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-ember{background:var(--ember);border-color:var(--ember);color:#fff}
.btn-ember:hover{background:#c4421c;border-color:#c4421c}

/* hero: the owl's eyes hold the two books */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--sky) 100%);padding:clamp(48px,8vw,96px) 0 clamp(56px,8vw,104px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.lede{font-size:1.18rem;color:var(--ink-2);max-width:34em;margin:22px 0 26px}
.eyes{display:flex;justify-content:center;gap:clamp(4px,.8vw,10px);position:relative}
.eye{position:relative;width:clamp(150px,23vw,272px);aspect-ratio:1;border-radius:50%;border:clamp(12px,1.6vw,18px) solid var(--lime);background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 18px 40px rgba(16,40,58,.16)}
.eye img{width:58%;border-radius:3px;box-shadow:0 10px 24px rgba(16,40,58,.35)}
.eye-l img{transform:rotate(-6deg)}
.eye-r img{transform:rotate(5deg)}
@media (prefers-reduced-motion:no-preference){
  .eye{animation:blink 5.5s .9s 1 both}
  @keyframes blink{0%,6%,100%{transform:scaleY(1)}3%{transform:scaleY(.08)}}
}

/* book worlds */
.world{padding:clamp(56px,8vw,104px) 0}
.world-2059{background:radial-gradient(120% 80% at 85% 0%,#1d3a5c 0%,var(--night) 55%);color:var(--frost)}
.world-conops{background:radial-gradient(110% 80% at 10% 100%,#3a1410 0%,var(--soot) 60%);color:#efe6e1}
.feature{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.cover{margin:0}
.cover img{border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.kicker{font-family:var(--display);font-size:1rem;margin:0 0 10px;opacity:.8}
.feature h2{font-size:clamp(2rem,4.2vw,3.2rem);color:#fff}
.hook{font-size:1.32rem;line-height:1.45;color:#fff;margin:18px 0 18px;max-width:30em}
.feature-body>p{max-width:38em}
.world-2059 .hook{border-left:4px solid var(--cyan);padding-left:16px}
.world-conops .hook{border-left:4px solid var(--ember);padding-left:16px}

.editions{margin:26px 0 22px;padding:0;max-width:38em}
.editions div{display:grid;grid-template-columns:13em 1fr;gap:4px 18px;padding:12px 0;border-top:1px solid rgba(219,232,245,.18)}
.editions div:last-child{border-bottom:1px solid rgba(219,232,245,.18)}
.editions dt{font-family:var(--display);font-weight:600;color:#fff}
.editions dd{margin:0}
.tag{display:inline-block;margin-left:8px;font-family:var(--display);font-size:.8rem;font-weight:600;background:var(--lime);color:var(--ink);padding:2px 9px;border-radius:999px;vertical-align:2px}
.actions{margin-top:8px}

.opening{margin:clamp(48px,7vw,80px) auto 0;max-width:760px;text-align:center}
.opening blockquote{margin:0;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.6;color:#fff}
.opening blockquote p{margin:0 0 .7em}
.opening blockquote p:first-child{font-size:1.5em;font-style:italic}
.opening blockquote p:last-child{font-family:var(--display);font-weight:600;color:var(--cyan);margin:0}
.opening figcaption{margin-top:14px;font-family:var(--display);font-size:.95rem;opacity:.7}

.network{margin-top:clamp(48px,7vw,80px)}
.network h3{font-size:1.5rem;color:#fff;margin-bottom:18px}
.network ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(219,232,245,.12);border:2px solid rgba(219,232,245,.12)}
.network a{display:block;height:100%;padding:18px 20px;background:var(--night);color:var(--frost);text-decoration:none}
.network a:hover{background:var(--night-2)}
.network b{display:block;font-family:var(--display);font-size:1.12rem;color:#fff;margin-bottom:4px}
.network span{font-size:.97rem;line-height:1.5}

.shelf{list-style:none;margin:26px 0 22px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:700px}
.shelf li{position:relative;min-height:168px;padding:14px 12px;border-radius:3px 6px 6px 3px;background:linear-gradient(90deg,#2a1714 0 8px,#231a1d 8px);border:1px solid rgba(239,230,225,.14);display:flex;flex-direction:column;gap:6px}
.shelf li.out{background:linear-gradient(90deg,var(--ember) 0 8px,#2c1a17 8px);border-color:rgba(229,86,43,.5)}
.shelf li.later{background:transparent;border-style:dashed}
.shelf .n{font-family:var(--display);font-weight:700;font-size:1.6rem;color:#fff;line-height:1}
.shelf .t{font-family:var(--display);font-weight:600;color:#fff;line-height:1.2}
.shelf .s{margin-top:auto;font-size:.85rem;line-height:1.3;opacity:.85}
.shelf li a{position:absolute;inset:0;border-radius:inherit}
.shelf li a:hover{box-shadow:inset 0 0 0 2px var(--ember)}

/* calendar */
.calendar{padding:clamp(56px,8vw,96px) 0;background:var(--sky)}
.calendar h2,.authors h2,.imprint h2,.contact h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:28px}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:15px;height:4px;background:var(--lime);border-radius:4px}
.timeline li{position:relative;padding:44px 16px 0 0}
.timeline li::before{content:"";position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid var(--cyan)}
.timeline time{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem}
.timeline p{margin:6px 0 0;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.timeline b{color:var(--ink)}

/* authors */
.authors{padding:clamp(56px,8vw,96px) 0}
.author-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.author h3{font-size:1.6rem;margin-bottom:12px}
.author p{margin:0 0 12px;max-width:34em}
.author-links a{font-family:var(--display);font-weight:600;margin-right:18px}

/* imprint */
.imprint{padding:clamp(56px,8vw,96px) 0;border-top:1px solid #e3edf3}
.imprint-grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,64px)}
.imprint-body p{margin:0 0 18px;max-width:36em}
.imprint-body b{font-family:var(--display)}

/* contact */
.contact{padding:clamp(56px,8vw,96px) 0;background:var(--ink);color:#e7f1f7}
.contact h2{color:#fff}
.contact a{color:#8fd6ff}
.contacts{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.contacts dt{font-family:var(--display);font-weight:600;color:#fff;margin-bottom:6px}
.contacts dd{margin:0}

/* footer */
.foot{padding:48px 0 28px;font-size:.95rem;color:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot-logo{width:170px;margin-bottom:14px}
.foot h2{font-size:1rem;color:var(--ink);margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 6px}
.foot p{margin:0;max-width:30em}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid #e3edf3;font-size:.85rem}

/* responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .eyes{order:-1}
  .feature{grid-template-columns:1fr}
  .cover{max-width:260px}
  .timeline{grid-template-columns:1fr;gap:22px}
  .timeline::before{left:9px;right:auto;top:0;bottom:0;width:4px;height:auto}
  .timeline li{padding:0 0 0 40px}
  .timeline li::before{top:2px}
  .author-grid,.imprint-grid,.contacts,.foot-grid{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .network ul{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .editions div{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf li{min-height:132px}
  .network ul{grid-template-columns:1fr}
}

/* ConOps21 covers (Oct 11 rev.) */
.cover-pair{position:relative;padding:0 12% 10% 0}
.cover-pair .back{position:absolute;right:0;top:9%;width:82%;transform:rotate(4deg);opacity:.92}
.cover-pair .front{position:relative;width:88%;transform:rotate(-2deg)}
.sub-hook{margin:-6px 0 16px;color:#7fe0c4;font-size:1.05rem}
.sub-hook i{font-style:italic}
.shelf li{aspect-ratio:2/3;min-height:0;width:100%;align-self:start}
.shelf li.has-cover{padding:0;overflow:hidden;background:#000;border:0;box-shadow:0 10px 22px rgba(0,0,0,.5)}
.shelf li.has-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shelf li.has-cover .n,.shelf li.has-cover .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.shelf li.has-cover .s{position:absolute;left:6px;right:6px;bottom:6px;margin:0;text-align:center;font-family:var(--display);font-size:.78rem;font-weight:700;color:#fff;background:var(--ember);border-radius:999px;padding:3px 6px;opacity:1}
.shelf .t{font-size:.9rem;hyphens:auto;-webkit-hyphens:auto}
.shelf li{padding-left:14px;padding-right:8px}
@media (max-width:640px){.bar{min-height:0;padding-top:16px;padding-bottom:6px}.masthead nav{width:100%;justify-content:space-between}}