/* De Donkere Kamer
   Darkroom black, paper white and Prussian blue. The one loud thing is the test strip in the hero;
   everything else stays quiet so booking is easy. */

/* Fonts are self-hosted (SIL Open Font License), so no visitor data goes to Google. */
@font-face { font-family: 'Big Shoulders Display'; src: url('/fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('/fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('/fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Dark is the house look: the darkroom itself. */
  --paper: #151515;        /* the room */
  --paper-hi: #1E1E1D;     /* raised surfaces */
  --paper-deep: #232322;   /* bands */
  --ink: #EDEDE8;          /* text, like paper under the safelight */
  --graphite: #A6A6A0;
  --rule: #3A3A37;
  --prussian: #8DA7EC;     /* cyanotype blue, lifted for dark */
  --prussian-deep: #B7C8F4;
  --prussian-wash: #1C2440;
  --on-prussian: #0F1630;
  --alert: #F08A7A;
  --print-blue: #1E3E8C;   /* a real cyanotype stays deep blue */
  --print-ink: #F4F6FB;
  --print-paper: #F3F2EC;   /* photo paper, the same in both themes */
  --btn-bg: var(--ink);
  --btn-fg: var(--paper-hi);
  --grain-opacity: .05;

  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: 'Schibsted Grotesk', system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 38rem;
  color-scheme: dark;
}


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--text);
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
/* Paper grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 50;
  opacity: var(--grain-opacity);
  filter: invert(1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: .005em; }
h2 { font-size: clamp(2.6rem, 6.5vw, 4.5rem); }
h3 { font-size: 1.75rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--prussian); outline-offset: 3px; border-radius: 2px; }

.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .5rem 1rem; }
.skip:focus { left: .5rem; }

.link { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg); border-radius: 3px;
  font-weight: 700; font-size: 1.05rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--prussian); border-color: var(--prussian); color: var(--on-prussian); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-small { min-height: 2.5rem; padding: .45rem 1rem; font-size: .98rem; }
.btn-wide { width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---------- Header ---------- */
.top {
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  padding: 1rem var(--gutter);
}
.mark { display: inline-flex; align-items: center; gap: .65rem; font: 800 1.45rem/1 var(--display); text-decoration: none; margin-right: auto; }
.mark img { display: block; height: 2rem; width: auto; }
@media (max-width: 380px) { .mark span { display: none; } }
.lang { display: flex; }
.lang button {
  background: none; border: 0; padding: .5rem .55rem; cursor: pointer;
  font-weight: 700; font-size: .95rem; color: var(--graphite);
  min-width: 2.75rem; min-height: 2.75rem;
}
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }

/* ---------- Hero: the logo as a test strip ---------- */
.hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}
.strip { margin: 0; width: clamp(15rem, 28vw, 22rem); }
.strip-times, .strip-bands { display: grid; grid-template-columns: repeat(6, 1fr); }
.strip-times {
  font-size: .85rem; color: var(--graphite); font-style: italic;
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem; margin-bottom: .6rem;
}
.strip-times span { padding-left: .35rem; border-left: 1px solid var(--rule); }
/* The logo straight on the dark page; the bands develop it out of the dark. */
.strip-print { position: relative; }
.strip-logo { margin: 0; line-height: 0; }
.strip-logo img { display: block; width: 100%; height: auto; }
.strip-bands { position: absolute; inset: 0; pointer-events: none; }
.strip-bands i { display: block; background: var(--paper); opacity: var(--e); }
/* The one moment of motion: the strip develops like a real print.
   The most exposed step (12s) comes up first; the least exposed comes last. */
@media (prefers-reduced-motion: no-preference) {
  .strip-bands i { animation: develop 2.4s cubic-bezier(.3,.1,.2,1) calc(.25s + var(--d) * .28s) both; }
}
@keyframes develop { from { opacity: 1; } to { opacity: var(--e); } }

.hero-side { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: center; min-width: 0; }
.lede { font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.4; max-width: 32ch; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .strip { width: min(100%, 19rem); }
}

/* Next up: the next workshop and the next open Friday, as two small prints */
.next { display: grid; gap: .75rem; }
.next-label { font-size: .95rem; color: var(--graphite); }
.next-body { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.next-item {
  display: grid; gap: .2rem;
  background: var(--paper-hi);
  padding: 1rem 1.15rem 1.15rem;
  box-shadow: 0 0 0 1px var(--rule), 0 14px 30px -18px rgba(0, 0, 0, .6);
  border-top: 6px solid var(--c);
}
.next-kind { font-weight: 700; }
.next-date { font: 800 2rem/1 var(--display); }
.next-meta { color: var(--graphite); }
.next-item .btn { width: 100%; margin-top: .7rem; }
.loading-line { display: block; height: 4.5rem; background: var(--paper-deep); border-radius: 2px; }

/* ---------- Sections ---------- */
main > section { padding: clamp(3rem, 8vw, 6rem) var(--gutter); }

/* Booking: Sunday workshops and open Fridays side by side, equal standing */
.book { background: var(--paper-deep); }
.book > h2 { margin-bottom: 2rem; }
.groups {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: 3rem clamp(2rem, 4vw, 4rem);
}
/* Each group spans two shared rows (heading, list), so both lists start at the
   same height even when one intro text is longer than the other. */
.group { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 1.25rem; }
.group-head { display: grid; gap: .5rem; align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .group { display: block; }
  .group-head { margin-bottom: 1.25rem; min-height: 9.5rem; }
}
.group-head h3 { font-size: 2.1rem; }
.group-head p { color: var(--graphite); max-width: 34rem; }

.sheet { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-self: start; align-content: start; }
.row {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr) auto;
  grid-template-areas: "date info info" "date places act";
  gap: .7rem 1rem; align-items: center;
  padding: 1rem 1rem 1rem 1.1rem;
  border-left: 6px solid var(--c);
  background: var(--paper);
}
.c-cyano { --c: var(--prussian); }
.c-bw { --c: var(--ink); }
.date { grid-area: date; align-self: start; display: grid; line-height: 1; }
.date-day { font: 800 3rem/.9 var(--display); }
.date-sub { font-size: .9rem; color: var(--graphite); margin-top: .3rem; }
.info { grid-area: info; display: grid; gap: .15rem; min-width: 0; }
.info-kind { font: 700 1.55rem/1.05 var(--display); }
.info-meta { color: var(--graphite); font-size: 1rem; }
.info-note { font-size: .95rem; font-style: italic; }
.places { grid-area: places; display: grid; gap: .35rem; font-size: .95rem; }
.dots { display: flex; gap: 5px; }
.dots b { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c); }
.dots b.taken { background: var(--c); }
.row .btn, .row-state { grid-area: act; min-width: 7rem; }
.row.is-off { --c: var(--rule); }
.row.is-off .info-kind { text-decoration: line-through; text-decoration-thickness: 2px; }
.row-state { font-weight: 700; text-align: center; color: var(--graphite); }
.sheet-msg { padding: 1.25rem 0; color: var(--graphite); max-width: var(--measure); }

@media (max-width: 440px) {
  .row { grid-template-columns: 4.2rem minmax(0, 1fr); grid-template-areas: "date info" "date places" "act act"; }
  .date-day { font-size: 2.6rem; }
  .row .btn, .row-state { width: 100%; }
}

/* What’s on */
.kinds h2 { margin-bottom: 2rem; }
.kinds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.kind { display: grid; gap: 1rem; align-content: start; }
.kind p { max-width: var(--measure); }
.kind .kind-when { color: var(--graphite); margin-top: -.5rem; }
.kind ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.kind li { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
/* Step wedges: the tonal range of each process */
.swatch { height: 3.25rem; border: 1px solid var(--rule); }
.kind-bw .swatch {
  background: linear-gradient(90deg,
    #F4F4F1 0 9.09%, #DADAD6 0 18.18%, #C1C1BC 0 27.27%, #A8A8A3 0 36.36%, #8F8F8A 0 45.45%,
    #777772 0 54.54%, #60605C 0 63.63%, #4A4A47 0 72.72%, #363634 0 81.81%, #242423 0 90.9%, #141413 0);
}
.kind-cyano .swatch {
  background: linear-gradient(90deg,
    #EEF2FA 0 9.09%, #CBD7EF 0 18.18%, #A8BCE3 0 27.27%, #86A0D6 0 36.36%, #6584C7 0 45.45%,
    #4A6AB6 0 54.54%, #3554A3 0 63.63%, #26448F 0 72.72%, #1C3779 0 81.81%, #142A61 0 90.9%, #0D1E48 0);
}
.aside { margin-top: 2.5rem; color: var(--graphite); max-width: var(--measure); }

/* Private workshop: one calm block with one action */
.private {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 1.5rem 3rem; margin-top: 3rem; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper-hi); border: 1px solid var(--rule);
}
.private-text { display: grid; gap: .6rem; }
.private h3 { font-size: 2.2rem; }
.private p { max-width: var(--measure); color: var(--graphite); }
@media (max-width: 700px) { .private { grid-template-columns: 1fr; } .private .btn { width: 100%; } }

/* How a Friday works — a real sequence, so it's numbered */
.how { background: var(--paper-deep); }
.how h2 { margin-bottom: 2rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 2rem; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: .5rem; align-content: start; border-top: 2px solid var(--ink); padding-top: .9rem; }
.steps li::before { content: counter(step); font: 900 3rem/1 var(--display); }

/* Where */
.where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; }
.where > div { display: grid; gap: 1rem; align-content: start; }
.address { font: 700 clamp(1.9rem, 4vw, 2.8rem)/1.05 var(--display); }
@media (max-width: 700px) { .where { grid-template-columns: 1fr; } }

/* FAQ */
.faq h2 { margin-bottom: 1.5rem; }
.faq-list { max-width: 48rem; border-top: 1px solid var(--rule); }
details { border-bottom: 1px solid var(--rule); }
summary {
  cursor: pointer; list-style: none; padding: 1rem 2.5rem 1rem 0; position: relative;
  font-weight: 700; font-size: 1.15rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; position: absolute; right: .25rem; top: .55rem;
  font: 700 1.9rem/1 var(--display); color: var(--graphite);
}
details[open] summary::after { content: '–'; }
details p { padding: 0 0 1.25rem; max-width: var(--measure); }

/* Footer */
.foot {
  padding: 3rem var(--gutter) 4rem; display: grid; gap: .5rem;
  background: var(--paper); color: var(--graphite);
  border-top: 1px solid var(--rule);
}
.foot .link { color: var(--ink); }
.foot-mark { margin-bottom: 1rem; line-height: 0; }
.foot-mark img { display: block; width: auto; height: clamp(6rem, 12vw, 8.5rem); }

/* ---------- Booking dialog ---------- */
dialog {
  padding: 0; border: 0; margin: 0 0 0 auto;
  width: min(30rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: var(--paper-hi); color: var(--ink);
  box-shadow: -20px 0 50px -20px rgba(0,0,0,.4);
}
dialog { overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(15, 15, 14, .55); }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: slide-in .28s cubic-bezier(.2,.8,.2,1); }
}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 600px) {
  dialog { width: 100vw; margin: auto 0 0; height: auto; max-height: 94dvh; border-radius: 12px 12px 0 0; }
  @keyframes slide-in { from { transform: translateY(40px); opacity: 0; } }
}
.sheet-panel { padding: 1.25rem 1.5rem 2rem; display: grid; gap: 1.25rem; }
.dlg-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.dlg-head h2 { font-size: 2.4rem; }
.x { background: none; border: 0; font-size: 2rem; line-height: 1; width: 2.75rem; height: 2.75rem; cursor: pointer; margin: -.4rem -.6rem 0 0; }
.dlg-session { border-left: 6px solid var(--c); padding: .2rem 0 .2rem 1rem; }
.dlg-session strong { display: block; font: 800 1.6rem/1.05 var(--display); }

form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; border: 0; margin: 0; padding: 0; }
.field > span, legend { font-weight: 700; font-size: 1rem; }
legend { padding: 0; margin-bottom: .35rem; }
.field small { color: var(--graphite); font-size: .9rem; }
.field-short input { max-width: 8rem; }
input:not([type=radio]):not([type=checkbox]), textarea {
  width: 100%; padding: .7rem .8rem; min-height: 3rem;
  background: var(--paper); border: 2px solid var(--rule); border-radius: 3px;
}
input:not([type=radio]):not([type=checkbox]):focus, textarea:focus { border-color: var(--prussian); outline: none; }
textarea { resize: vertical; }
.choice label { display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; cursor: pointer; }
.choice input, input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--prussian); margin: 0; }
.hint { background: var(--prussian-wash); padding: .75rem .9rem; font-size: .98rem; border-radius: 3px; margin-top: .4rem; }
.pay { color: var(--graphite); font-size: 1rem; }
.error { color: var(--alert); font-weight: 700; }

/* Confirmation: the booking develops like a cyanotype */
.done { display: grid; gap: 1.25rem; }
.print {
  background: var(--print-blue); color: var(--print-ink);
  padding: 1.5rem; border: 10px solid var(--paper-hi); outline: 1px solid var(--rule);
}
.print-title { font: 900 2.8rem/.95 var(--display); }
.print-session { margin-top: .5rem; font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .print.develop { animation: cyan 1.8s ease-out both; }
}
@keyframes cyan {
  from { background: #CFE3C2; color: transparent; }
  45%  { background: #6F8FB8; color: transparent; }
  to   { background: var(--print-blue); color: var(--print-ink); }
}
.done-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.done-actions .btn { flex: 1 1 10rem; }

/* ---------- Cancel page ---------- */
.narrow { max-width: 34rem; margin: 0 auto; padding: 2rem var(--gutter) 5rem; display: grid; gap: 1.25rem; }
.narrow h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
.narrow .actions { display: flex; flex-wrap: wrap; gap: .75rem; }