/* atesoraroseta — site stylesheet.
   Plain graphite ground; Bodoni Moda for the name and artwork titles, Jost for everything else.
   Static layout lives inline in each artboard. This file holds the tokens, the shared text styles,
   the interactive states (hover, focus, current page) and the responsive overrides.
   A build can lift it as-is. */

:root {
  --ground: #222221;
  --surface: #2A2A29;
  --ink: #ECEAE6;
  --ink-2: #A8A59F;
  --ink-label: #C9C6C0;
  --line: rgba(236, 234, 230, 0.12);
  --underline: rgba(236, 234, 230, 0.30);
  --veil: rgba(34, 34, 33, 0.84);
  --accent: #D9A55B;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Jost", Futura, "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-rest: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.30)) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42));
  --shadow-lift: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.28)) drop-shadow(0 34px 46px rgba(0, 0, 0, 0.56));
}

html, body { background: var(--ground); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.page { background: var(--ground); color: var(--ink); font-family: var(--sans); }
::selection { background: var(--accent); color: #161615; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Header */
.wordmark { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.35vw, 34px); letter-spacing: -0.005em; color: var(--ink); text-decoration: none; transition: opacity .3s var(--ease); }
.wordmark:hover { opacity: .7; }
.nav-link { font-family: var(--sans); font-weight: 450; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 7px; transition: color .25s var(--ease); }
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); text-decoration-line: underline; }

/* Small spaced capitals: section labels, data labels, captions on placeholders */
.label { font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }

/* Links */
.text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--underline); text-decoration-thickness: 1px; text-underline-offset: .24em; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); }
.text-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.quiet-link { color: var(--ink-2); text-decoration: none; transition: color .25s var(--ease); }
.quiet-link:hover { color: var(--ink); }

/* Obra: one work per 4:5 cell, contained at its own proportions and centred, like works hung
   on a common line. Each tile sets its frame's width and aspect-ratio inline. */
.work { display: grid; place-items: center; aspect-ratio: 4 / 5; color: inherit; text-decoration: none; }
.work-frame { position: relative; margin: 0; transition: transform .7s var(--ease); }
.work-img { filter: var(--shadow-rest); transition: filter .7s var(--ease); }
.work:hover .work-frame, .work:focus-visible .work-frame { transform: translateY(-6px); }
.work:hover .work-img, .work:focus-visible .work-img { filter: var(--shadow-lift); }
.work:focus-visible { outline: none; }
.work:focus-visible .work-frame { outline: 2px solid var(--accent); outline-offset: 10px; }

/* Torn Posters: square photo tiles, flat until hovered. */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.photo { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.photo:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -18px rgba(0, 0, 0, 0.7); }

/* Hover label, shared by both grids: smoked glass over the image. */
.hover-label { background: var(--veil); box-shadow: inset 0 0 0 1px rgba(236, 234, 230, 0.08); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.hover-title { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.15; color: var(--ink); }
.hover-meta { font-family: var(--sans); font-size: 12.5px; line-height: 1.45; letter-spacing: 0.02em; color: var(--ink-label); }
.work:hover .hover-label, .work:focus-visible .hover-label,
.photo:hover .hover-label { opacity: 1; transform: none; transition-delay: .06s; }

/* Artwork page: detail photos flow in masonry columns. */
.detail { break-inside: avoid; }

/* Touch screens have no hover: no label, a tap opens the artwork page. */
@media (hover: none) { .work .hover-label, .photo .hover-label { display: none; } }

@media (max-width: 1023px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: each work at full width in its own proportions; the menu fits on one row. */
@media (max-width: 640px) {
  .work { display: block; aspect-ratio: auto; }
  .work-frame { width: 100% !important; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nav-link { letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .work-frame, .work-img, .photo, .hover-label { transition: opacity .2s linear; }
  .work:hover .work-frame, .work:focus-visible .work-frame,
  .photo:hover, .hover-label { transform: none; }
}