/* BarCamp BL 0x07: terminal theme. Accent is a temporary chrome until the 0x07 color is picked. */
:root {
  --bg: #1c2024; --panel: #252a30; --line: #363d45; --fg: #dde2e6; --dim: #8d98a1;
  --accent: #c9d0d6; --ok: #3fdc6e; --wt: #f5c400; --no: #ff4d4d; --gut: clamp(16px, 3vw, 40px);
  --chrome: linear-gradient(180deg, #fff 0%, #e6eaee 38%, #7d8791 52%, #b9c1c8 62%, #f4f6f8 100%);
}
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.65 "JetBrains Mono", ui-monospace, monospace; }
a { color: var(--accent); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--gut); }

/* top bar = GNU screen window list (hardstatus) */
nav { position: sticky; top: 0; z-index: 1001; background: #2a3037; border-bottom: 1px solid var(--line); }
nav .wrap { display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
nav a { padding: 8px 12px; text-decoration: none; color: var(--dim); font-size: 13px; }
nav a.on { background: var(--ok); color: #000; font-weight: 700; }
/* the "*" marks the active window; its space is reserved on every tab so nothing shifts */
nav a::after { content: "*"; visibility: hidden; }
nav a.on::after { visibility: visible; }
nav .clock { margin-left: auto; padding: 8px 12px; color: var(--dim); font-size: 13px; }

/* the heatmap spans exactly from the prompt line to the bottom of the make log */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: stretch; padding: 56px 0 24px; }
.hero h1 { margin: 0; font-size: clamp(54px, 8.5vw, 150px); line-height: 1.02; font-weight: 800;
           letter-spacing: -.04em; background: var(--chrome); -webkit-background-clip: text;
           background-clip: text; -webkit-text-fill-color: transparent; }
/* logo shader (javascripts/logo.js) draws over the heading; without it, the CSS heading shows */
.hero .mark { position: relative; }
.hero .mark canvas { position: absolute; inset: 0; width: 100%; display: block; pointer-events: none;
                     opacity: 0; transition: opacity .4s ease; }
.hero .mark.shaded canvas { opacity: 1; }
.hero .mark.shaded h1 { opacity: 0; transition: opacity .4s ease; }
.hero .sub { font-size: clamp(16px, 1.6vw, 22px); margin: 18px 0 28px; }
.hero .sub b { color: var(--wt); }
.hero .eta { white-space: nowrap; }
/* a phrase that moves to the next line as a whole, and only wraps inside if it can't fit on a line alone */
.hero .nw { display: inline-block; text-indent: 0; }
.hero > *, .info > * { min-width: 0; }
.hero figure { margin: 0; position: relative; height: 100%; aspect-ratio: 1080 / 1350; }
.hero figure > a { display: block; height: 100%; }   /* the link covers the image (it opens the lightbox) */
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 6px;
            border: 1px solid var(--line); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--accent); text-decoration: none;
       font-weight: 700; }
.btn.primary { background: var(--accent); color: #000; }

pre.term { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px;
           overflow-x: auto; font-size: 14px; margin: 0; }
/* the hero log reflows like a real terminal: by its own width in columns, not by the viewport. When the
   longest line (56 columns) doesn't fit, each line becomes status | key | value, the dot leaders are cut
   to the key column and a long value wraps under itself, so nothing scrolls sideways */
.hero .term { container: log / inline-size; }
@container log (width < 56ch) {
  .ln { display: grid; grid-template-columns: 6ch 13ch minmax(0, 1fr); column-gap: 1ch; }
  .ln .k { overflow: hidden; }
  .ln .v { white-space: pre-wrap; }
  .c { display: block; white-space: pre-wrap; padding-left: 2ch; text-indent: -2ch; }
}
.p { color: var(--accent); } .ok { color: var(--ok); } .wt { color: var(--wt); } .no { color: var(--no); }
.dim { color: var(--dim); }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--fg);
          animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

section { padding: 56px 0 8px; }
h2 { font-size: 15px; font-weight: 700; color: var(--dim); margin: 0 0 20px; }
h2 b { color: var(--fg); }
h2::before { content: "## "; color: var(--accent); }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about p { margin: 0; font-size: 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
         border: 1px solid var(--line); }
.stats div { background: var(--bg); padding: 18px; }
.stats b { display: block; font-size: 34px; color: var(--accent); line-height: 1.1; }
.stats span { color: var(--dim); font-size: 12px; }

/* program + location side by side */
.info { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }

.loc { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.loc .bar { padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 12px; }
#map { height: 300px; background: #1a1e22; }
/* dark map: invert OSM tiles and desaturate them */
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(.7) brightness(.8) contrast(1.1); }
.leaflet-container { font: 12px "JetBrains Mono", monospace; }
.leaflet-control-attribution { background: rgba(28, 32, 36, .85) !important; color: var(--dim); }
.leaflet-bar a { background: var(--panel); color: var(--fg); border-color: var(--line); }
.ring-tag span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 700;
                 color: var(--wt); background: #1c2024; border: 1px solid var(--wt); padding: 1px 6px; }
.loc pre { margin: 0; padding: 14px 16px; font: inherit; font-size: 13px; white-space: pre-wrap; }

/* 0x07 lineup: one terminal window per talk */
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.tc { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
      display: flex; flex-direction: column; }
.tc .bar { padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 12px;
           display: flex; align-items: center; gap: 5px; }
.tc .body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tc .who { display: flex; gap: 12px; align-items: center; }
.tc .who .nm { font-weight: 700; font-size: 16px; }
.tc .who a { font-size: 13px; }
.tc .ttl { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--fg); }
.tc .ttl::before { content: "$ cat README\A"; white-space: pre; font-size: 12px; font-weight: 400; color: var(--dim); }
.tc .desc { color: #aeb7bf; font-size: 13px; margin: 0; }
.tc .desc::before { content: "# "; color: var(--dim); }
.tc .foot { margin-top: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.tc .ttl a { color: inherit; }

.av { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: #1a1d21;
      border: 1px solid var(--line); color: var(--accent); font-weight: 800; }
.chip { font-size: 10px; padding: 0 5px; border: 1px solid; border-radius: 3px; }

/* archive = git log as an accordion: each commit opens its talk list and photos */
.log { font-size: 14px; }
.log details { border-left: 2px solid var(--line); padding: 0 0 16px 20px; position: relative; scroll-margin-top: 48px; }
.log details::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px;
                       border-radius: 50%; background: var(--c); }
.log summary { list-style: none; cursor: pointer; position: relative; padding-right: 72px; }
.log summary::-webkit-details-marker { display: none; }
.log summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.log details[open] .hash { text-decoration: underline; }
.log details[open] > summary::after { content: "◀ HEAD"; position: absolute; right: 0; top: 0; color: var(--ok); font-size: 12px; }
.log .hash { color: var(--wt); }
.log .tag { color: var(--c); border: 1px solid var(--c); padding: 0 6px; border-radius: 3px; font-size: 12px; }
.log .show { margin-top: 12px; font-size: 15px; }
.show { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px 22px; }
.show .cmd { color: var(--dim); margin-bottom: 10px; }
.show ol { margin: 0; padding-left: 26px; columns: 2; column-gap: 36px; }
.show li { break-inside: avoid; margin-bottom: 6px; }
.show li.x { color: var(--dim); text-decoration: line-through; }
/* photos per edition (images/foto/<edition>/), empty frames until they're in */
.show .pics-cmd { margin: 22px 0 10px; }
.pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pics > * { aspect-ratio: 4 / 3; border: 1px dashed var(--line); border-radius: 4px; overflow: hidden; }
.pics img { width: 100%; height: 100%; object-fit: cover; display: block; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }
.box h3 { margin: 0 0 8px; font-size: 16px; color: var(--accent); }
.box p { margin: 0 0 14px; color: #aeb7bf; }

/* lightbox (<dialog>) for the heatmap and archive photos */
a.zoom { cursor: zoom-in; }
dialog.lightbox { padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
                  max-width: 96vw; max-height: 96vh; overflow: hidden; cursor: zoom-out; }
dialog.lightbox::backdrop { background: rgba(12, 14, 16, .88); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 96vh; width: auto; height: auto; }
dialog.lightbox form { position: absolute; top: 8px; right: 8px; margin: 0; }
dialog.lightbox button { font: inherit; font-size: 12px; color: var(--fg); background: rgba(28, 32, 36, .85);
                         border: 1px solid var(--line); padding: 4px 8px; cursor: pointer; }
body:has(dialog[open]) { overflow: hidden; }

footer { margin-top: 72px; border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--dim); font-size: 12px; }

/* hover only where there is a real pointer: touch screens keep :hover on the last tapped element */
@media (hover: hover) {
  nav a:not(.on):hover { color: var(--fg); background: var(--line); }
  .btn:hover { filter: brightness(1.2); }
  .tc:hover { border-color: var(--accent); }
  .log summary:hover .hash { text-decoration: underline; }
  .hero .mark.shaded { cursor: crosshair; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero figure { height: auto; aspect-ratio: auto; max-width: 560px; width: 100%; justify-self: center; }
  .hero img { position: static; height: auto; }
  .info, .about { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero, .two { grid-template-columns: 1fr; }
  .hero { gap: 28px; padding-top: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .show ol { columns: 1; }
  pre.term { font-size: 11.5px; }
  /* phone hero: one left rail (the gutter) for every block, one inner rail 16px in for the text of the
     buttons and the log; date + time on one line, place + countdown on the next */
  .hero .sub { margin: 16px 0 24px; }
  .hero .sub .g { display: block; }
  .hero .sub .sep { display: none; }
  .hero .btns { display: grid; gap: 10px; margin-bottom: 24px; }
  .hero .btn { padding: 11px 15px; }
  .hero pre.term { font-size: 12px; padding: 14px 15px; }
  /* the lockup is two lines of 7 monospace cells: on phones it spans the full measure,
     so its right edge lines up with the buttons and the log (7 x (.6em - .04em) = 3.92em) */
  .hero .mark { container-type: inline-size; overflow-x: clip; }
  .hero h1 { font-size: min(100cqi / 3.92, 132px); white-space: nowrap;
             -webkit-text-size-adjust: none; text-size-adjust: none; }   /* a logo, not body text */
  #map { height: 240px; }
  /* phones: short window list, no "*" (the green block marks the active tab) */
  nav .clock, nav .n, nav a::after { display: none; }
  nav .wrap { gap: 0; }
  nav a { padding: 8px 4px; font-size: 12px; }
}
@media (max-width: 380px) {
  nav a { font-size: 11px; }
}