/* ============================================================================
   web-12 · โรงสีเก่า อาร์ตสเปซ

   Concept: a community art space talks to its town in posters — pasted on poles,
   in cafés, on walls. Two spot inks because that is what is affordable, and
   misregistered because the press is old. That misregistration became the look.
   So this site is a poster you can scroll, and it is deliberately the loudest of
   the twelve. Loud still needs discipline: two inks, no third.

   Signature: riso misregistration (.riso, and the shadow on h1/h2). Every image
   is a two-ink duotone with the pink plate offset 3px, one direction, everywhere.
   One press misregisters one way — randomise the direction and it stops being a
   system and becomes an effect.
   ============================================================================ */

:root {
  --paper: #F0EBDD;
  --paper-2: #E3DCC9;
  --blue: #0F52BA;
  --pink: #FF48B0;
  --ink: #171512;

  --shift: 3px;
  --container: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(64px, 8vw, 112px);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
  line-height: 1.8;
  /* paper grain, drawn rather than loaded: a fine dot screen over everything */
  background-image: radial-gradient(circle at 1px 1px, rgba(23,21,18,.055) 1px, transparent 0);
  background-size: 3px 3px;
}

.mono, .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Srisakdi is a display face and stays on h1/h2. The body face has to be plain to carry the
   weight of everything else being loud. */
h1, h2 { font-family: 'Srisakdi', cursive; font-weight: 700; line-height: 1.15; color: var(--blue); }
h1 { font-size: clamp(3rem, 9vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 1.0625rem; }

/* the misregistered second plate on type */
.off { text-shadow: var(--shift) calc(var(--shift) * -1) 0 var(--pink); }
.off--blue { text-shadow: var(--shift) calc(var(--shift) * -1) 0 var(--blue); }
@media (max-width: 640px) { :root { --shift: 2px; } }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap); }
.section--alt { background: var(--paper-2); }
.lede { max-width: 58ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.rule { height: 6px; width: 120px; background: var(--pink); border: 0; margin: 0 0 20px; }
.rule--blue { background: var(--blue); }

/* -- buttons ---------------------------------------------------------------- */
.btn { display: inline-block; padding: 16px 32px; border-radius: 0; text-decoration: none; font-weight: 600; transition: transform .18s; }
.btn--blue { background: var(--blue); color: var(--paper); }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--out { border: 3px solid var(--ink); }
.btn:hover { transform: translate(var(--shift), calc(var(--shift) * -1)); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* -- header ------------------------------------------------------------------ */
.header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 3px solid var(--blue); }
.header__inner { max-width: var(--container); margin-inline: auto; padding: 12px var(--pad); display: flex; align-items: center; gap: 24px; }
.brand { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.5rem; color: var(--blue); text-decoration: none; text-shadow: 2px -2px 0 var(--pink); }
.header__cta { margin-left: auto; padding: 9px 18px; font-size: .9375rem; }
.nav { display: flex; gap: 20px; margin-left: 20px; }
.nav__link { text-decoration: none; font-size: .9375rem; }
.nav__link.is-active { color: var(--pink); font-weight: 600; }
.nav__link:hover { color: var(--pink); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 3px; background: var(--ink); }
@media (max-width: 940px) {
  /* only the CTA gets the auto margin — with one on the burger too, the free space is
     split between them and the button ends up stranded mid-header. */
  .burger { display: flex; order: 3; margin-left: 0; } .header__cta { margin-left: auto; order: 2; }
  .nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; align-items: center; gap: 28px; margin: 0; background: var(--blue); transform: translateY(-100%); transition: transform .3s; }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 1.5rem; color: var(--paper); }
  .nav__link.is-active { color: var(--pink); }
  body.nav-open { overflow: hidden; }
}

/* -- SIGNATURE: riso misregistration on images ---------------------------------- */
/* Two stacked copies of the same file. Each is desaturated, then tinted by an overlay in
   `mix-blend-mode: color`; the pink plate is nudged by --shift and multiplied over the blue.
   No pre-processed duotone assets — the same webp the other sites use. */
.riso { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.riso__plate { position: absolute; inset: 0; }
.riso__plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.2); }
.riso__plate::after { content: ''; position: absolute; inset: 0; mix-blend-mode: color; }
.riso__plate--blue::after { background: var(--blue); }
.riso__plate--pink { transform: translate(var(--shift), calc(var(--shift) * -1)); mix-blend-mode: multiply; opacity: .62; }
.riso__plate--pink::after { background: var(--pink); }
/* the in-flow copy that gives the box its height; kept invisible so layout never depends on JS */
.riso__sizer { width: 100%; display: block; visibility: hidden; }

/* -- hero -------------------------------------------------------------------------- */
.hero { padding-block: clamp(40px,6vw,72px) 0; }
.hero h1 { max-width: 8ch; }
.hero__sub { max-width: 52ch; margin-top: 16px; font-size: 1.0625rem; }
.hero__img { position: relative; margin-top: clamp(28px,4vw,48px); }
.hero__img .riso { height: min(56vh, 540px); }
.hero__next {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  background: var(--pink); color: var(--ink);
  padding: 12px 20px; max-width: 30ch;
}
.hero__next b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; }

/* -- poster tiles --------------------------------------------------------------------- */
.posters { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 1024px) { .posters { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .posters { grid-template-columns: 1fr; } }
.poster { aspect-ratio: 3/4; padding: 22px; display: flex; flex-direction: column; transition: transform .18s; }
.poster:hover { transform: translate(var(--shift), calc(var(--shift) * -1)); }
.poster--blue { background: var(--blue); color: var(--paper); }
.poster--pink { background: var(--pink); color: var(--ink); }
.poster--ink { background: var(--ink); color: var(--paper); }
.poster__date { font-family: 'IBM Plex Mono', monospace; font-size: 1.125rem; }
.poster h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: clamp(1.375rem,2.5vw,1.75rem); line-height: 1.2; margin: 14px 0 10px; color: inherit; }
.poster p { font-size: .9375rem; }
.poster__price { margin-top: auto; font-family: 'IBM Plex Mono', monospace; }
/* One column: a 3:4 poster the full width of a phone is a screen and a half of empty ink.
   Below this the tile stops being a poster and becomes a row. */
@media (max-width: 560px) { .poster { aspect-ratio: auto; } .poster__price { margin-top: 16px; } }

/* -- what is here --------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 42fr 58fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .two-col > .is-media { order: -1; } }
.spaces > div { padding: 16px 0; border-bottom: 3px solid var(--pink); }
.spaces > div:first-child { border-top: 3px solid var(--pink); }
.spaces h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.25rem; color: var(--blue); }
.spaces p { font-size: .9375rem; }
.spaces .num { color: var(--blue); font-weight: 600; }

/* -- big numbers block ------------------------------------------------------------------- */
.figs { background: var(--blue); color: var(--paper); }
.figs__grid { display: grid; grid-template-columns: repeat(3,1fr); }
@media (max-width: 860px) { .figs__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .figs__grid { grid-template-columns: 1fr; } }
.fig { padding: 28px; border-right: 3px solid var(--pink); border-bottom: 3px solid var(--pink); }
.fig__n { display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(2.5rem,6vw,4.5rem); line-height: 1; text-shadow: var(--shift) calc(var(--shift) * -1) 0 var(--pink); }
.fig__label { font-weight: 600; margin-top: 10px; }
.fig__sub { font-size: .875rem; color: rgba(240,235,221,.78); }

/* -- artists -------------------------------------------------------------------------------- */
.artists > div { padding: 14px 0; border-bottom: 3px solid var(--blue); }
.artists > div:first-child { border-top: 3px solid var(--blue); }
.artists h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.125rem; }
.artists .is-field { color: var(--pink); font-weight: 600; font-size: .9375rem; }
.artists p { font-size: .9375rem; }

/* -- event list ------------------------------------------------------------------------------ */
.events { max-width: 1000px; margin-top: 40px; }
.event { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 24px 0; border-top: 3px solid var(--blue); }
.event:last-child { border-bottom: 3px solid var(--blue); }
@media (max-width: 640px) { .event { grid-template-columns: 1fr; gap: 12px; } }
.event__date { width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; }
@media (max-width: 640px) { .event__date { width: 64px; height: 64px; } }
.event__date--blue { background: var(--blue); color: var(--paper); }
.event__date--pink { background: var(--pink); color: var(--ink); }
.event__d { font-size: 2rem; line-height: 1; }
.event__m { font-size: .8125rem; }
.event h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: clamp(1.25rem,2.2vw,1.625rem); color: var(--blue); }
.event__meta { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--blue); margin: 4px 0 8px; }
.event p { max-width: 62ch; font-size: .9375rem; }
.event__tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; padding: 4px 10px; margin-top: 10px; }
.event__tag--left { background: var(--pink); color: var(--ink); }
.event__tag--full { background: var(--ink); color: var(--paper); }
.event.is-full { opacity: .55; }

/* -- workshops / rent tables ------------------------------------------------------------------- */
.wsgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 700px) { .wsgrid { grid-template-columns: 1fr; } }
.ws { padding: 24px; }
.ws--blue { background: var(--blue); color: var(--paper); }
.ws--pink { background: var(--pink); color: var(--ink); }
.ws--ink { background: var(--ink); color: var(--paper); }
.ws h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.5rem; color: inherit; }
.ws__spec { font-family: 'IBM Plex Mono', monospace; font-size: .875rem; margin: 6px 0 8px; }
.ws--outline { background: var(--paper); border: 3px solid var(--pink); grid-column: 1 / -1; }
.ws--outline h3 { color: var(--blue); }

.rent { width: 100%; max-width: 1000px; margin-top: 36px; }
.rent th, .rent td { padding: 18px 20px 18px 0; border-top: 3px solid var(--blue); text-align: left; font-weight: 400; vertical-align: top; }
.rent tr:nth-child(even) th, .rent tr:nth-child(even) td { border-top-color: var(--pink); }
.rent tr:last-child td, .rent tr:last-child th { border-bottom: 3px solid var(--blue); }
.rent .is-space { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.125rem; color: var(--blue); white-space: nowrap; }
.rent .is-price { font-family: 'IBM Plex Mono', monospace; font-weight: 500; white-space: nowrap; }
.rent .is-note { font-size: .9375rem; }
.tagfull { display: inline-block; background: var(--ink); color: var(--paper); font-family: 'IBM Plex Mono', monospace; font-size: .75rem; padding: 3px 8px; }
@media (max-width: 820px) {
  .rent, .rent tbody, .rent tr, .rent th, .rent td { display: block; width: auto; }
  .rent tr { padding: 14px 0; border-top: 3px solid var(--blue); }
  .rent th, .rent td { padding: 0; border: 0; }
}

/* -- donate block ------------------------------------------------------------------------------- */
.donate { background: var(--pink); color: var(--ink); padding-block: clamp(56px,7vw,88px); }
.donate h2 { color: var(--ink); text-shadow: var(--shift) calc(var(--shift) * -1) 0 var(--blue); }
.tiers { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 36px; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { padding: 22px; border-right: 3px solid var(--ink); }
.tier:last-child { border-right: 0; }
@media (max-width: 900px) { .tier { border-right: 0; border-bottom: 3px solid var(--ink); } }
.tier__n { font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.5rem,3vw,2rem); line-height: 1.1; }
.tier p { font-size: .9375rem; margin-top: 8px; }
.tier--monthly { background: var(--ink); color: var(--paper); }
.howto { background: var(--paper); padding: 32px; margin-top: 32px; }
.howto h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.25rem; color: var(--blue); }
.howto__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px 40px; margin-top: 16px; }
@media (max-width: 700px) { .howto__grid { grid-template-columns: 1fr; } }
.acct { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; }
.copybtn { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; border: 2px solid var(--ink); padding: 4px 10px; margin-left: 8px; }
.qr { width: 220px; height: 220px; background: #fff; padding: 12px; }
.qr__inner { display: block; width: 100%; height: 100%; background-image: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%); background-size: 18px 18px; }
.qr__note { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; margin-top: 8px; }

/* -- timeline / money bars ----------------------------------------------------------------------- */
.timeline { max-width: 820px; margin-top: 40px; border-left: 3px solid var(--blue); }
.tl { position: relative; padding: 0 0 28px 28px; }
.tl::before { content: ''; position: absolute; left: -8.5px; top: 12px; width: 14px; height: 14px; background: var(--pink); }
.tl__year { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; color: var(--blue); font-weight: 500; }
.tl p { max-width: 56ch; }

.money { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; }
@media (max-width: 780px) { .money { grid-template-columns: 1fr; } }
.money h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.25rem; color: var(--blue); margin-bottom: 12px; }
.stack { display: flex; flex-direction: column; }
.stack div { display: flex; align-items: center; padding: 0 12px; font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--paper); }
.stack--in div { background: var(--blue); }
.stack--out div { background: var(--pink); color: var(--ink); }
/* Tint the ink, not the whole block — an opacity on the segment takes its label down with it. */
.stack--in .lv2 { background: color-mix(in srgb, var(--blue) 78%, var(--paper)); }
.stack--in .lv3 { background: color-mix(in srgb, var(--blue) 34%, var(--paper)); color: var(--ink); }
.stack--out .lv2 { background: color-mix(in srgb, var(--pink) 74%, var(--paper)); }
.stack--out .lv3 { background: color-mix(in srgb, var(--pink) 56%, var(--paper)); }
.stack--out .lv4 { background: color-mix(in srgb, var(--pink) 40%, var(--paper)); }
.stack--out .lv5 { background: color-mix(in srgb, var(--pink) 26%, var(--paper)); }
.money__total { font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; margin-top: 10px; }

.cols3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 40px; }
@media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; } }
.cols3 > div { padding: 0 28px 0 0; border-right: 3px solid var(--pink); }
.cols3 > div + div { padding-left: 28px; }
.cols3 > div:last-child { border-right: 0; }
@media (max-width: 860px) { .cols3 > div, .cols3 > div + div { border-right: 0; border-bottom: 3px solid var(--pink); padding: 0 0 20px; margin-bottom: 20px; } }
.cols3 h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.375rem; margin-bottom: 8px; }
.cols3 p { font-size: .9375rem; }

/* -- contact ------------------------------------------------------------------------------------- */
.channels { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 900px) { .channels { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .channels { grid-template-columns: 1fr; } }
.channel { display: block; text-decoration: none; padding: 20px; border: 3px solid var(--blue); transition: transform .18s, box-shadow .18s; }
.channel:hover, .channel:focus-visible { transform: translate(var(--shift), calc(var(--shift) * -1)); box-shadow: calc(var(--shift) * -1) var(--shift) 0 var(--pink); }
.channel--want { background: var(--pink); border-color: var(--ink); }
.channel h3 { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.125rem; color: var(--blue); }
.channel--want h3 { color: var(--ink); }
.channel__v { font-family: 'IBM Plex Mono', monospace; font-size: 1.0625rem; display: block; margin: 4px 0 6px; }
.channel p { font-size: .9375rem; }

.locator { width: 100%; display: block; border: 3px solid var(--blue); }
.dl__row { padding: 14px 0; border-top: 3px solid var(--blue); }
.dl__row:last-child { border-bottom: 3px solid var(--blue); }
.dl__label { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--pink); font-weight: 600; }
.callout { background: var(--blue); color: var(--paper); padding: 24px; margin-top: 24px; }
.hours { max-width: 680px; margin-top: 24px; }
.hours tr { border-top: 3px solid var(--pink); }
.hours tr:last-child { border-bottom: 3px solid var(--pink); }
.hours th, .hours td { padding: 12px 0; font-weight: 400; text-align: left; }
.hours td { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.hours tr.is-today th::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--blue); margin-right: 8px; }
.quiet { background: var(--pink); color: var(--ink); padding: 20px; margin-top: 24px; }

.sqlist > div { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 3px solid var(--blue); }
.sqlist > div:first-child { border-top: 3px solid var(--blue); }
.sq { flex: none; width: 14px; height: 14px; margin-top: .5em; }
.sq--blue { background: var(--blue); } .sq--pink { background: var(--pink); }
.sqlist p { font-size: .9375rem; }

/* -- closing band ---------------------------------------------------------------------------------- */
.band { background: var(--blue); color: var(--paper); padding-block: clamp(56px,7vw,88px); text-align: center; }
.band h2 { color: var(--paper); text-shadow: var(--shift) calc(var(--shift) * -1) 0 var(--pink); }
.band p { max-width: 56ch; margin-inline: auto; }
.band .btn-row { justify-content: center; }

/* -- in-page contents ---------------------------------------------------------------------------------
   A jump bar, not decoration: the services page is four long blocks and this is the only way to
   reach the donate block without scrolling past a calendar. Sticky under the 64px header. */
.toc { position: sticky; top: 62px; z-index: 20; background: var(--paper); border-bottom: 3px solid var(--blue); margin-top: 28px; }
.toc__inner { display: flex; gap: 0; overflow-x: auto; }
.toc a { display: block; white-space: nowrap; padding: 12px 18px; text-decoration: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .8125rem; }
.toc a.is-current { background: var(--pink); color: var(--ink); }
.toc a:hover { background: var(--paper-2); }
.toc a.is-current:hover { background: var(--pink); }
[id] { scroll-margin-top: 116px; }

/* -- footer ------------------------------------------------------------------------------------------ */
.footer { background: var(--ink); color: var(--paper); padding-block: 56px 28px; }
.footer__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; font-size: .9375rem; color: rgba(240,235,221,.74); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'Srisakdi', cursive; font-weight: 700; font-size: 1.375rem; color: var(--paper); margin-bottom: 8px; text-shadow: 2px -2px 0 var(--pink); }
.footer__label { font-size: .8125rem; color: var(--pink); margin-bottom: 6px; font-weight: 600; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 3px solid var(--blue); font-size: .8125rem; }

/* -- mobile bar ---------------------------------------------------------------------------------------- */
.mobilebar { display: none; }
@media (max-width: 640px) {
  .mobilebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--pink); }
  .mobilebar .btn { display: block; text-align: center; padding: 12px; }
  .mobilebar .btn:hover { transform: none; }
  body { padding-bottom: 72px; }
}