/* Reference-style: monospace italic flavor, hyphen header lines, clean grid */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#fff; --ink:#0d0d0d; --muted:#666; --line:#eaeaea; --accent:#c3392b;
  --mono:'IBM Plex Mono','Courier Prime',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
body{ background:var(--bg); color:var(--ink); font-family: var(--mono); line-height:1.6 }
em, i { font-style: italic }

/* Header with hyphen lines */
.site-header{ padding:26px 20px 6px; border-bottom:1px solid var(--line) }
.hy-lines{ max-width:1180px; margin:0 auto; font-family: var(--mono); font-style: italic; color:#222 }
.hy-line{ white-space:nowrap; overflow:hidden; font-size:16px; letter-spacing:0.02em; }
.hy-line + .hy-line{ margin-top:6px }
.hy-line[data-accent="true"] span.center{ color: var(--accent) }
.hy-line span{ white-space:pre }
.hy-plain{ opacity:.9 }

/* Top nav */
.top-nav{ display:flex; gap:16px; padding:12px 20px; max-width:1180px; margin:0 auto 6px auto }
.top-nav .nav-link{ text-decoration:none; color:#222; opacity:.9 }
.top-nav .nav-link:hover{ opacity:1 }

#app{ padding:14px 20px; max-width:1180px; margin:0 auto }

/* Grid */
.grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; overflow:visible }
@media (max-width: 900px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 560px){ .grid{ grid-template-columns:1fr } }

.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:8px;
  overflow:visible; transform:translateZ(0);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  will-change: transform;
  transform-origin:center center;
}
.card:hover{
  transform: scale(1.15);
  z-index:5;
  box-shadow: 0 12px 34px rgba(0,0,0,.10);
  border-color:#ddd;
}
.card img{ display:block; width:100%; height:260px; object-fit:cover; border-radius:8px 8px 0 0 }
.card .card-meta{ display:flex; justify-content:space-between; padding:10px 12px; border-top:1px solid var(--line); font-size:14px }

/* Project */
.project .back{ display:inline-block; margin:10px 0 18px; border:1px solid var(--ink); padding:6px 10px; border-radius:8px; font-size:14px }
.project h2{ margin:0 0 8px; font-style: italic; font-weight:600 }
.project .meta{ color:var(--muted); margin-bottom:12px; font-size:14px }
.project .body{ max-width:760px; margin-bottom:20px }
.gallery{ display:grid; grid-template-columns:1fr; gap:12px }
.gallery img{ width:100%; height:auto; border:1px solid var(--line); border-radius:8px }

/* About */
.about h2{ margin:0 0 10px; font-style: italic }
.about p{ max-width:760px; margin:0 0 12px }

/* Utils */
.hidden{ display:none }

/* --- Project layout: clean 2-column on desktop, stacked on mobile --- */
.project .content.two-col{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); /* text | images */
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}

@media (max-width: 900px){
  .project .content.two-col{ grid-template-columns: 1fr; }
}

/* keep the reading line-length tidy */
.project .content.two-col .body{ max-width: 65ch; }

/* images column = neat single-column grid */
.project .content.two-col .gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: start;
}

.project .content.two-col .gallery img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* --- project specs line (inline, monospace, subtle) --- */
.project .submeta{
  margin: 6px 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  letter-spacing: .01em;
  white-space: normal;
}
.project .submeta .label{
  opacity: .75;
}
.project .submeta .dot::before{
  content: "•";
  margin: 0 10px;
  opacity: .35;
}
@media (max-width: 560px){
  .project .submeta{ font-size: 13px; }
}

/* ===== Global frame + centering for all pages ===== */
:root{
  /* side frame padding; tweak if you want a bigger/smaller gutter */
  --frame: clamp(16px, 3.5vw, 40px);
}

/* add a subtle frame around page content */
main, #app { padding-left: var(--frame); padding-right: var(--frame); }

/* center the project article itself */
.project { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* center the page title; keep body text left-aligned */
.project h2 { text-align: center; }

/* center the little meta lines under the title */
.project .meta,
.project .submeta { 
  max-width: 900px;
  margin-left: auto; 
  margin-right: auto; 
  text-align: center;
}

/* hide the back button everywhere */
.project .back { display: none !important; }

/* give the top nav the same side frame so it aligns with main */
.top-nav { padding-left: var(--frame); padding-right: var(--frame); }

/* the carousel you already have is centered; this just ensures it aligns with the frame on small screens too */
@media (max-width: 900px){
  .carousel { margin-left: auto; margin-right: auto; }
}


/* ===== Global carousel (shared by all project pages) ===== */
.carousel{
  /* consistent height; tweak to taste */
  --h: clamp(260px, 50vw, 520px);
  position: relative;
  max-width: 960px;
  margin: 12px auto 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.carousel .viewport{ height: var(--h); position: relative; }
.carousel .track{
  display: flex; width: 100%; height: 100%;
  transition: transform 320ms ease; will-change: transform;
}
.carousel .slide{
  min-width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; /* center every image */
  user-select: none;
}
/* show the whole image (verticals shrink to fit; horizontals scale too) */
.carousel .slide img{
  max-height: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  object-position: center;
  display: block;
}

.carousel .nav{ position: absolute; inset: 0; pointer-events: none; }
.carousel .btn{
  pointer-events: auto;
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--line);
  background: #ffffffcc; backdrop-filter: blur(2px);
  border-radius: 999px; width: 36px; height: 36px;
  display: grid; place-items: center;
  font-family: "IBM Plex Mono", monospace; font-size: 16px; line-height: 1;
  cursor: pointer;
}
.carousel .btn:hover{ background:#fff; }
.carousel .prev{ left:10px; }
.carousel .next{ right:10px; }

.carousel .dots{
  position: absolute; left:50%; bottom:10px; transform: translateX(-50%);
  display:flex; gap:6px; pointer-events: none;
}
.carousel .dot{ width:6px; height:6px; border-radius:50%; background:#bbb; opacity:.65; }
.carousel .dot.is-active{ background:#111; opacity:.95; }

/* anchors inside galleries behave as blocks (for clickable images) */
.project .gallery a { display:block; }

/* center the text block under carousels on all project pages */
.project .body{ max-width:65ch; margin:0 auto 20px; text-align:left; }
/* ===== About layout: text left, larger photo right ===== */

.about{ max-width:1100px; margin-left:auto; margin-right:auto; }

.about-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(18px, 4vw, 36px);
  align-items:start;
}

/* readable line length for the copy */
.about .copy{ max-width:65ch; }

/* bigger portrait, right column */
.about-photo{ 
  justify-self:end; 
  max-width: clamp(320px, 32vw, 520px);
}
.about-photo img{
  width:100%; height:auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border:1px solid var(--line);
  border-radius:10px;
}

/* stack on mobile */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo{ justify-self:start; max-width: min(420px, 80vw); }
}