/*
  The look of artoflauramancini.com.

  Laura: this is the file to change if you want the site to look different —
  colors, sizes, spacing. Just ask Claude for what you want, like
  "make the pictures bigger" or "use a lighter background".

  The sizes below are deliberately generous and the contrast deliberately
  strong, so the site stays easy to read.
*/

/* Instrument Serif, from Google Fonts. The font files are kept in this repo
   rather than loaded from Google, so the site loads faster, doesn't tell
   Google who's visiting, and looks identical when previewed offline. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #000000;
  --fg: #ffffff;
  --fg-dim: #b9b9b9;
  --rule: rgba(255, 255, 255, 0.22);
  --accent: #ffffff;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step: 1.25rem;
  --max-width: 1600px;

  /* How wide each thumbnail is. Raise for bigger pictures. */
  --thumb-size: 260px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --fg: #111111;
    --fg-dim: #444444;
    --rule: rgba(0, 0, 0, 0.2);
    --accent: #111111;
  }
}

* {
  box-sizing: border-box;
}

html {
  /* Large base size — everything else scales from this. */
  font-size: 18px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--fg-dim);
}

/* Always show a clear focus ring — essential for keyboard use. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--step);
  top: var(--step);
  z-index: 100;
  background: var(--fg);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
}

/* ------------------------------------------------------------- header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--step);
  padding: calc(var(--step) * 1.6) var(--step);
  max-width: var(--max-width);
  margin: 0 auto;
}

.identity {
  text-decoration: none;
  color: inherit;
}

.identity h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.1;
}

.location {
  margin: 0.3rem 0 0;
  font-size: 1rem;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header nav a,
.site-header nav .link {
  font-size: 1rem;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0.35rem 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-header nav .link:hover,
.site-header nav a:hover {
  color: var(--fg-dim);
}

/* ------------------------------------------------------- statement panel */

.panel {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--step);
}

.panel[hidden] {
  display: none;
}

.panel-inner {
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: calc(var(--step) * 1.5) 3rem calc(var(--step) * 1.5) 0;
  max-width: 46em;
}

.panel-inner p {
  margin: 0 0 1em;
  font-size: 1.15rem;
  line-height: 1.7;
}

.panel-inner p:last-child {
  margin-bottom: 0;
}

.panel-close {
  position: absolute;
  top: var(--step);
  right: 0;
  background: none;
  border: 0;
  color: var(--fg);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
}

/* --------------------------------------------------------- collections */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--step) calc(var(--step) * 3);
}

.collection {
  padding-top: calc(var(--step) * 2.5);
}

.collection h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 0.2em;
}

.collection h2 a {
  text-decoration: none;
}

.collection h2 a:hover {
  text-decoration: underline;
}

.collection-description {
  margin: 0 0 1rem;
  color: var(--fg-dim);
  max-width: 46em;
  font-size: 1.05rem;
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-size), 1fr));
  gap: var(--step);
  /* Let each row size to its own artwork rather than stretching. */
  align-items: start;
}

.piece {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* Artwork is never cropped — every piece shows at its true proportions. */
.piece img {
  width: 100%;
  height: auto;
  background: var(--rule);
  transition: opacity 0.15s ease;
}

.piece:hover img {
  opacity: 0.78;
}

.back {
  padding-top: calc(var(--step) * 2);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------ lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--step);
  gap: var(--step);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step);
  flex-wrap: wrap;
}

.lightbox-caption {
  font-size: 1.05rem;
  color: var(--fg-dim);
}

.lightbox-caption strong {
  color: var(--fg);
  font-weight: 400;
  display: block;
  font-size: 1.2rem;
}

.lightbox-controls {
  display: flex;
  gap: 0.6rem;
}

/* Big, obvious, easy-to-hit controls. */
.lightbox-controls button,
.lightbox-close {
  background: none;
  border: 2px solid var(--rule);
  color: var(--fg);
  font-family: inherit;
  font-size: 1.1rem;
  min-width: 3.4rem;
  min-height: 3.4rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 2px;
}

.lightbox-controls button:hover,
.lightbox-close:hover {
  border-color: var(--fg);
}

.lightbox-controls button[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ------------------------------------------------------------- footer */

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--step);
  border-top: 1px solid var(--rule);
  color: var(--fg-dim);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 700px) {
  :root {
    --thumb-size: 150px;
  }

  html {
    font-size: 17px;
  }

  .identity h1 {
    font-size: 2.1rem;
  }

  .site-header {
    padding: var(--step);
  }
}

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