/* HAND UNKNOWN — gocho.app
   One screen. Painting left, text right. Paper ground, because 76 white-ground
   canvases on a dark site become glowing rectangles and the pale works vanish. */
:root{
  /* DARK. The work is black on white, so the canvas becomes the light source and the
     room falls away. Surface is a shade above ground so a white-ground painting still
     reads as an object sitting on something, not a hole cut in the page. */
  --ground:#0E0E0D; --surface:#171716; --ink:#F2F1EE; --dim:#9C978F;
  --rule:#2C2C29; --accent:#93A9E8; --scrim:rgba(8,8,7,.97);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
}
h1,h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;margin:0}
p{margin:0 0 .9em}
a{color:inherit}
.cap{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.11em;color:var(--dim)}

header{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px clamp(18px,3vw,34px);border-bottom:1px solid var(--rule);flex:0 0 auto}
.mark{font-family:"Instrument Serif",Georgia,serif;font-size:19px;letter-spacing:.01em;
  text-decoration:none;color:inherit}
.mark:hover{opacity:.75}
.mark:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
header a{font-size:13px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}

/* the split */
/* The row must be explicitly bounded. With an implicit auto row the grid can grow
   taller than the flex height, and centring inside that oversized cell pushes a
   tall canvas down and off the bottom of the screen. */
main{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);
  grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}
.stage{position:relative;background:var(--surface);display:grid;place-items:center;
  padding:clamp(20px,4vh,56px) clamp(56px,6vw,110px);min-height:0;overflow:hidden;
  border-right:1px solid var(--rule)}
/* MATTED, NOT FILLED. Letting the canvas take the whole column height makes a portrait
   painting enormous on a large display; a hard cap leaves air around it, which is how a
   picture is actually hung. */
.stage img{max-width:100%;max-height:min(72vh,760px);width:auto;height:auto;display:block;
  object-fit:contain;transition:opacity .3s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 18px 60px rgba(0,0,0,.55)}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink);
  font-size:24px;line-height:1;padding:18px 12px;cursor:pointer;opacity:.4;transition:opacity .18s}
.nav:hover,.nav:focus-visible{opacity:1}
.nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prev{left:4px}.next{right:4px}

/* text column */
.side{display:flex;flex-direction:column;gap:0;padding:clamp(20px,3vh,34px) clamp(20px,2.2vw,34px);
  overflow-y:auto;min-height:0}
.side h1{font-size:clamp(26px,2.5vw,38px);line-height:1.06;letter-spacing:-.015em;margin-bottom:.55em}
.side .body{font-size:14.5px;line-height:1.62;color:#D6D2CB;max-width:44ch}
.side .body strong{font-weight:500}
.meta{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule);display:flex;
  flex-direction:column;gap:12px}
.counter{display:flex;align-items:center;gap:12px}
.counter .bar{flex:1;height:2px;background:var(--rule);position:relative}
.counter .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);transition:width .3s ease}
.mailto{font-family:"Instrument Serif",Georgia,serif;font-size:22px;text-decoration:none;
  border-bottom:1px solid var(--accent);align-self:flex-start;line-height:1.25}
.acts{display:flex;gap:16px;flex-wrap:wrap}
.linkish{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
  font:500 11px/1.4 Inter,sans-serif;text-transform:uppercase;letter-spacing:.11em;
  border-bottom:1px solid var(--accent)}
.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.note{font-size:11.5px;line-height:1.5;color:var(--dim);max-width:46ch}

/* index overlay — the grid, only when asked for */
dialog.ix{border:0;padding:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;
  background:var(--ground);color:var(--ink)}
dialog.ix::backdrop{background:var(--ground)}
.ix-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(18px,3vw,34px);border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--ground);z-index:2}
.ix-scroll{overflow-y:auto;height:calc(100vh - 57px);padding:22px clamp(18px,3vw,34px) 60px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
/* NEVER object-fit:cover HERE. These are paintings — cover crops each one to a band
   through its middle, which on a tall canvas throws away most of the work. Contain,
   inside a fixed box, so the tiles line up and every painting stays whole. */
.grid button{border:1px solid var(--rule);background:var(--surface);padding:6px;cursor:pointer;
  display:grid;place-items:center;aspect-ratio:3/4}
.grid img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.grid button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:900px){
  body{overflow:auto}
  /* The desktop fix bounds the grid row and clips overflow so a tall canvas centres
     correctly. Stacked on a phone that clipping hides the headline and the whole text
     column, so both must be released here. */
  main{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:visible}
  .stage{border-right:0;border-bottom:1px solid var(--rule);min-height:54vh;padding:18px 40px;overflow:visible}
  .stage img{max-height:min(56vh,560px)}
  .side{overflow:visible}
  .meta{margin-top:24px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}

/* ── Fullscreen viewer ───────────────────────────────────────────────────── */
.stage img{cursor:zoom-in}
/* 100vh on iOS Safari is the height WITHOUT the browser chrome, so the top and bottom
   of this layer end up underneath the URL bar and the toolbar — which is exactly where
   the close button was hiding. dvh tracks the visible viewport; vh stays as a fallback. */
dialog.fs{border:0;padding:0;width:100vw;height:100vh;height:100dvh;
  max-width:100vw;max-height:100vh;max-height:100dvh;
  background:#0C0C0B;color:#F2F1EE;overflow:hidden}
dialog.fs::backdrop{background:#0C0C0B}
.fs-stage{position:relative;display:grid;place-items:center;width:100%;height:100%;
  padding:calc(env(safe-area-inset-top, 0px) + 64px) clamp(8px,2vw,28px)
          calc(env(safe-area-inset-bottom, 0px) + 64px);touch-action:pan-y}
.fs-stage img{max-width:96vw;max-height:82vh;max-height:82dvh;width:auto;height:auto;display:block;
  transition:opacity .28s ease;user-select:none;-webkit-user-drag:none}
.fs-bar{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:14px clamp(14px,4vw,34px);
  background:linear-gradient(to top,rgba(12,12,11,.85),transparent)}
.fs-bar .cap{color:#B9B6B0}
.fs-btn{background:none;border:0;color:#F2F1EE;font:500 12px/1 Inter,sans-serif;
  letter-spacing:.10em;text-transform:uppercase;cursor:pointer;padding:12px 6px}
.fs-btn.acc{color:#9DB0E8;border-bottom:1px solid #9DB0E8}
.fs-btn:focus-visible{outline:2px solid #9DB0E8;outline-offset:2px}
/* A real X, big enough to hit on a phone, with a disc behind it so it stays visible
   over a light canvas as well as over the dark ground. */
.fs-close{position:absolute;z-index:5;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  right:calc(env(safe-area-inset-right, 0px) + 14px);
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#FFF;font:300 28px/1 Inter,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  display:grid;place-items:center;transition:background .18s ease,transform .18s ease}
.fs-close:hover{background:rgba(255,255,255,.20)}
.fs-close:active{transform:scale(.94)}
.fs-close:focus-visible{outline:2px solid #9DB0E8;outline-offset:3px}
/* Same disc treatment as the close button, so they stay legible over a white canvas
   as well as over the dark ground. Present at every size — swipe is a shortcut for
   people who know it, not a replacement for a visible control. */
.fs-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;padding:0;
  display:grid;place-items:center;font-size:26px;line-height:1;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#FFF;box-shadow:0 2px 10px rgba(0,0,0,.5);opacity:1;
  transition:background .18s ease,transform .18s ease}
.fs-nav:hover,.fs-nav:focus-visible{background:rgba(0,0,0,.75)}
.fs-nav:active{transform:translateY(-50%) scale(.94)}
.fs-prev{left:calc(env(safe-area-inset-left, 0px) + 14px)}
.fs-next{right:calc(env(safe-area-inset-right, 0px) + 14px)}
@media (max-width:767px){
  /* Bottom corners: in thumb reach, and clear of the middle of the painting. */
  .fs-nav{top:auto;transform:none;bottom:calc(env(safe-area-inset-bottom, 0px) + 64px);
    width:56px;height:56px;font-size:27px}
  .fs-nav:active{transform:scale(.94)}
}
@media (prefers-reduced-motion:reduce){ .fs-stage img{transition:none} }

/* ── Language switching ──────────────────────────────────────────────────
   Both languages ship in the HTML and CSS hides one. That way the page is
   correct on first paint with no flash, and it still reads if JS never runs. */
html:not(.es) .lx-es{display:none}
html.es .lx-en{display:none}
.lang{background:none;border:0;padding:0 0 2px;margin-right:18px;cursor:pointer;
  color:var(--dim);font:500 12px/1 Inter,sans-serif;letter-spacing:.10em;
  border-bottom:1px solid var(--rule);transition:color .18s,border-color .18s}
.lang:hover{color:var(--ink);border-color:var(--accent)}
.lang:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
header .right{display:flex;align-items:baseline}