/* ============================================================================
   web-09 · ห้องภาพวันวาน

   Concept: a documentary photographer does not choose from single pictures, they
   choose from a contact sheet — every frame printed together, numbered, with a
   grease-pencil ring around the one that got picked. That sheet is the proof
   that the job is waiting and choosing rather than posing. So the site is a
   contact sheet: photographic-paper ground, frame numbers under everything,
   and type deliberately small and quiet so the pictures carry the page.

   Near-black minimalism — the default for photographer sites — is avoided: the
   ground is paper, and the darkroom black appears only inside the sheet itself.

   Signature: the grease-pencil ring (.ring). One frame per contact sheet, once
   per page. Ring every frame and nothing has been chosen, which is the opposite
   of what the mark means.
   ============================================================================ */

:root {
  --paper: #EDEAE3;
  --paper-2: #E2DED5;
  --darkroom: #1B1A18;
  --grease: #E8402A;
  --silver: #A8A49B;

  --container: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(72px, 9vw, 120px);
}

body {
  background: var(--paper);
  color: var(--darkroom);
  font-family: 'Sarabun', system-ui, sans-serif;
  line-height: 1.85;
}

.mono, .num, .frame { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: 'Anuphan', system-ui, sans-serif; font-weight: 500; line-height: 1.4; }
/* Headings are small on purpose. On a photographer's site the type is the caption,
   not the subject; anything bigger competes with the pictures. */
h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 2.25vw, 1.75rem); }
h3 { font-size: 1.0625rem; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 860px; }
.section { padding-block: var(--gap); }
.section--alt { background: var(--paper-2); }
.lede { color: rgba(27,26,24,.74); max-width: 52ch; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--grease); outline-offset: 3px; }

/* the frame number under every picture — real in film, so structure not ornament */
.frame { display: block; margin-top: 8px; font-size: .6875rem; color: var(--silver); }

/* -- buttons: outline only, never a solid colour ------------------------------- */
/* The one saturated colour on this site is the grease pencil. A filled red button would
   spend it on something that is not a chosen frame. */
.btn { display: inline-block; padding: 13px 28px; border: 1px solid var(--darkroom); text-decoration: none; transition: background .25s, color .25s; }
.btn:hover { background: var(--darkroom); color: var(--paper); }
.btn--onDark { border-color: var(--paper); color: var(--paper); }
.btn--onDark:hover { background: var(--paper); color: var(--darkroom); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* -- header: as close to invisible as it can be while still working -------------- */
.header { background: var(--paper); }
.header__inner { max-width: var(--container); margin-inline: auto; padding: 20px var(--pad); display: flex; align-items: center; gap: 28px; }
.brand { font-family: 'Anuphan', sans-serif; font-weight: 500; font-size: 1rem; text-decoration: none; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav__link { text-decoration: none; font-size: .875rem; color: rgba(27,26,24,.72); }
.nav__link.is-active, .nav__link:hover { color: var(--grease); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 20px; height: 1px; background: var(--darkroom); }
@media (max-width: 780px) {
  .burger { display: flex; }
  .nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; align-items: center; gap: 26px; margin: 0; background: var(--paper); transform: translateY(-100%); transition: transform .3s; }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 1.25rem; }
  body.nav-open { overflow: hidden; }
}

/* -- SIGNATURE: the grease-pencil ring -------------------------------------------- */
.marked { position: relative; }
.ring {
  position: absolute; pointer-events: none;
  width: var(--w, 42%); aspect-ratio: 1;
  top: var(--t, 8%); left: var(--l, 52%);
  transform: rotate(var(--r, -1.5deg));
  overflow: visible;
}
.ring use {
  fill: none; stroke: var(--grease); stroke-width: 2.5;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  /* a wax pencil never lays down solid ink */
  opacity: .88;
}
/* drawn once, from one end of the stroke to the other, when the frame arrives */
.ring use { stroke-dasharray: 340; stroke-dashoffset: 0; }
.ring.is-armed use { stroke-dashoffset: 340; }
.ring.is-drawn use { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-out; }
@media (prefers-reduced-motion: reduce) { .ring.is-armed use { stroke-dashoffset: 0; } }

/* -- hero -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px,6vw,88px) var(--gap); }
.hero__shot { max-width: 960px; }
.hero__shot img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.hero__text { max-width: 52ch; margin-top: 40px; }
.hero h1 { margin-bottom: 16px; }

/* -- contact sheet ------------------------------------------------------------------- */
/* The one place the darkroom black is used. Frames sit 6px apart, the way they do on a
   real sheet — anything roomier stops reading as a sheet and starts reading as a gallery. */
.sheet { background: var(--darkroom); padding: clamp(24px,4vw,56px); }
.sheet__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px 6px; max-width: var(--container); margin-inline: auto; }
@media (max-width: 900px) { .sheet__grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 560px) { .sheet__grid { grid-template-columns: repeat(3,1fr); } }
.sheet__frame { margin: 0; }
.sheet__frame img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: opacity .26s; }
.sheet__frame .frame { color: #6E6A63; }
/* hovering one frame dims the rest — the loupe on the sheet */
.sheet__grid:hover .sheet__frame img { opacity: .45; }
.sheet__grid .sheet__frame:hover img { opacity: 1; }
@media (hover: none) { .sheet__grid:hover .sheet__frame img { opacity: 1; } }

/* -- recent work trio ----------------------------------------------------------------- */
.works { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 44px; }
@media (max-width: 860px) { .works { grid-template-columns: 1fr; max-width: 420px; } }
.work img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.work h3 { margin-top: 14px; }
.work:hover h3 { color: var(--grease); }
.work__where { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--silver); }
.work p { color: rgba(27,26,24,.7); font-size: .9375rem; margin-top: 6px; }
.work a { text-decoration: none; display: block; }

/* -- numbered lists ---------------------------------------------------------------------- */
.rows { max-width: 780px; margin-top: 40px; }
.row { display: grid; grid-template-columns: 48px 1fr; gap: 0 14px; padding: 20px 0; border-top: 1px solid rgba(27,26,24,.16); }
.row:last-child { border-bottom: 1px solid rgba(27,26,24,.16); }
.row__n { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--silver); }
.row p { color: rgba(27,26,24,.74); font-size: .9375rem; }
.row--dark { background: var(--darkroom); color: var(--paper); margin-top: -1px; padding: 24px; grid-template-columns: 1fr; border: 0; }
.row--dark p { color: rgba(237,234,227,.88); }

/* -- packages ------------------------------------------------------------------------------ */
.pkg { max-width: 860px; margin-top: 40px; }
.pkg__item { padding: 28px 0; border-top: 1px solid rgba(27,26,24,.16); }
.pkg__item:last-of-type { border-bottom: 1px solid rgba(27,26,24,.16); }
.pkg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.pkg__price { font-family: 'IBM Plex Mono', monospace; font-size: 1.375rem; }
.pkg__spec { font-family: 'IBM Plex Mono', monospace; font-size: .875rem; color: var(--silver); }
.pkg p { color: rgba(27,26,24,.76); max-width: 52ch; margin-top: 8px; }
.pkg__inc { background: var(--paper-2); padding: 14px 18px; margin-top: 12px; font-size: .9375rem; }
.section--alt .pkg__inc { background: var(--paper); }

.extras { width: 100%; max-width: 860px; margin-top: 32px; }
.extras th, .extras td { padding: 12px 0; border-top: 1px solid rgba(27,26,24,.16); text-align: left; font-weight: 400; }
.extras tr:last-child td, .extras tr:last-child th { border-bottom: 1px solid rgba(27,26,24,.16); }
.extras td { text-align: right; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }

/* -- story blocks (one per wedding) ------------------------------------------------------ */
.story + .story { margin-top: 96px; }
.story__open { max-width: 900px; }
.story__open img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.story__meta { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--silver); }
.story h3 { font-size: 1.25rem; margin-top: 16px; }
.story p { color: rgba(27,26,24,.76); max-width: 56ch; margin-top: 10px; }
/* asymmetric grid so a set reads as a story rather than a product table */
.story__grid { display: grid; grid-template-columns: 2fr 3fr 2fr; gap: 12px; margin-top: 28px; align-items: start; }
@media (max-width: 780px) { .story__grid { grid-template-columns: 1fr; max-width: 460px; } }
.story__grid figure { margin: 0; }
.story__grid img { width: 100%; object-fit: cover; }
.story__grid .is-tall img { aspect-ratio: 2/3; }
.story__grid .is-wide img { aspect-ratio: 3/2; }

/* -- availability dots ---------------------------------------------------------------------- */
.avail { max-width: 760px; margin-top: 32px; }
.avail__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(27,26,24,.16); }
.avail__row:last-child { border-bottom: 1px solid rgba(27,26,24,.16); }
.avail__dots { display: flex; gap: 6px; align-items: center; }
.avail__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--darkroom); display: block; }
.avail__dots i.is-open { background: transparent; border: 1px solid var(--silver); }
.avail__label { font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--silver); }

/* -- channels ------------------------------------------------------------------------------- */
.ctable { width: 100%; max-width: 860px; margin-top: 40px; }
.ctable th, .ctable td { padding: 16px 20px 16px 0; border-top: 1px solid rgba(27,26,24,.16); text-align: left; font-weight: 400; vertical-align: top; }
.ctable tr:last-child td, .ctable tr:last-child th { border-bottom: 1px solid rgba(27,26,24,.16); }
.ctable .is-kind { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--silver); white-space: nowrap; width: 22%; }
.ctable .is-val { font-family: 'Anuphan', sans-serif; font-weight: 500; font-size: 1.125rem; text-decoration: none; }
.ctable a.is-val:hover { color: var(--grease); }
.ctable .is-note { color: rgba(27,26,24,.7); font-size: .9375rem; }
@media (max-width: 700px) {
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: auto; }
  .ctable tr { padding: 14px 0; border-top: 1px solid rgba(27,26,24,.16); }
  .ctable th, .ctable td { padding: 0; border: 0; width: auto; }
}

/* -- faq -------------------------------------------------------------------------------------- */
.faq { max-width: 760px; margin-top: 40px; }
.faq details { border-bottom: 1px solid rgba(27,26,24,.16); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; align-items: center; gap: 14px; font-family: 'Anuphan', sans-serif; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; flex: none; width: 12px; height: 1px; background: var(--silver); transition: transform .2s; }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq p { padding: 0 0 20px 26px; color: rgba(27,26,24,.74); }

/* -- closing band ------------------------------------------------------------------------------ */
.band { background: var(--darkroom); color: var(--paper); padding-block: clamp(56px,7vw,88px); }
.band h2 { color: var(--paper); }
.band p { color: rgba(237,234,227,.8); max-width: 56ch; }
.band .mono { color: var(--silver); }

/* -- footer -------------------------------------------------------------------------------------- */
.footer { padding-block: 48px 24px; border-top: 1px solid rgba(27,26,24,.16); }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: .9375rem; color: rgba(27,26,24,.7); }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'Anuphan', sans-serif; font-weight: 500; color: var(--darkroom); margin-bottom: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--grease); }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(27,26,24,.12); font-size: .8125rem; color: var(--silver); }

/* No fixed action bar on mobile. A bar pinned over the pictures is the one thing that would
   wreck a photography site, so this is the second of the twelve sites to go without one. */