/* Styles for the portfolio (catalogue design) */
:root { --paper: #f1eee7; --ink: #121212; --red: #e0341b; --soft: #77736b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Never let anything make the page wider than the screen (no sideways dragging on phones).
   "clip" keeps the sticky menu working; "hidden" is the fallback for older browsers. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.6 "IBM Plex Sans", system-ui, sans-serif; }
.mono { font-family: "IBM Plex Mono", monospace; }

header { padding: 20px clamp(16px, 3vw, 40px) 0; }
.topbar { display: flex; justify-content: space-between; gap: 16px; font: 500 12px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 12px; flex-wrap: wrap; }
.topbar a { color: inherit; }
header h1 { font: 400 clamp(64px, 17vw, 300px)/.82 Anton, Impact, sans-serif; text-transform: uppercase; margin: 22px 0 0; letter-spacing: -.01em; }
header h1 span { color: var(--red); }
.sub { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; border-top: 2px solid var(--ink); margin-top: 18px; padding: 14px 0 0; }
.sub p { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.45; }
.toggle { display: flex; border: 2px solid var(--ink); }
.toggle button { font: 500 12px "IBM Plex Mono", monospace; text-transform: uppercase; background: none; border: 0; padding: 9px 16px; cursor: pointer; color: var(--ink); }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.years-bar { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 2px solid var(--ink); display: flex; overflow-x: auto; scrollbar-width: none; margin-top: 40px; padding: 0 clamp(16px, 3vw, 40px); }
.years-bar a { font: 500 13px "IBM Plex Mono", monospace; color: var(--ink); text-decoration: none; padding: 12px 14px; border-right: 1px solid #c9c4ba; white-space: nowrap; }
.years-bar a:first-child { border-left: 1px solid #c9c4ba; }
.years-bar a.on, .years-bar a:hover { background: var(--red); color: #fff; }

main { padding: 0 clamp(16px, 3vw, 40px); }
section.year { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); border-bottom: 2px solid var(--ink); padding: 32px 0 56px; scroll-margin-top: 44px; }
.year-label { position: sticky; top: 64px; align-self: start; }
.year-label h2 { font: 400 clamp(64px, 9vw, 150px)/.85 Anton, sans-serif; margin: 0; }
.year-label p { font: 500 12px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; margin: 10px 0 0; color: var(--soft); }

/* True-scale wall: every painting sized by its real cm (--k = px per cm, set in catalogue.js) */
:root { --k: 3px; }
.wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(36px, 5vw, 80px) clamp(28px, 4vw, 64px); padding: 24px 0 8px; }
.art { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; cursor: zoom-in; max-width: 100%; }
.art .canvas { position: relative; width: calc(var(--k) * var(--cw)); max-width: 100%; aspect-ratio: var(--ar); background: #e2ded5;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25), 3px 3px 0 rgba(0,0,0,.06), 6px 14px 22px rgba(40,30,20,.22); transition: transform .3s, box-shadow .3s; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art:hover .canvas { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.art .no { position: absolute; top: 0; left: 0; background: var(--ink); color: var(--paper); font: 500 10.5px "IBM Plex Mono", monospace; padding: 3px 6px; }
.art:hover .no { background: var(--red); }
.art .cap { margin-top: 12px; text-align: center; line-height: 1.3; max-width: max(150px, calc(var(--k) * var(--cw))); }
.art h3 { font: 500 13.5px/1.3 "IBM Plex Sans", sans-serif; margin: 0 0 2px; }
.art small { font: 400 11px "IBM Plex Mono", monospace; color: var(--soft); }
.scale-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ruler { display: flex; align-items: center; gap: 8px; font: 500 11px "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.ruler i { display: block; height: 8px; width: calc(var(--k) * 50); border: 2px solid var(--ink); border-top: 0; }
.zoom { display: flex; align-items: center; gap: 8px; font: 500 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.zoom input { width: 120px; accent-color: var(--red); }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
td { padding: 10px 8px; border-top: 1px solid #cfc9be; vertical-align: middle; }
tr { cursor: zoom-in; }
tr:hover td { background: var(--ink); color: var(--paper); }
td.n, td.d { font: 400 12px "IBM Plex Mono", monospace; color: var(--soft); white-space: nowrap; }
tr:hover td.n, tr:hover td.d { color: #bbb; }
td.th { width: 64px; padding: 4px 8px; }
td.th img { width: 56px; height: 56px; object-fit: cover; display: block; }
td.t { font-weight: 500; }
body.list .wall, body.list .scale-tools .ruler, body.list .scale-tools .zoom { display: none; } body:not(.list) table { display: none; }
.peek { position: fixed; pointer-events: none; z-index: 50; width: 300px; opacity: 0; transition: opacity .15s; box-shadow: 8px 8px 0 var(--ink); }
.peek.on { opacity: 1; }
@media (max-width: 700px) {
  section.year { grid-template-columns: minmax(0, 1fr); }
  .year-label { position: static; display: flex; align-items: baseline; gap: 14px; }
  .sub { grid-template-columns: 1fr; }
  td.d { display: none; }
  .peek { display: none; }
}

footer.about { padding: 80px clamp(16px, 3vw, 40px) 140px; background: var(--ink); color: var(--paper); margin-top: 80px; }
.about-inner { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 40px); align-items: start; }
.about-portrait { grid-column: 2; grid-row: 1; width: 100%; display: block; filter: grayscale(1) contrast(1.1); }
.about-text { grid-column: 3; display: contents; }
.about-kicker { grid-column: 1; grid-row: 1; font: 500 12px "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--red); margin: 0; }
.about-name { grid-column: 1 / -1; grid-row: 2; font: 400 clamp(56px, 11vw, 180px)/.85 Anton, sans-serif; text-transform: uppercase; margin: 32px 0 0; }
.about-name span { color: var(--red); font-size: .4em; vertical-align: top; }
.about-text > p:not(.about-kicker):not(.about-sign), .about-text ul { grid-column: 3; margin: 0; color: #d2cec6; }
.about-text ul { padding-left: 18px; }
.about-text > p:nth-of-type(2) { font-size: 1.25em; line-height: 1.45; color: var(--paper); }
.about-sign { grid-column: 1 / -1; font: 400 12px "IBM Plex Mono", monospace; color: #77736b; margin: 24px 0 0; }
.about-inner { grid-auto-flow: row dense; row-gap: 16px; }
@media (max-width: 760px) { .about-inner { grid-template-columns: 1fr; } .about-portrait, .about-text > *, .about-kicker, .about-name { grid-column: 1 !important; grid-row: auto !important; } }

/* Brand-name headers (LMART / LAMOART): one word, sized to fill the width */
header h1.brand { font-size: var(--brand-size, 26vw); line-height: .8; margin-top: 18px; white-space: nowrap; max-width: 100%; overflow: hidden; }
.byline { font: 500 13px/1.4 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 0; }

/* Contact (very bottom) */
footer.about { padding-bottom: 96px; }
section.contact { background: var(--red); color: #fff; padding: clamp(56px, 9vw, 110px) clamp(16px, 3vw, 40px) 120px; scroll-margin-top: 44px; }
.contact-kicker { font: 500 12px "IBM Plex Mono", monospace; text-transform: uppercase; margin: 0; }
.contact h2 { font: 400 clamp(56px, 12vw, 200px)/.85 Anton, sans-serif; text-transform: uppercase; margin: 14px 0 0; }
.contact-note { font-size: 17px; margin: 18px 0 0; max-width: 520px; }
.contact-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); border-top: 2px solid #fff; margin-top: 48px; }
.contact-links a { color: #fff; text-decoration: none; font: 400 clamp(22px, 3vw, 40px)/1.2 Anton, sans-serif; letter-spacing: .01em; padding: 22px 0; border-bottom: 2px solid #fff; overflow-wrap: anywhere; transition: padding .25s; }
.contact-links a:hover { padding-left: 12px; background: rgba(0,0,0,.08); }
.contact-links small { display: block; font: 500 12px "IBM Plex Mono", monospace; text-transform: uppercase; margin-bottom: 6px; opacity: .85; }
.contact-foot { font: 400 12px "IBM Plex Mono", monospace; margin: 48px 0 0; opacity: .8; }