/* ==========================================================================
   DinoZie — gallery-wall system
   Structure, type and behaviour follow the Photographer design system:
   Helvetica 700 only, a colossal wordmark, a 15px-gutter masonry of framed
   tiles, 10–18px chrome, 0px radius, no shadows, gradients or motion.
   Colour follows DinoZie: Mulberry is the structural colour (in place of
   black), Gallery is the canvas, Lavender / Lime / Mulberry are the frames.
   ========================================================================== */

:root {
  /* DinoZie colours */
  --mulberry: #5F0032;
  --gallery: #EFEFEF;
  --lavender: #EAA2E5;
  --lime: #CDF77F;
  --white: #ffffff;

  /* Roles */
  --canvas: var(--gallery);
  --structure: var(--mulberry);

  /* Type — one family, one weight */
  --font: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  --weight: 700;
  --text-nav: 10px;   --leading-nav: 1;     --tracking-nav: -0.2px;
  --text-sm: 14px;    --leading-sm: 1.4;
  --text-body: 18px;  --leading-body: 1.5;  --tracking-body: -0.36px;
  --leading-display: 0.85;
  --tracking-display: -0.02em;

  /* Spacing — 6px base */
  --s-8: 8px;
  --s-15: 15px;
  --s-43: 43px;
  --section-gap: 120px;

  --hair: 1px solid var(--structure);
  --rail-w: 40vw;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--structure);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, p, ol, figure { margin: 0; padding: 0; font-weight: var(--weight); font-size: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
b { font-weight: var(--weight); }
::selection { background: var(--lime); color: var(--structure); }
:focus-visible { outline: 1px solid var(--structure); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── Type roles ───────── */
.label {
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.body  { font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.small { font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: 0; }
.muted { opacity: .6; }

/* Outlined link / action — the only interactive element type.
   Bare text, a 1px chromatic border underneath, no fill, no padding. */
.action {
  display: inline;
  font: inherit;
  color: var(--structure);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--structure);
  padding: 0;
  cursor: pointer;
}
.action-alt { border-bottom-color: var(--lavender); }
.action:hover { border-bottom-color: var(--lavender); }
.action-alt:hover { border-bottom-color: var(--structure); }

/* ───────── Wordmark rail ───────── */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  padding: var(--s-43);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}
.badge img { width: 43px; height: 43px; border-radius: 50%; }
.wordmark {
  font-size: calc((var(--rail-w) - 2 * var(--s-43)) / 2.3);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-left: -0.04em;
}
.wordmark > span:not(.sr-only) { display: block; }
.rail-line { font-size: var(--text-body); margin-top: var(--s-43); max-width: 22ch; }
.rail-foot .action { display: inline-block; margin-top: var(--s-15); font-size: var(--text-body); }

/* ───────── Navigation — bare typographic links, top right ───────── */
.nav {
  position: absolute;
  top: var(--s-43);
  right: var(--s-43);
  display: flex;
  gap: var(--s-15);
  z-index: 2;
}
.nav a {
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--lavender);
}
.nav a:hover { border-bottom-color: var(--structure); }

/* ───────── The wall ───────── */
.wall {
  margin-left: var(--rail-w);
  padding: calc(var(--s-43) * 2) var(--s-43) var(--s-43) 0;
}
.masonry { columns: 2; column-gap: var(--s-15); }
.masonry > * { break-inside: avoid; margin-bottom: var(--s-15); }
.masonry + .break, .break + .masonry, .masonry + .contact { margin-top: var(--section-gap); }

/* Masonry tile — chromatic hairline frame, no padding, no radius */
.tile { border: 1px solid var(--frame); background: var(--frame); }
.frame-lavender { --frame: var(--lavender); }
.frame-lime     { --frame: var(--lime); }
.frame-mulberry { --frame: var(--mulberry); }
.tile-img { width: 100%; }

/* Caption — 10px, directly below, underlined in the frame colour */
.tile .cap {
  display: block;
  background: var(--canvas);
  padding-top: var(--s-8);
  font-size: var(--text-nav);
  line-height: 1.3;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.cap::after { content: ""; display: block; height: 1px; margin-top: var(--s-8); background: var(--frame); }
.tile:has(.cap) { border-bottom: 0; }

/* Ad tile — each one is a real ad format, filled flat */
.ad { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-15); overflow: hidden; }
.ad-916 { aspect-ratio: 9 / 16; }
.ad-45  { aspect-ratio: 4 / 5; }
.ad-11  { aspect-ratio: 1 / 1; }
.fill-lavender { background: var(--lavender); }
.fill-lime     { background: var(--lime); }
.fill-mulberry { background: var(--mulberry); }
.fill-white    { background: var(--white); }
.prop { position: absolute; top: 14%; left: 50%; width: 54%; transform: translateX(-50%); }
.ad-11 .prop { top: 6%; width: 50%; }
.hook {
  position: relative;
  align-self: flex-start;
  max-width: 90%;
  background: var(--white);
  color: var(--structure);
  font-size: var(--text-sm);
  line-height: 1.2;
  letter-spacing: 0;
  padding: 6px 8px;
}

/* Text blocks — bare type on the wall, a hairline above */
.text-block { border-top: var(--hair); padding-top: var(--s-15); padding-bottom: var(--s-43); }
.text-block .label { display: block; margin-bottom: var(--s-15); }
.links { margin-top: var(--s-15); display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-15); }
.list { list-style: none; display: grid; gap: var(--s-15); font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: 0; }
.list-num { counter-reset: n; }
.list-num li { counter-increment: n; position: relative; padding-left: 24px; }
.list-num li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 4px; font-size: var(--text-nav); line-height: 1; }

details { border-bottom: var(--hair); }
details:first-of-type { border-top: var(--hair); }
summary { list-style: none; cursor: pointer; padding: var(--s-15) 24px var(--s-15) 0; position: relative; font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: 0; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: var(--s-15); }
details[open] summary::after { content: "–"; }
details p { font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: 0; padding-bottom: var(--s-15); opacity: .8; }

/* Full-width image break — no border, no caption chrome */
.break img { width: 100%; }

/* ───────── Contact ───────── */
.contact { border-top: var(--hair); padding-top: var(--s-15); }
.contact-h { font-size: var(--text-body); margin-bottom: var(--s-43); }
.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-43) var(--s-15); }
.contact-direct { display: grid; gap: var(--s-15); align-content: start; }
.contact-direct .small { opacity: .8; max-width: 32ch; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-43) var(--s-15); }
.form .full, .form fieldset { grid-column: 1 / -1; }
.form label { display: grid; gap: var(--s-8); }
.form input[type=text], .form input[type=email], .form select, .form textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--structure);
  background: transparent;
  border: 0;
  border-bottom: var(--hair);
  padding: var(--s-8) 0;
  appearance: none;
  -webkit-appearance: none;
}
.form select { cursor: pointer; }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--lavender); }
.form [aria-invalid=true] { border-bottom: 1px solid #c4002a; }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-15); }
.form legend { padding: 0; margin-bottom: var(--s-15); float: left; width: 100%; }
.check { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: var(--s-8) !important; font-size: var(--text-sm); letter-spacing: 0; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin: 0; border: var(--hair); background: transparent; cursor: pointer; }
.check input:checked { background: var(--structure); }
.submit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-15); }
.submit-row .action { font-size: var(--text-body); }

/* ───────── Footer ───────── */
.foot { margin-top: var(--section-gap); padding-top: var(--s-15); border-top: var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-15); }

/* ───────── Responsive ───────── */
@media (min-width: 1700px) {
  .masonry { columns: 3; }
}

@media (max-width: 900px) {
  :root { --rail-w: 100vw; }
  .rail { position: static; width: auto; padding: var(--s-15); gap: var(--s-43); }
  .rail-foot { display: contents; }
  .wordmark { font-size: calc((100vw - 2 * var(--s-15)) / 3.75); white-space: nowrap; }
  .wordmark > span:not(.sr-only) { display: inline; }
  .rail-line { margin-top: 0; }
  .rail { display: grid; justify-items: start; }
  .nav { position: absolute; top: var(--s-15); right: var(--s-15); top: 28px; flex-wrap: wrap; justify-content: flex-end; max-width: 70vw; gap: var(--s-8) var(--s-15); }
  .nav a { font-size: 12px; padding: 6px 0 3px; }
  .wall { margin-left: 0; padding: var(--s-43) var(--s-15) var(--s-15); }
  .contact-grid, .form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .masonry { columns: 1; }
}