/* ============================================================================
   yoeltordjmanart — ART STORE 613's design system, set on white.

   The tokens, the type, the measures and the rhythm are the store's. Two
   things change. The ground is white, as asked. And there are no prices,
   no formats, no availability and no buttons that buy — a painting page here
   is the painting and its title, so the stylesheet has nothing to say about
   commerce and deliberately carries none of it.

   The accents are the artist's own logo colours, navy #000060 and cyan
   #00ccfc. Nothing here is an invented brand colour.
   ========================================================================= */
:root{
  --paper:#ffffff;
  --stage:#f4f1ea;          /* neutral ground behind a painting */
  --ink:#16151c;
  --ink-soft:#5e5b56;
  --ink-faint:#8b8781;
  --navy:#000060;
  --cyan:#00ccfc;
  --line:rgba(22,21,28,.11);
  --line-2:rgba(22,21,28,.06);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --t-display:clamp(2.4rem,6.4vw,4.6rem);
  --t-h1:clamp(1.9rem,4vw,3rem);
  --t-cap:.82rem;
  --t-micro:.68rem;
  --track:.2em;
  --page:1320px;
  --gut:clamp(1.15rem,4vw,3.4rem);
  --sec:clamp(3rem,7vw,5.5rem);
  --dur:600ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* height:auto is not optional. Every image here carries width and height
   attributes so the browser can reserve its space; CSS that constrains only
   the width would leave the attribute height in force and stretch it. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}

/* ── the head ─────────────────────────────────────────────────────────── */
.head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  padding:1.1rem var(--gut);border-bottom:1px solid var(--line-2);
}
.head .mark img{height:38px;width:auto}
.head nav{display:flex;gap:clamp(1rem,3vw,2.2rem)}
.head nav a{
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-soft);padding-block:.35rem;position:relative;
  transition:color var(--dur) var(--ease);
}
.head nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.head nav a:hover{color:var(--ink)}
.head nav a:hover::after,.head nav a[aria-current]::after{transform:scaleX(1)}
.head nav a[aria-current]{color:var(--ink)}

/* ── the home mosaic ──────────────────────────────────────────────────────
   Seventeen collections, all of them on one screen, separated by nothing but
   a hairline of the page's own white.

   The cells are square and each cover is the most square work in its
   collection — every cycle has one at a true 1:1 — so object-fit is contain
   and yet the picture fills its cell exactly. Nothing is cropped to make the
   grid tidy. That is the whole reason the covers are chosen this way.

   The width is derived from the height: three rows must fit the viewport, so
   the grid is at most (available height / 3) x columns wide. Sizing it the
   other way round is what makes a mosaic like this fall off the screen. */
.home{
  --cols:6;
  --gap:5px;
  --chrome:clamp(12.5rem,26vh,16rem); /* head, footer, and the air around them */
  padding:var(--gap) var(--gap) 0;
}
.mosaic{
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--gap);
  width:min(100%, calc(((100svh - var(--chrome)) / 3) * var(--cols)));
  margin-inline:auto;
}
.mosaic .tile{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:var(--paper);
}
/* seventeen tiles in rows of six leave the last row short; starting it one
   column in centres those five under the twelve above them */
@media(min-width:1080px){
  .mosaic .tile:nth-child(13){grid-column-start:2}
}
.mosaic .tile img{
  width:100%;height:100%;object-fit:contain;
  transition:transform 1.4s var(--ease);
}
.mosaic .tile:hover img,
.mosaic .tile:focus-visible img{transform:scale(1.045)}

/* the name, on hover — a veil of the page's own white rising from the foot */
.mosaic .cap{
  position:absolute;inset-inline:0;bottom:0;
  display:flex;flex-direction:column;gap:.15rem;
  padding:1.6rem .85rem .8rem;
  background:linear-gradient(to top,rgba(255,255,255,.97) 38%,rgba(255,255,255,0));
  opacity:0;transform:translateY(.5rem);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.mosaic .tile:hover .cap,
.mosaic .tile:focus-visible .cap{opacity:1;transform:none}
.mosaic .cname{
  font-family:var(--serif);font-size:clamp(.95rem,1.5vw,1.2rem);
  line-height:1.15;color:var(--ink);
}
.mosaic .cnum{
  font-size:.6rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-faint);
}

/* The arrival: in from the side it belongs to, settling out of a slight
   enlargement, each tile a little after the one before it.
   
   This is a keyframe animation and not a class toggled by script, and the
   hidden state lives ONLY inside the keyframes. That matters twice over. A
   first draft set opacity:0 on the tile and waited for JavaScript to add a
   class — so anything that stopped that script left the page blank, and the
   reduced-motion rule below, which switches animation off, would have left
   it blank too. With the start state inside the keyframes and fill-mode
   both, a tile that never animates is simply a tile that is there. */
@keyframes tile-in{
  from{opacity:0;transform:translateX(calc(var(--dir,1) * 3.5rem)) scale(1.07)}
  to  {opacity:1;transform:none}
}
.mosaic .tile{
  animation:tile-in .9s var(--ease) calc(var(--i,0) * 42ms) both;
}

@media(max-width:1079px){
  .home{--cols:4}
  .mosaic{width:100%}
}
@media(max-width:700px){
  .home{--cols:2;--gap:4px}
}

/* ── the collection pages ────────────────────────────────────────────────
   Restored. Replacing the home-page block earlier took .grid and .stage out
   with it, and without a stage every painting rendered at its natural size —
   one picture filling the whole screen. A page that is generated is only as
   safe as the rules it depends on still existing.

   A painting is never cropped to make a grid tidy. Each cell has a stage of
   fixed height and the work sits inside it at its own proportion, which is
   why object-fit here is contain and never cover. */
.grid{
  display:grid;gap:clamp(1.1rem,2.6vw,2.2rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,18vw,210px),1fr));
  padding-bottom:var(--sec);
}
.grid .stage{
  display:flex;align-items:center;justify-content:center;
  background:var(--stage);height:clamp(190px,30vw,300px);overflow:hidden;
}
.grid .stage img{
  max-height:100%;width:auto;object-fit:contain;
  transition:transform 1.1s var(--ease);
}
.grid .tile{display:flex;flex-direction:column;gap:.7rem;aspect-ratio:auto}
.grid .tile:hover .stage img{transform:scale(1.03)}
.grid .tname{font-family:var(--serif);font-size:1.1rem;line-height:1.2;color:var(--ink)}

.eyebrow{
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-faint);margin:var(--sec) 0 .8rem;
}
.eyebrow a:hover{color:var(--ink)}
.ctitle{
  font-family:var(--serif);font-weight:300;font-size:var(--t-h1);
  margin:0 0 clamp(2rem,4vw,3rem);letter-spacing:-.012em;
}

/* ── one painting ─────────────────────────────────────────────────────────
   The whole page. A picture, its title, and the way back. */
.one{
  max-width:960px;margin-inline:auto;padding:var(--sec) var(--gut);
  text-align:center;
}
.one figure{margin:0;display:flex;justify-content:center}
.one figure img{max-height:78vh;width:auto}
.one h1{
  font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.4rem);
  margin:clamp(1.8rem,4vw,2.8rem) 0 0;letter-spacing:-.01em;
}
.one .back{
  margin:.9rem 0 0;font-size:var(--t-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-faint);
}
.one .back a:hover{color:var(--ink)}

/* ── prose: the artist ────────────────────────────────────────────────── */
.prose{max-width:68ch;margin-inline:auto;padding:var(--sec) var(--gut)}
.prose h1{font-family:var(--serif);font-weight:300;font-size:var(--t-h1);
          margin:0 0 .6rem;letter-spacing:-.012em}
.prose .lede{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);
             line-height:1.5;color:var(--ink);margin:0 0 2.4rem}
.prose h2{font-family:var(--serif);font-weight:300;
          font-size:clamp(1.3rem,2.4vw,1.8rem);
          margin:clamp(2.4rem,5vw,3.4rem) 0 .9rem;letter-spacing:-.01em}
.prose h3{font-size:.95rem;font-weight:500;margin:1.8rem 0 .4rem}
.prose p{margin:0 0 1.05em;color:var(--ink-soft)}
.prose blockquote{
  margin:2.2rem 0;padding-inline-start:1.2rem;border-inline-start:2px solid var(--line);
  font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.5;
  color:var(--ink);
}
.prose figure{margin:2.4rem 0}
.prose figcaption{font-size:var(--t-cap);color:var(--ink-faint);margin-top:.7rem}

/* ── contact ──────────────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:1.1rem;margin-top:2rem}
.form label{display:block}
.form span{display:block;font-size:var(--t-micro);letter-spacing:var(--track);
           text-transform:uppercase;color:var(--ink-faint);margin-bottom:.45rem}
.form input,.form textarea{
  font:inherit;width:100%;padding:.75rem .9rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:0;
}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--ink);outline:none}
.form button{
  font:inherit;align-self:flex-start;cursor:pointer;
  padding:.8rem 2rem;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.form button:hover{background:var(--paper);color:var(--ink)}
.form button[disabled]{opacity:.5;cursor:default}
.note{padding:.9rem 1.1rem;border:1px solid var(--line);font-size:var(--t-cap)}
.note.ok{border-color:var(--cyan)}
.note.bad{border-color:#a8443c;color:#a8443c}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── the foot: his signature ──────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line);padding:clamp(2.6rem,6vw,4rem) var(--gut);
  text-align:center;
}
/* under the mosaic the signature closes the screen rather than opening a
   new stretch of page, so the rule above it goes and the air comes in */
.home + footer{border-top:0;padding-block:clamp(1.1rem,2.6vh,1.8rem)}
.home + footer .sig{width:min(180px,46vw)}
.home + footer p{margin-top:.9rem}
footer .sig{width:min(230px,58vw);margin:0 auto;opacity:.8}
footer p{
  margin:1.6rem 0 0;font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}