/* GABRIEL NEWTON VISUAL — site styles
   Display face: Jost (stand-in for futura-pt). Body: Mulish (stand-in for proxima-nova).
   Design tokens in :root. */

:root {
  --ink:    #121212;
  --text:   #4a4a4a;
  --muted:  #8a8a8a;
  --paper:  #ffffff;
  --line:   rgba(18,18,18,.12);
  --accent: #121212;

  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --body: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --sidebar: 14rem;
  --gutter: clamp(1.25rem, 3.5vw, 2.75rem);
  --header-h: 3.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--body); font-size: .95rem; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink); padding:.75rem 1rem; }
.skip-link:focus { left:0; }

/* ---------- wordmark ---------- */
.wordmark {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; line-height: 1.15; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink);
}
.wordmark a { text-decoration: none; display: block; }

/* ---------- mobile top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(255,255,255,.95); backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.menu-toggle { width:2.5rem; height:2.5rem; display:grid; place-content:center; gap:5px;
  background:none; border:0; padding:0; cursor:pointer; }
.menu-toggle span { display:block; width:22px; height:2px; background:var(--ink);
  transition: transform .25s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span { background:#fff; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- nav ---------- */
.site-nav { position: fixed; inset: 0; z-index: 90; visibility: hidden;
  transition: visibility .3s ease; }
.site-nav[data-open="true"] { visibility: visible; }
.site-nav__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .3s ease; }
.site-nav[data-open="true"] .site-nav__backdrop { opacity:1; }
.site-nav__panel {
  position:absolute; top:0; bottom:0; right:0; width:min(84vw, 18rem);
  background: var(--ink); display:grid; place-content:center;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.site-nav[data-open="true"] .site-nav__panel { transform:none; }
.site-nav ul { list-style:none; margin:0; padding:0; text-align:center; }
.site-nav li + li { margin-top:.4rem; }
.site-nav a { display:block; padding:.4rem 1.5rem; font-family: var(--body);
  font-size:1.05rem; font-weight:600; color:rgba(255,255,255,.72); text-decoration:none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:#fff; }

/* ---------- desktop: fixed left sidebar ---------- */
@media (min-width: 64rem) {
  .topbar { display: none; }
  .site-nav {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar);
    visibility: visible; padding: var(--gutter); overflow-y: auto;
    background: var(--paper); border-right: 1px solid var(--line);
    display: block;
  }
  .site-nav__backdrop { display: none; }
  .site-nav__panel {
    position: static; width: auto; background: none; transform: none;
    display: block; overflow: visible;
  }
  .site-nav .wordmark { margin-bottom: 2rem; font-size: 1.15rem; }
  .site-nav ul { text-align: left; }
  .site-nav li + li { margin-top: 0; }
  .site-nav a { padding: .18rem 0; font-size: .82rem; font-weight: 500; color: var(--muted); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
  .site-nav .nav-gap { height: 1rem; }
  .page { margin-left: var(--sidebar); }
}
.site-nav .wordmark { display: none; }
@media (min-width: 64rem) { .site-nav .wordmark { display: block; } }

/* ---------- page shell ---------- */
.page { padding-top: var(--header-h); }
@media (min-width: 64rem) { .page { padding-top: 0; } }
.section { padding: var(--gutter); }
.section--text { max-width: 42rem; }
@media (min-width: 64rem) { .section { padding: calc(var(--gutter) * 1.5) var(--gutter); } }

h1 { font-family: var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink); font-size: clamp(1.1rem,2.6vw,1.4rem);
  margin: 0 0 1.5rem; }
h2 { font-family: var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink); font-size:1rem; margin:2.5rem 0 1rem; }
p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
.lede { font-size: 1.05rem; }

/* ---------- galleries ---------- */
/* masonry via CSS columns — the work is irregularly shaped found wood, so a
   fixed grid leaves big gaps. Columns pack tight and keep true proportions. */
.grid { list-style:none; margin:0; padding:0;
  columns: 15rem 4;
  column-gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.grid > li { break-inside: avoid; -webkit-column-break-inside: avoid;
  page-break-inside: avoid; display: block;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2.25rem); }
.grid--dense { columns: 11rem 6; column-gap: clamp(.75rem, 1.5vw, 1.25rem); }
.grid--dense > li { margin-bottom: clamp(.75rem, 1.5vw, 1.25rem); }
.grid figure { margin:0; }
.grid img { width:100%; background: #f2f2f2; }
.grid figcaption { margin-top:.6rem; font-size:.82rem; line-height:1.5; color:var(--muted); }
.grid .t { display:block; color:var(--ink); font-weight:600; }
.grid .meta { display:block; }
.grid .status { display:inline-block; margin-top:.15rem; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--line); padding:.05rem .4rem; }

/* ---------- lists ---------- */
.linklist { list-style:none; margin:0; padding:0; }
.linklist li { padding:.4rem 0; border-bottom:1px solid var(--line); }
.linklist a { text-decoration:none; }
.linklist a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- footer ---------- */
.site-footer { padding: calc(var(--gutter) * 2) var(--gutter);
  border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }
.site-footer a { color: var(--text); }
.site-footer ul { list-style:none; margin:0 0 1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:1.25rem; }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }