/* The cards: what pops down when you touch something on the desk (.panel, home) and the same card
   opened full length on its own page (.sheet). One look for both; office.css and pages.css only place them.
   The talks card is a page from jonashulthen.com: its own dark, Spectral, emerald world. */

:root {
  --jh-bg: oklch(0.13 0.005 155); --jh-surface: oklch(0.18 0.006 155); --jh-line: oklch(0.30 0.006 155); --jh-hair: oklch(0.24 0.006 155);
  --jh-fg: oklch(0.97 0.004 95); --jh-dim: oklch(0.84 0.006 95); --jh-muted: oklch(0.68 0.012 95);
  --jh-emerald: oklch(0.79 0.17 162); --jh-emerald-ink: oklch(0.14 0.008 155);
  --jh-serif: Spectral, ui-serif, Georgia, serif; --jh-sans: Geist, ui-sans-serif, system-ui, sans-serif; --jh-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

/* ---------- the paper card ---------- */
:is(.panel, .sheet) { padding: 18px 22px 22px; background: var(--paper); color: var(--ink); border: var(--rule-w) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
:is(.panel, .sheet):focus { outline: none; }
:is(.panel, .sheet) > * + * { margin-top: 14px; }
:is(.panel, .sheet) h2 { font-size: var(--step-2); letter-spacing: -0.035em; line-height: 1.02; }
:is(.panel, .sheet) p { color: var(--ink-2); }
:is(.panel, .sheet) p strong { color: var(--ink); }
.credit { font-size: 0.9375rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.panel-logo { display: inline-flex; align-items: flex-end; gap: 10px; }
.panel-logo img { height: 52px; width: auto; }
#inca .panel-logo img { height: 24px; }
.panel-logo small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 6px; }
.hubbub-mark { font-family: Sora, var(--font); font-weight: 800; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 6px; }
.panel-logo .hubbub-mark { font-size: 1.5rem; }
.panel-close {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin-left: auto; text-decoration: none;
  border: var(--rule-w) solid var(--ink); background: var(--paper); color: var(--ink); font: 400 1.6rem/1 var(--font); cursor: pointer;
}
.panel-close:hover { background: var(--paper-2); }
:is(.panel, .sheet) .result {
  display: none; padding: 12px 14px; border: var(--rule-w) solid var(--ink); background: var(--paper-2);
  color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
:is(.panel, .sheet) .result.is-on { display: block; }
:is(.panel, .sheet) .result small { display: block; font-weight: 400; color: var(--ink-2); margin-top: 4px; font-size: var(--step--1); }
:is(.panel, .sheet) .actions { margin-top: 16px; }
.panel-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9375rem; }
.panel-links a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.panel-cta { width: 100%; margin-top: 18px !important; }
.panel-cta + .panel-links { margin-top: 12px; font-size: var(--step--1); }
.portal-note .dot { width: 8px; height: 8px; margin-right: 4px; }
.mini-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mini-rows li { border-bottom: 1px solid var(--rule); }
.mini-rows a { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; padding: 10px 0; text-decoration: none; }
.mini-rows i { grid-row: span 2; font: 700 0.875rem/1.5 var(--font); font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini-rows b { font-weight: 700; }
.mini-rows span { font-size: var(--step--1); color: var(--ink-2); }
.mini-rows a:hover b { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.poll { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.poll .btn { min-width: 9.5rem; }
.poll-note { font-size: var(--step--1); color: var(--ink-2); margin-top: 10px; }
.poll-note:empty { display: none; }
.panel-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 16px; border: var(--rule-w) solid var(--ink); }
.panel-close { margin-left: auto; }
/* the featured piece of work: a big shot, a name, one line */
.feature { display: block; margin-top: 14px; text-decoration: none; color: var(--ink); }
.feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--rule-w) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: translate 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.feature:hover img { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.feature b { display: block; margin-top: 14px; font-weight: 700; }
.feature span { display: block; margin-top: 2px; font-size: var(--step--1); color: var(--ink-2); }
.feature + .mini-rows { margin-top: 18px; }
.mini-rows.plain a { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.mini-rows.plain span { text-align: right; }
.panel .feature img { aspect-ratio: 2 / 1; }
#hubbub h2 { font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.02em; }

/* ---------- the dark card: jonashulthen.com, mounted on paper so it keeps the desk's ink edge ---------- */
:is(.panel-jh, .sheet-jh) {
  background: var(--jh-bg); color: var(--jh-fg); border: 6px solid var(--paper); border-radius: 18px;
  box-shadow: 0 0 0 var(--rule-w) var(--ink), 6px 6px 0 var(--rule-w) var(--ink);
  padding: 18px 20px 22px; font-family: var(--jh-sans);
}
:is(.panel-jh, .sheet-jh) p { color: var(--jh-muted); }
:is(.panel-jh, .sheet-jh) :focus-visible { outline: 2px solid var(--jh-emerald); outline-offset: 2px; }
:is(.panel-jh, .sheet-jh) .panel-close { border: 1px solid oklch(0.97 0.004 95 / 0.18); border-radius: 999px; background: transparent; color: var(--jh-fg); }
:is(.panel-jh, .sheet-jh) .panel-close:hover { background: oklch(0.97 0.004 95 / 0.06); }
:is(.panel-jh, .sheet-jh) :is(h1, h2) { font-family: var(--jh-serif); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; color: var(--jh-fg); }
.panel-jh h2 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); }
.jh-eyebrow { font: 500 0.75rem/1.3 var(--jh-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--jh-dim); }
.jh-eyebrow .hash, .hash { color: var(--jh-emerald); font-weight: 600; margin-right: 1px; }
.jh-rooms { font: 500 0.6875rem/1.8 var(--jh-mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jh-muted) !important; }
:is(.panel-jh, .sheet-jh) .actions { gap: 10px; }
.jh-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  background: var(--jh-emerald); color: var(--jh-emerald-ink); border: 0; text-decoration: none;
  font: 500 0.75rem/1 var(--jh-mono); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 10px 30px -12px oklch(0.79 0.17 162 / 0.55); transition: background-color 160ms ease;
}
.jh-btn:hover { background: oklch(0.85 0.15 162); }
.jh-btn.jh-ghost { background: transparent; color: var(--jh-fg); border: 1px solid oklch(0.97 0.004 95 / 0.18); box-shadow: none; }
.jh-btn.jh-ghost:hover { background: oklch(0.97 0.004 95 / 0.06); border-color: oklch(0.97 0.004 95 / 0.32); }

/* the clip: 11 seconds of me on stage */
.clip { position: relative; margin: 16px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--jh-surface); cursor: pointer; }
.clip img, .clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.13 0.005 155 / 0.7), transparent 55%); pointer-events: none; }
.clip-play {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: var(--jh-emerald); color: var(--jh-emerald-ink);
  font: 500 0.6875rem/1 var(--jh-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.clip-play .tri { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.clip.is-playing::after, .clip.is-playing .clip-play { display: none; }

/* ---------- the portal: your project, on the desk ---------- */
.portal fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.portal legend { font-weight: 700; font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.015em; padding: 0; margin-bottom: 10px; }
.portal textarea {
  width: 100%; resize: vertical; border: var(--rule-w) solid var(--ink); background: var(--paper);
  padding: 10px 12px; font: 400 1.0625rem/30px var(--font); color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0 29px, var(--rule) 29px 30px); background-position: 0 9px;
}
.portal textarea:focus, .portal .field input:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips label, .sizes label { position: relative; cursor: pointer; }
.chips input, .sizes input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 6px 12px; border: var(--rule-w) solid var(--ink); font-weight: 700; font-size: 0.875rem; background: var(--paper); }
.chips input:checked + span, .sizes input:checked ~ b { background: var(--amber); }
.chips input:focus-visible + span, .sizes input:focus-visible ~ b { outline: 3px solid var(--ink); outline-offset: 2px; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sizes label { display: grid; gap: 6px; align-content: start; padding: 10px; border: var(--rule-w) solid var(--ink); background: var(--paper); }
.sizes label:has(input:checked) { box-shadow: 3px 3px 0 var(--ink); }
.sizes b { display: grid; place-items: center; width: 40px; height: 40px; border: var(--rule-w) solid var(--ink); font-size: 1.25rem; }
.sizes span { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.3; }
.field { display: grid; gap: 4px; margin-top: 10px; }
.field span { font-weight: 700; font-size: 0.875rem; }
.field small { font-weight: 400; color: var(--ink-2); }
.field input { width: 100%; min-height: 44px; border: var(--rule-w) solid var(--ink); background: var(--paper); padding: 0 12px; font: 400 1rem var(--font); color: var(--ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.portal-note { font-size: 0.8125rem; margin-top: 10px; }
.portal-step-of { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2) !important; margin: 16px 0 8px; }
.portal-error { font-weight: 700; color: oklch(48% 0.16 35) !important; font-size: 0.875rem; }
.portal-error:empty { display: none; }
.portal-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.portal-nav [data-back] { margin-right: auto; }
.portal-done h2 { font-size: var(--step-2); }
.portal-done > * + * { margin-top: 12px; }
.portal-exits { padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.portal-exits a { font-weight: 700; color: var(--ink); }
@media (max-width: 700px) {
  .panel-head { min-height: 40px; }
  .panel-logo img { height: 40px; }
  .sizes { grid-template-columns: 1fr; }
  .sizes label { grid-template-columns: 40px 1fr; align-items: center; }
}
.panel-head h2.label { font-size: 0.8125rem; letter-spacing: 0.09em; line-height: 1.3; }
.panel-links a { padding-block: 3px; } /* 24px targets, for thumbs */