/*
  Typography matches the original isabellefarahnick.be stylesheet
  (design.css): nav/headings were set in a self-hosted 'VogueSansRegular'
  falling back to Georgia/Times New Roman/Times/serif; body copy in
  'VogueSerifSmallRegular' with the same serif fallback; the site default
  was Arial/Verdana/sans-serif. The original webfont files themselves were
  never successfully archived (every crawl of /fonts/*.woff etc. hit a 404
  on the live server), so we declare the same family names — in case the
  real files ever turn up — and otherwise render on the exact same
  fallback stack the original site's visitors saw.
*/
:root{
  --paper:#ffffff;
  --ink:#000000;
  --ink-soft:#666666;
  --rule:#e7e3da;
  --font-heading:'VogueSansRegular', Georgia, "Times New Roman", Times, serif;
  --font-body:'VogueSerifSmallRegular', Georgia, "Times New Roman", Times, serif;
  --font-base:Arial, Verdana, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

header{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:64px 24px 12px;
}
header a{ display:block; }
header img{
  width:230px;
  height:auto;
  display:block;
}
header .tagline{
  margin:18px 0 0;
  font-family:var(--font-heading);
  font-size:18px;
  line-height:22px;
  color:var(--ink);
  text-align:center;
}
/* iOS/Android auto-detect phone-number-like text and turn it into a blue
   underlined tel: link. The format-detection meta tag stops most of this;
   this is a belt-and-braces override in case a browser still does it. */
header .tagline, header .tagline a{
  color:var(--ink) !important;
  text-decoration:none !important;
  pointer-events:none;
}

.figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:56px 24px;
}
.figure img{
  max-width:920px;
  width:100%;
  height:auto;
  display:block;
}
.figure figcaption{
  margin-top:22px;
  font-style:italic;
  font-size:15px;
  letter-spacing:0.03em;
  color:var(--ink-soft);
  text-align:center;
}

.figure--wide img{ max-width:1180px; }
.figure--tall img{ max-width:680px; }

/* horizontal category bar — same nav typography as the original
   (Georgia via the VogueSansRegular fallback, 18px/22px, black),
   just laid out as a row instead of the original's vertical list.
   Lives at the very bottom of the page, where the old plain-text
   footer used to sit. */
.categories{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:80px 24px 90px;
}
.categories li{
  margin:0 22px;
}
.categories a{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:18px;
  line-height:22px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px dotted var(--ink);
}
.categories a:hover{
  color:var(--ink-soft);
  border-bottom-color:var(--ink-soft);
}
.categories a.current{
  font-weight:bold;
}

@media (max-width:480px){
  .categories{ padding:60px 10px 70px; flex-wrap:nowrap; }
  .categories li{ margin:0 5px; }
  .categories a{ font-size:12px; line-height:15px; }
}

/* image-only grid, two columns, uniform crop so every cell matches */
.grid{
  max-width:980px;
  margin:0 auto;
  padding:0 24px 100px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px 28px;
}
.grid .thumb{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#f4f2ed;
}
.grid .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:640px){
  .grid{ gap:14px 14px; padding:0 16px 60px; }
}

/* page title used on About / Pendant / Table light / Installation / Press */
.page-title{
  text-align:center;
  font-family:var(--font-heading);
  font-weight:normal;
  font-size:28px;
  color:var(--ink);
  margin:0 0 60px;
}

/* piece grid — image + name + material caption, used on category pages */
.pieces{
  max-width:980px;
  margin:0 auto;
  padding:0 24px 100px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px 28px;
}
.pieces .thumb{
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#f4f2ed;
}
.pieces .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pieces .cap{
  margin-top:14px;
  text-align:center;
}
.pieces .cap .name{
  display:block;
  font-family:var(--font-heading);
  font-size:14px;
  color:var(--ink);
}
.pieces .cap .material{
  display:block;
  font-family:var(--font-body);
  font-style:italic;
  font-size:13px;
  color:var(--ink-soft);
  margin-top:3px;
}

@media (max-width:820px){
  .pieces{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .pieces{ grid-template-columns:1fr; max-width:420px; }
}

/* category detail pages (Pendant / Table light / Installation) — one
   subsection per original sub-item, each with its own name, material
   caption, and full image gallery, matching the original site's depth */
.subsection{
  max-width:980px;
  margin:0 auto;
  padding:50px 24px 0;
}
.subsection + .subsection{
  border-top:1px dotted var(--rule);
  padding-top:50px;
}
.subsection:last-of-type{
  padding-bottom:100px;
}
.subsection h2{
  font-family:var(--font-heading);
  font-weight:normal;
  font-size:22px;
  color:var(--ink);
  margin:0 0 6px;
  text-align:center;
}
.subsection .material{
  display:block;
  font-family:var(--font-body);
  font-style:italic;
  font-size:14px;
  color:var(--ink-soft);
  text-align:center;
  margin:0 0 28px;
}
.subgallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.subgallery .thumb{
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#f4f2ed;
}
.subgallery .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:820px){
  .subgallery{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .subgallery{ grid-template-columns:1fr; gap:12px; }
}

/* About page */
.about{
  max-width:640px;
  margin:0 auto;
  padding:0 24px 100px;
}
.about .portrait{
  display:block;
  max-width:220px;
  margin:0 auto 56px;
}
.about p, .about ul{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7em;
  color:var(--ink);
}
.about ul{
  list-style:none;
  margin:0 0 40px;
  padding:0;
}
.about ul li{
  margin-bottom:10px;
}
.about .statement{
  margin-top:40px;
}
.about .statement p{
  margin:0 0 22px;
}
.about blockquote{
  margin:56px 0 0;
  padding-left:22px;
  border-left:1px dotted var(--ink);
  font-style:italic;
  color:var(--ink-soft);
}
.about blockquote p{
  font-size:15px;
  line-height:1.75em;
  color:inherit;
  margin:0 0 18px;
}

/* Press page */
.press-grid{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px 100px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px 32px;
  align-items:end;
}
.press-grid .thumb{
  width:100%;
  background:#f4f2ed;
  display:flex;
  align-items:flex-end;
}
.press-grid .thumb img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.press-grid .cap{
  display:block;
  margin-top:10px;
  text-align:center;
  font-family:var(--font-heading);
  font-size:13px;
  color:var(--ink);
}

@media (max-width:820px){
  .press-grid{ grid-template-columns:repeat(2, 1fr); }
}

footer{
  display:block;
}