/* READING — the redesign for legibility (branch redesign/reading).
 *
 * The list and the detail view were set as justified, dense blocks with
 * blue bold phrases through them. This sheet restyles both for reading:
 * left-aligned text, shorter lines, quieter colour, facts set apart.
 * Desktop rules are scoped to html:not(.mobile-device); phones keep the
 * layout mobile.css gives them unless a rule says otherwise.
 */

/* ---- 1. the project list: thumbnail, title, where, summary, chips -------- */
html:not(.mobile-device) .pub-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 16px; margin-bottom: 14px;
}
html:not(.mobile-device) .pub-card::after { content: none; }
/* The figure keeps the original portfolio's place and size (250 px, scaled
   by updateImageSizes with the panel, 150-350) and is shown whole: these are
   scientific figures. Only the text beside it got shorter. */
html:not(.mobile-device) .pub-image {
  float: none; margin: 0; width: 250px; max-width: 45%;
  aspect-ratio: 4 / 3; height: auto; min-height: 0 !important;
}
html:not(.mobile-device) .pub-image img { object-fit: contain; }
html:not(.mobile-device) .pub-content { flex: 1; min-width: 0; }
html:not(.mobile-device) .pub-header { margin-bottom: 4px; }
html:not(.mobile-device) .pub-title { color: #fff; }
/* the group heading above already names the institution */
html:not(.mobile-device) .pub-card .pub-inst { display: none; }
.pub-where {
  font-style: normal !important;
  color: #8fa6c8 !important;
  margin-top: 2px;
}
html:not(.mobile-device) .pub-desc {
  text-align: left;
  line-height: 1.5;
  color: #c9d6ec;
  margin: 4px 0 0;
}
.pub-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-top: 0 !important; padding-top: 0 !important; margin-top: 8px !important;
}
.pub-chips a {
  margin: 0 !important;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(158, 201, 255, .35);
  color: #cfe2ff; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.pub-chips a:hover { background: rgba(158, 201, 255, .14); border-color: var(--accent); }

/* ---- 2. the detail view: summary first, facts beside the text ---------- */
.detail-content { padding: 22px 26px 30px; }
.detail-title { color: #fff; margin-bottom: 8px; }
.detail-lead {
  font-size: calc(16.5px * var(--list-font-scale));
  line-height: 1.6; color: #eef3fc;
  max-width: 72ch; margin: 0 0 22px;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(200px, 32%) minmax(0, 1fr);
  gap: 30px; align-items: start;
}
.detail-facts { position: sticky; top: 12px; }
/* main.css floats this figure left of the text; here it heads the fact column */
.detail-image {
  float: none; max-width: 100%; margin: 0 0 14px;
}
.detail-image.about-image { max-width: 140px; }
.facts { margin: 0 0 14px; font-size: calc(13px * var(--list-font-scale)); }
.facts dt {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #8fa6c8; font-weight: 700; margin-top: 12px;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 3px 0 0; color: #e6eefb; line-height: 1.45; }
.detail-links { border-top: 0; padding-top: 0; }
.detail-links.pub-chips a {
  display: inline-block; padding: 4px 11px; background: none;
  border: 1px solid rgba(158, 201, 255, .4); border-radius: 999px;
  color: #cfe2ff; font-size: calc(12.5px * var(--list-font-scale)) !important;
}
.detail-links.pub-chips a:hover { transform: none; background: rgba(158, 201, 255, .14); }
.detail-main .detail-desc {
  /* justified, as asked; hyphenation (the page is lang="en") keeps the
     word spacing even instead of opening gaps on short lines */
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  line-height: 1.75; color: #c9d6ec; max-width: 70ch;
}
.detail-main .detail-desc strong { color: #fff; font-weight: 600; }
.detail-main .detail-subsection h4 { color: #fff; }

.mobile-device .detail-content { padding: 14px 12px 22px; }
.mobile-device .detail-grid { grid-template-columns: 1fr; gap: 14px; }
.mobile-device .detail-facts { position: static; }

/* ---- 3. the welcome card and the help button's pulse ------------------- */
.wel-backdrop {
  position: fixed; inset: 0; z-index: 7000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2, 5, 12, .62);
  opacity: 0; transition: opacity .3s ease;
}
.wel-backdrop.on { opacity: 1; }
.wel-card {
  position: relative; max-width: clamp(600px, 52vw, 760px); width: 100%;   /* grows on wide screens */
  max-height: 100%; overflow-y: auto;   /* a short phone scrolls the card instead of cutting off its top */
  padding: 26px 28px 22px;
  background: rgba(12, 23, 40, .97);
  border: 1px solid rgba(158, 201, 255, .45);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  color: #dbe7ff; font: 400 15px/1.6 Inter, system-ui, sans-serif;
  /* comes down from above, as a banner would */
  transform: translateY(-22px); transition: transform .35s ease;
}
.wel-backdrop.on .wel-card { transform: none; }
.wel-card h2 { margin: 0; font-size: 22px; color: #fff; }
.wel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.wel-photo {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid rgba(158, 201, 255, .55);
  box-shadow: 0 0 0 5px rgba(110, 163, 255, .12);
}
.wel-sub { margin-top: 3px; font-size: 13px; color: #8fa6c8; letter-spacing: .02em; }
.wel-tease { color: #ffd88f; font-style: italic; }
.wel-card:focus { outline: none; }
.wel-card p.wel-note { margin: 14px 0 0; font-size: 11px; line-height: 1.4; color: #6d84a6; text-align: left; }
.wel-card p a { color: #9ec9ff; text-decoration: underline; text-underline-offset: 2px; }
.wel-card p a:hover { color: #fff; }
.wel-card p { margin: 0 0 10px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* the map's yellow corner brackets, drawn in CSS so they stay crisp at any size */
.ret {
  --c: #ffff00; --l: 32%; --w: 2px;
  display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin: 0 2px;
  background:
    linear-gradient(var(--c) 0 0) top    left  / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) top    left  / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) top    right / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) top    right / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom left  / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) bottom left  / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--l);
  background-repeat: no-repeat;
}
.wel-x {
  position: absolute; top: 8px; right: 10px; width: 34px; height: 34px;
  background: none; border: 0; color: #8fa6c8; font-size: 22px; cursor: pointer;
}
.wel-x:hover { color: #fff; }
.wel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wel-actions button, .wel-actions a {
  font: 600 13px/1 Inter, system-ui, sans-serif;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(158, 201, 255, .4); background: none;
  color: #cfe2ff; text-decoration: none;
}
.wel-actions button:hover, .wel-actions a:hover { background: rgba(158, 201, 255, .14); }
.wel-actions .wel-go { background: var(--selected); border-color: var(--selected); color: #fff; }
.wel-actions .wel-go:hover { background: #82b1ff; }
.wel-actions :focus-visible, .wel-x:focus-visible { outline: 2px solid #9ec9ff; outline-offset: 2px; }
.mobile-device .wel-card { padding: 22px 18px 18px; font-size: 14px; }
.mobile-device .wel-card h2 { font-size: 19px; }

/* the help button pulses, same 2 s rhythm as the toolbar's glow, until used */
/* Until first used it is light blue, the selected-button blue, and pulses
   a yellow ring; the first click drops the class and it goes back to the
   quiet dark pill. */
.t3-replay.attn, .m-help.attn {
  background: var(--selected); border-color: #cfe2ff; color: #fff;
  animation: help-attn 2s ease-in-out infinite;
}
.t3-replay.attn svg, .m-help.attn svg { color: #fff; }
@keyframes help-attn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 127, 0), 0 4px 14px rgba(0, 0, 0, .4); }
  50% { border-color: #ffd27f;
        box-shadow: 0 0 0 5px rgba(255, 210, 127, .45), 0 0 24px 6px rgba(110, 163, 255, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .wel-backdrop, .wel-card { transition: none; }
  .t3-replay.attn, .m-help.attn { animation: none; border-color: #ffd27f; }
}

/* ---- 4. map buttons: full screen, reset layout (demo/layout.js) ---------- */
/* Top row, left of Object info (hover-info.css .obj-toggle, top 12 right 12,
   113 px wide), in the same pill style: one fixed place in every mode, above
   the VIPER mission readout (#missionHud, top 64). Reset panel sizes hangs
   under it. */
.map-layout {
  position: absolute; top: 12px; right: 133px; z-index: 62;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
/* a narrow panel (a project open at 26%) keeps the icon only, clear of
   How to explore on the left (layout.js sets .narrow) */
.map-layout.narrow .map-full span { display: none; }
.map-layout.narrow .map-full { padding: 0 8px; }
.map-btn {
  display: flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px 0 9px; border-radius: 999px;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  color: #cfe2ff; background: rgba(9, 16, 30, .88);
  border: 1px solid rgba(158, 201, 255, .3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px);
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.map-btn:hover { color: #fff; border-color: #9ec9ff; background: rgba(158, 201, 255, .18); }
.map-btn:focus-visible { outline: 2px solid #9ec9ff; outline-offset: 2px; }
.map-btn[hidden] { display: none; }
/* Reset panel sizes only shows once the divider has been moved: make it obvious */
.map-reset { color: #ffd27f; border-color: rgba(255, 210, 127, .55); }
.map-reset:hover { color: #fff; border-color: #ffd27f; background: rgba(255, 210, 127, .16); }
/* while driving, Reset panel sizes drops below the mission readout
   (64 + 143 px tall) instead of covering it; Full screen stays put */
.left:has(#missionHud.visible) .map-reset { margin-top: 179px; }

/* ---- 5. full screen: project card on hover, signature (layout.js) -------- */
.fs-card, .fs-sign { display: none; }
.left:fullscreen .fs-sign {
  display: block; position: absolute; left: 16px; bottom: 14px; z-index: 61;
  font: 400 12px/1.4 Inter, system-ui, sans-serif; letter-spacing: .02em;
  color: rgba(207, 226, 255, .62); pointer-events: none;
}
.left:fullscreen .fs-sign b { font-weight: 600; color: rgba(255, 255, 255, .8); }
.left:fullscreen .fs-card:not([hidden]) {
  display: flex; gap: 12px; align-items: flex-start;
  position: absolute; left: 0; top: 0; z-index: 70; width: 360px;
  padding: 10px; text-align: left; cursor: pointer;
  background: rgba(9, 16, 30, .9); border: 1px solid rgba(158, 201, 255, .35);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px); color: #dbe7ff;
  font: 400 12px/1.45 Inter, system-ui, sans-serif;
  transition: border-color .15s, opacity .3s;
}
.left:fullscreen .fs-card:hover { border-color: #ffd27f; }
/* ignored for 3 s while the pointer rests on the object (layout.js) */
.left:fullscreen .fs-card.fs-fade { opacity: 0; }
.fs-card img { width: 132px; height: 88px; object-fit: contain; flex: 0 0 auto; border-radius: 6px; background: #0b1424; }
.fs-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fs-txt b { font-size: 13px; line-height: 1.3; color: #fff; }
.fs-txt em { font-style: normal; font-weight: 600; color: #ffd27f; }