/* ------------------------------------------------------------------
   PHOTOPHOTO — landing page.

   Layout after barchenin.com: one narrow centred column, small tracked
   monospace throughout, a single large photograph, split header and
   split footer. No buttons, almost no hierarchy.

   The wordmark stays in PHOTOPHOTO's own geometric caps — the layout
   is borrowed, the identity is not.

   Deliberately single-theme.
   ------------------------------------------------------------------ */
:root{
  --ground:#EFEDE7;     /* warm off-white */
  --ground-2:#E8E5DD;   /* the footer band */
  --ink:#22262A;        /* near-black */
  --ink-mid:#5A6169;
  --rule:rgba(34,38,42,.14);

  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --geo:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--mono);font-size:13px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;display:block}
a{color:inherit}

/* every piece of text on this page is the same small tracked mono */
.m{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(11px,1.15vw,13px);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.75;margin:0;overflow-wrap:anywhere;
}
.m a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.m a:hover{border-bottom-color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

.col{
  width:100%;max-width:620px;margin-inline:auto;
  padding-left:calc(20px + env(safe-area-inset-left,0px));
  padding-right:calc(20px + env(safe-area-inset-right,0px));
}

/* ---- header: wordmark left, status right ---- */
.head{padding-block:clamp(18px,2.4vw,26px)}
.head-in{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.head-in>*{min-width:0}
.wordmark{
  font-family:var(--geo);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.6vw,25px);letter-spacing:.01em;line-height:1;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}
.head-right{text-align:right;display:grid;gap:1px;justify-items:end}

/* ---- language toggle ---- */
.lang{display:flex;gap:7px;align-items:baseline}
.lang button{
  font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:uppercase;
  background:none;border:0;padding:3px 1px;margin:0;cursor:pointer;color:var(--ink);
  opacity:.4;border-bottom:1px solid transparent;transition:opacity .15s,border-color .15s;
}
.lang button:hover{opacity:.75}
.lang button[aria-pressed="true"]{opacity:1;border-bottom-color:var(--ink)}
.lang .sep{opacity:.3}

/* ---- the one centred line ---- */
.tagline{text-align:center;padding-block:clamp(12px,1.8vw,18px)}

/* ---- the photograph ---- */
figure.shot{margin:0;display:flex;justify-content:center}
figure.shot img{
  height:clamp(250px,43vh,480px);
  height:clamp(250px,43svh,480px);
  width:auto;max-width:100%;aspect-ratio:3/4;object-fit:cover;margin-inline:auto;
}

/* ---- the lines under it ---- */
.under{text-align:center;padding-block:clamp(14px,2vw,20px);display:grid;gap:clamp(10px,1.4vw,14px)}

/* ---- footer band ---- */
.foot{background:var(--ground-2);margin-top:clamp(14px,2vw,22px);padding-block:clamp(18px,2.4vw,24px)}
.foot-in{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.foot-in>*{min-width:0}
.foot-right{text-align:right}
.tail{padding-block:12px}
.tail .m{text-align:center;color:var(--ink-mid);font-size:10.5px}

/* ---- enquiry dialog ---- */
dialog{
  border:0;padding:0;margin:auto;background:var(--ground);color:var(--ink);
  width:min(390px,calc(100% - 32px));max-height:88svh;max-height:88vh;overflow:auto;
  box-shadow:0 30px 70px -30px rgba(34,38,42,.6);
}
dialog::backdrop{background:rgba(34,38,42,.45)}
.dlg{padding:22px 20px 20px;display:grid;gap:13px}
.dlg-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dlg-head h2{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.dlg-x{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;padding:4px;cursor:pointer;color:var(--ink);opacity:.5}
.dlg-x:hover{opacity:1}
.dlg form{display:grid;gap:11px}
.f{display:grid;gap:5px}
.dlg label{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.65}
.dlg input,.dlg select,.dlg textarea{
  font-family:var(--mono);font-size:12.5px;color:var(--ink);background:#FBFAF7;
  border:1px solid rgba(34,38,42,.25);border-radius:0;padding:9px 10px;
  width:100%;min-width:0;max-width:100%;
}
/* grid items default to min-width:auto and refuse to shrink below their
   content — the native date picker's intrinsic width was widening the dialog */
.dlg form > *,.f,.dlg fieldset{min-width:0}
.dlg input[type="date"]{-webkit-appearance:none;appearance:none}
.dlg textarea{min-height:68px;resize:vertical}
.dlg fieldset{border:0;padding:0;margin:0;display:grid;gap:7px}
.dlg legend{padding:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.65}
.dlg .opt{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;text-transform:none;opacity:1;cursor:pointer}
.dlg .opt input{width:auto;margin:0;padding:0;border:0;accent-color:var(--ink);flex:none}
[hidden]{display:none!important}
.dlg input:focus,.dlg select:focus,.dlg textarea:focus{outline:1px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.dlg .send{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  padding:11px 20px;cursor:pointer;justify-self:start;margin-top:2px;
}
.dlg .send:hover{background:transparent;color:var(--ink)}
.dlg .send[disabled]{opacity:.5;cursor:default}
.dlg .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;line-height:1.6;opacity:.8}
.hp{position:absolute;left:-9999px}

@media(max-width:560px){
  .m{font-size:10px;letter-spacing:.08em}
  .wordmark{font-size:18px}
  .col{padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px))}
  .head-in,.foot-in{gap:12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- locations page ---- */
.venues{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.venue{padding-block:clamp(14px,2vw,18px);border-bottom:1px solid var(--rule);display:grid;gap:4px}
.v-name{font-weight:500;letter-spacing:.17em}
.v-addr{opacity:.7;text-transform:none;letter-spacing:.06em;line-height:1.65}
.v-note{text-transform:none;letter-spacing:.06em;opacity:.5;font-size:10px}

/* iOS zooms the page whenever a focused control is under 16px, so the
   controls stay at 16px on touch and the height comes out of everything
   around them instead. */
@media (hover: none), (max-width: 700px){
  .dlg input, .dlg select, .dlg textarea{font-size:16px;padding:7px 9px}
  .dlg .opt{font-size:11.5px}
  .dlg{padding:15px 14px 14px;gap:9px}
  .dlg form{gap:8px}
  .f{gap:3px}
  .dlg fieldset{gap:4px}
  .dlg label,.dlg legend{font-size:9px;letter-spacing:.15em}
  .dlg textarea{min-height:46px}
  .dlg .note{font-size:10px;line-height:1.5}
  .dlg-head h2{font-size:11px}
  .dlg .send{padding:9px 18px;margin-top:0}
  dialog{width:min(335px,calc(100% - 56px))}
}