/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:#111; background:#fff; line-height:1.55;
}
img { max-width:100%; display:block; border:0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline:2px solid #000; outline-offset:2px; }

/* Layout helpers */
:root{
  --container: 1200px;
  --pad: clamp(16px, 3vw, 32px);
  --rule: 1px solid #000;
  --thick-rule: 2px solid #000;
}
.wrap { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--pad); }

/* Header */
.site-header { background:#fff; position:relative; z-index:50; }
.header-row{
  display:grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | toggle */
  align-items:center; gap:16px; padding:14px var(--pad);
}
.rule { border-bottom: var(--rule); }

.brand{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:12px;
  color:#000; text-decoration:none;
}
.brand-mark{ width: clamp(88px, 8vw, 140px); height:auto; display:block; } /* bigger logo */
.brand-text{ font-weight:700; line-height:1.05; letter-spacing:.02em; }

/* Desktop nav (aligned right) */
.main-nav{
  justify-self:end;
  display:flex; gap: clamp(28px, 6vw, 96px);
  font-weight:500;
}
.main-nav a{
  text-decoration:none;
  padding-bottom:6px;
  border-bottom:2px solid transparent;
}
.main-nav a:hover{ border-bottom-color:#000; }

/* Mobile toggle */
.nav-toggle{
  display:none; width:44px; height:44px;
  border:2px solid #000; background:#fff; border-radius:10px;
  align-items:center; justify-content:center; gap:4px;
}
.nav-toggle .bar{ width:20px; height:2px; background:#000; display:block; }
.nav-toggle:active{ transform: translateY(1px); }

/* Intro grid */
.intro-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr; /* photo | text */
  gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(24px, 6vw, 56px);
}
.photo img{ width:100%; height:auto; border:none; }

.info{ display:grid; align-content:start; gap:16px; }

/* Name: Roboto Light + smaller */
.name{
  font-family:"Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight:300;                       /* Roboto Light */
  font-size: clamp(34px, 4vw, 56px);     /* reduced size */
  line-height:1.1; letter-spacing:.01em;
  margin:0;
}
.name-rule{ border-bottom: var(--thick-rule); margin:6px 0 8px; width:100%; }

.subtitle{
  margin:0 0 12px;
  font-size: clamp(16px, 1.4vw, 22px);
  color:#222; max-width:30ch;
}

.about-title{ margin:0 0 6px; font-size:clamp(18px, 1.6vw, 22px); font-weight:500; }
.about-title a{ color:#000; text-decoration: underline; }
.about-body{ margin:0; color:#000000; max-width:60ch; }

/* Footer */
.site-footer{ background:#000; color:#fff; }
.footer-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--pad);
}
.site-footer a{ color:#fff; text-decoration:none; }
.socials{ display:flex; align-items:center; gap:18px; }
.icon{ width:42px; height:42px; display:inline-block; }

/* Invert footer social icons for dark background */
.site-footer .icon{ filter: invert(1) brightness(1.8) contrast(1.1); }
.site-footer .social:hover .icon{ filter: invert(1) brightness(2) contrast(1.1); }

/* ====== Responsiveness ====== */
@media (max-width:1024px){
  .intro-grid{ grid-template-columns:1fr; } /* stack photo above text */
  .subtitle{ max-width:none; }
}

@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .main-nav{
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom: var(--rule);
    display:none; flex-direction:column; gap:12px;
    padding:12px var(--pad) 16px;
  }
  .site-header.open .main-nav{ display:flex; }
}

@media (max-width:480px){
  .brand-mark{ width:64px; }
  .brand-text{ font-size:.95rem; }
  .icon{ width:36px; height:36px; }
  .footer-row{ flex-direction:column; align-items:flex-start; }
}

/* Subtitle: larger size + thinner weight */
.subtitle {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 300;                   /* thinner (Light) */
  font-size: clamp(20px, 2.2vw, 30px);/* bigger */
  line-height: 1.25;
  letter-spacing: 0.01em;             /* subtle spacing for readability */
}

/* Optional: keep it comfy on very small phones */
@media (max-width: 480px) {
  .subtitle { font-size: clamp(18px, 5.5vw, 22px); }
}

/* Increase gap between subtitle and About section */
.subtitle {
  margin-bottom: clamp(24px, 4vw, 56px); /* was 12px */
}

/* (optional) tiny extra nudge if you want even more space */
.about { margin-top: 4px; }

/* Remove underline from About links */
.about a {
  text-decoration: none !important;
  color: #000;           /* keep it black (optional) */
}
.about a:hover,
.about a:focus {
  text-decoration: none; /* no underline on hover/focus */
}

/* Make "About me" match the subtitle style */
.about-title,
.about-title a {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 300;                   /* Light */
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #000000;
  text-decoration: none;              /* keep no underline */
}

/* Bigger gap between "About me" and its text */
.about-title {
  margin: 0 0 clamp(8px, 1.2vw, 16px) !important; /* was ~6px */
}

/* If your markup is <h3 class="about-title"><a>About me</a></h3>,
   this keeps the spacing consistent even if styles target the link */
.about-title a { display: inline-block; }


/* Make the About paragraph match the subtitle style, keep size */
.about-body {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 300;          /* Light */
  letter-spacing: 0.01em;
  font-size: inherit;        /* keeps existing size */
}

.about-body { line-height: 1.6; }
@media (min-width: 900px) {
  .about-body { line-height: 1.8; }
}


/* Spacing below the About paragraph */
.about-actions {
  margin-top: clamp(12px, 2vw, 20px);
}

/* Button: black/white, line-art style */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: #000;
  color: #fff;
}

.btn:active {
  transform: translateY(1px);
}

/* Make the resume button full-width on small phones (optional) */
@media (max-width: 480px) {
  .resume-btn { width: 100%; }
}

/* Push the Resume button farther down from the About text */
.about-actions {
  margin-top: clamp(32px, 6vw, 96px) !important; /* increase/decrease to taste */
}

/* ----------------------------- */
/* EXPERIENCE PAGE STYLES        */
/* ----------------------------- */

/* Page title */
.experience-page h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 40px 0 30px;
  text-align: left;
  color: #111;
}

/* Each job section */
.job {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 50px;
  gap: 30px;
  flex-wrap: wrap; /* makes it mobile-friendly */
}

.job-text {
  flex: 2;
  min-width: 250px;
}

.job-text h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.job-text .dates {
  font-size: 0.9rem;
  color: #666;
  margin: 5px 0 15px;
}

.job-text ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

/* Job image */
.job-image {
  flex: 1;
  min-width: 200px;
}

.job-image img {
  max-width: 260px;
  height: auto;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .job {
    flex-direction: column;
    align-items: flex-start;
  }

  .job-image img {
    max-width: 100%;
    margin-top: 16px;
  }
}

/* ----------------------------- */
/* EXPERIENCE PAGE FONT FIX      */
/* ----------------------------- */

/* Force Roboto everywhere on Experience page */
.experience-page,
.experience-page h1,
.experience-page h2,
.experience-page p,
.experience-page li,
.experience-page a,
.experience-page .dates {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
}

/* Headings slightly bolder */
.experience-page h1,
.experience-page h2 {
  font-weight: 100;
}

/* Body and lists lighter */
.experience-page p,
.experience-page li,
.experience-page .dates {
  font-weight: 100
  ;
}


/* ---------------------------------- */
/* DESIGNS PAGE                       */
/* ---------------------------------- */
.designs-page h1{
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 300;            /* light like your homepage title */
  margin: clamp(16px, 4vw, 32px) 0;
  border-bottom: var(--thick-rule);
  padding-bottom: 8px;
}

/* two-column hero: text | image grid */
.designs-hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(12px, 4vw, 28px);
}

.designs-copy{
  display:grid;
  gap: clamp(12px, 1.4vw, 18px);
  max-width: 60ch;
  font-weight:300;
}
.designs-copy em{ font-style: italic; }
.designs-copy .cta{ margin-top: 8px; }


/* ===== Simple CSS Grid: 6 square tiles, no cropping ===== */
.grid6{
  --gap: clamp(14px, 2vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.grid6 .cell{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f4f4f4;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
  aspect-ratio: 1 / 1;                     /* keep tiles square */
}

.grid6 .cell img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;           /* show full image, no crop */
  object-position: center;
  background: #f5f5f5;                      /* subtle letterboxing fill */
  transform: none !important;
}

/* Hover (optional) */
.grid6 .cell:hover,
.grid6 .cell:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Responsive columns */
@media (max-width: 900px){
  .grid6{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .grid6{ grid-template-columns: 1fr; }
}

/* Make the grid larger without changing layout (optional) */
.designs-page { --container: clamp(1200px, 96vw, 1600px); }  /* widen page */

/* 1) LOCK THE LAYOUT: 3 → 2 → 1 columns (no auto-fit) */
.designs-page .grid6{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 900px){
  .designs-page .grid6{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px){
  .designs-page .grid6{
    grid-template-columns: 1fr !important;
  }
}

/* 2) MAKE THE TILES BIGGER WITHOUT CHANGING COLUMNS
      (just widen this section's container) */
.designs-page .grid6.wrap{
  --container: 1600px;   /* try 1500/1600 if you want even bigger */
}
@media (min-width: 2000px){
  .designs-page .grid6.wrap{ --container: 2000px; }
}

/* 3) OPTIONAL: squeeze gaps a touch to free more tile space */
.designs-page .grid6{ --gap: clamp(10px, 1.2vw, 16px); }


/* --- Sticky footer & full-viewport page --- */
html, body { height: 100%; }
body{
  min-height: 100svh;                 /* cover the viewport, mobile-safe */
  display: flex;                       /* stack header / main / footer */
  flex-direction: column;
  overflow-x: hidden;                  /* avoid 1px overflow causing gaps */
}

.site-header{ flex: 0 0 auto; }
main{ flex: 1 0 auto; }                /* main stretches to fill space */
.site-footer{
  flex: 0 0 auto;
  margin-top: auto;                    /* push footer to bottom */
  background: #000;
  color: #fff;
  border-top: none;
}

/* Safety patch for subpixel gaps on some GPUs/browsers */
.site-footer::after{
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 1px;                         /* fills any 1px rounding gap */
  background: #000;
  pointer-events: none;
}

/* Remove the underline below the DESIGNS heading */
.designs-page h1{
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: clamp(12px, 2vw, 24px); /* keep a little breathing room */
}

/* ===== Product Page (Kinera V1) ===== */

:root{
  --gap: clamp(16px, 2.2vw, 28px);
  --gap-lg: clamp(24px, 3vw, 40px);
  --rule: 1px solid #e6e6e6;
}

/* Page container width (give the content breathing room) */
.product-page{
  --container: clamp(960px, 90vw, 1100px);
  padding-block: clamp(16px, 3vw, 28px);
}

/* Title block */
.product-head{
  margin: 8px 0 10px;
}
.product-title{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  margin: 0 0 4px;
}
.product-tagline{
  margin: 0 0 10px;
  color: #555;
  font-weight: 300;
}

/* Hero */
.hero{
  margin: 0 0 var(--gap-lg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.hero img{
  width: 100%;
  height: auto;
  display: block;
}

/* Section spacing */
.section{
  margin: 0 0 clamp(28px, 5vw, 60px);
}

/* About paragraph width */
.about p{
  max-width: 80ch;
  margin: 0;
  line-height: 1.7;
}

/* Two-column sections (text | media) */
.two-col{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gap-lg);
  align-items: start;
}
.two-col .col-text h3{
  margin: 0 0 8px;
  font-weight: 500;
}
.two-col .col-text p{
  margin: 0 0 10px;
  max-width: 55ch;
  line-height: 1.7;
}

/* Media blocks */
.media-grid.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
}
.media-grid.two figure,
.single{
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.media-grid.two img,
.single img{
  width: 100%;
  height: auto;
  display: block;
}

/* Slight extra space when the two-up sits under text */
.media-grid.below{ margin-top: var(--gap); }

/* Responsive */
@media (max-width: 960px){
  .two-col{
    grid-template-columns: 1fr;
  }
  .two-col .col-text p{ max-width: none; }
}

/* === GLEAM: put images under the text and make them larger === */
/* This targets the first two-column section after "About" (your Gleam block). */
.product-page section.two-col:nth-of-type(2){
  grid-template-columns: 1fr;          /* single column layout */
}

.product-page section.two-col:nth-of-type(2) .col-text{
  grid-column: 1;                       /* text first */
}

.product-page section.two-col:nth-of-type(2) .col-media{
  grid-column: 1;                       /* media below text */
  margin-top: var(--gap);
}

/* Make the lamp images big: two wide tiles under the text */
.product-page section.two-col:nth-of-type(2) .media-grid.two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

/* On small screens: stack the two images */
@media (max-width: 640px){
  .product-page section.two-col:nth-of-type(2) .media-grid.two{
    grid-template-columns: 1fr;
  }
}

/* Ensure images fill the grid cells cleanly */
.product-page section.two-col:nth-of-type(2) .media-grid.two img{
  width: 100%;
  height: auto;
  display: block;
}


/* --- Make text cover the full column width and read left→right --- */
.product-page .about p,
.product-page .two-col .col-text p{
  max-width: none !important;      /* stop limiting to 55–80ch */
}

/* Default: left-aligned, full width */
.product-page p{
  text-align: left;                 /* ensure not right-aligned */
  line-height: 1.7;
}

/* If you want lines to stretch edge-to-edge within each column,
   swap the block above for this justified version instead: */
/*
.product-page p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.7;
}
*/


.designs-hero {
  display: flex;
  flex-direction: column;
  gap: 3rem;      /* spacing between text and images */
}

/* ---------------------------------- */
/* DESIGNS PAGE – IMAGE GRID LAYOUT   */
/* ---------------------------------- */

/* Add vertical padding to the main Designs page container */
.designs-page.wrap {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* Title styling for DESIGNS */
.designs-page .page-title {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin: 0 0 26px;
  text-transform: uppercase;
}

/* Two-column grid of images (matches the screenshot) */
.designs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.design-item {
  margin: 0;
}

.design-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Responsive: single column on smaller screens */
@media (max-width: 768px) {
  .designs-grid {
    grid-template-columns: 1fr;
  }

  .designs-page .page-title {
    font-size: 30px;
  }
}

/* ===== override subtitle spacing below name ===== */
.subtitle {
  margin-bottom: 6px !important;
}

.about {
  margin-top: 4px !important;
}

/* Designs thumbnails: grayscale until hover */
.design-item img{
  transition: filter .35s ease, transform .35s ease;
}

/* On hover: restore color + a tiny lift */
.design-item:hover img{
  transform: translateY(-2px);
}

.design-item:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}