/* Simon Portfolio — Final Grid System / 2026-09-26
   Purpose: normalize layout rhythm, equal-level grids, typography, and sticky-nav glass.
   This layer changes only portfolio chrome/layout; project artwork remains untouched. */

:root{
  /* 8pt spacing system */
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:80px;
  --sp-8:96px;
  --sp-9:128px;
  --sp-10:160px;

  /* Layout */
  --layout-max:1320px;
  --layout-pad:clamp(24px,4.8vw,72px);
  --grid-gap:clamp(20px,2vw,32px);
  --section-y:clamp(96px,9vw,136px);
  --section-head-gap:var(--sp-6);

  /* Type */
  --type-section:clamp(48px,5.4vw,76px);
  --type-primary-project:clamp(60px,6.2vw,92px);
  --type-secondary-project:clamp(42px,4.2vw,60px);
  --type-card:clamp(36px,3.2vw,52px);
  --type-lede:clamp(20px,1.8vw,26px);
  --type-body:17px;
}

/* One container rule across the public portfolio. */
.shell{
  width:min(100%,var(--layout-max));
  padding-inline:var(--layout-pad);
  margin-inline:auto;
}

/* Consistent section rhythm. */
.section{padding-block:var(--section-y)}
.section+.section{border-top:1px solid rgba(255,255,255,.055)}
.page-hero{padding-block:var(--section-y) var(--sp-7)}

/* 12-column section headers: 3 columns label / 9 columns message. */
.section-head,
.work-section-head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--grid-gap);
  row-gap:var(--sp-3);
  margin-bottom:var(--section-head-gap);
  align-items:start;
}
.section-head>:first-child,
.work-section-head>:first-child{grid-column:1/span 3}
.section-head>:last-child,
.work-section-head>:last-child{grid-column:4/-1}
.section-head h2,
.work-section-head h2,
.page-title{
  font-size:var(--type-section);
  line-height:.98;
  letter-spacing:-.055em;
  max-width:900px;
  text-wrap:balance;
}
.section-head p,
.work-section-head p{
  margin-top:var(--sp-2);
  max-width:680px;
  font-size:var(--type-body);
  line-height:1.58;
}

/* Homepage: primary projects use the same 5/7 split regardless of alternation. */
.home-primary-projects{gap:var(--sp-9)}
.home-project-primary .home-project-link{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gap);
  align-items:center;
  padding-top:var(--sp-3);
}
.home-project-primary .home-project-copy{
  grid-column:1/span 5;
  order:initial;
  padding:0 var(--sp-4) 0 0;
}
.home-project-primary .home-project-visual{
  grid-column:6/-1;
  order:initial;
  width:100%;
  aspect-ratio:8/5;
}
.home-project-primary:nth-child(even) .home-project-visual{
  grid-column:1/span 7;
  order:initial;
}
.home-project-primary:nth-child(even) .home-project-copy{
  grid-column:8/-1;
  order:initial;
}
.home-project-copy h3{
  margin:var(--sp-5) 0 var(--sp-2);
  font-size:var(--type-primary-project);
  line-height:.9;
  letter-spacing:-.068em;
}
.home-project-copy p{
  max-width:500px;
  font-size:var(--type-lede);
  line-height:1.32;
}
.home-project-meta{gap:var(--sp-2)}

/* Homepage supporting work: equal columns / equal gaps / equal media ratio. */
.home-supporting-projects{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--grid-gap);
  margin-top:var(--sp-9);
}
.home-project-supporting .home-project-link{gap:var(--sp-3);padding-top:var(--sp-2)}
.home-project-supporting .home-project-copy{padding:0 var(--sp-3) var(--sp-2) 0}
.home-project-supporting .home-project-copy h3{
  margin:var(--sp-4) 0 var(--sp-2);
  font-size:var(--type-secondary-project);
  line-height:.94;
}
.home-project-supporting .home-project-copy p{font-size:clamp(18px,1.45vw,22px);line-height:1.4}
.home-project-supporting .home-project-visual{aspect-ratio:8/5}

/* Work page: equal-level cards share one spacing system. */
.work-section{padding-block:var(--section-y)}
.work-featured-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--grid-gap);
}
.work-selected-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--grid-gap);
  row-gap:var(--sp-7);
}
.work-card-copy{padding:var(--sp-3) var(--sp-4) var(--sp-4) 0}
.work-card-copy h3{margin:var(--sp-4) 0 var(--sp-2);line-height:.94}
.work-card-copy p{line-height:1.42}
.work-card-featured .work-card-visual{aspect-ratio:4/3}
.work-card-selected .work-card-visual{aspect-ratio:8/5}

/* Services: two peers must be visually equal. */
.opportunity-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--grid-gap);
  align-items:stretch;
}
.opportunity-card,
.opportunity-card.opportunity-primary{
  min-height:540px;
  padding:var(--sp-5);
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  background:#0d1014;
}
.opportunity-card h2{
  margin:var(--sp-3) 0 var(--sp-2);
  font-size:var(--type-card);
  line-height:1.04;
  letter-spacing:-.045em;
  max-width:620px;
}
.opportunity-card>p{font-size:var(--type-body);line-height:1.58}
.opportunity-card ul{margin:var(--sp-4) 0 var(--sp-4)}
.opportunity-card li{padding:var(--sp-2) 0}
.opportunity-card>.button,
.opportunity-card>.actions{margin-top:auto}
.contact-note{margin-top:var(--sp-5)}

/* About / resume / contact grids use the same horizontal gutter. */
.about-intro-grid,
.availability-grid,
.first-message-grid,
.contact-grid,
.resume-layout{column-gap:calc(var(--grid-gap) * 2);row-gap:var(--sp-5)}
.approach-grid,
.context-grid,
.resume-skill-grid{gap:1px}
.approach-card,
.context-card,
.resume-skill-grid>article{padding:var(--sp-4)}
.resume-facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.resume-fact{padding:var(--sp-3);min-height:144px}
.timeline-item{padding:var(--sp-4) 0;gap:var(--sp-4)}

/* Homepage About preview follows the same 3/9 logic as section headers. */
.human-note{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gap);
  padding:var(--sp-6) 0;
}
.human-note>.kicker{grid-column:1/span 3}
.human-note>div:last-child{grid-column:4/-1}
.human-note blockquote{max-width:900px}

/* Buttons and nav keep consistent target dimensions. */
.button{min-height:48px;padding-inline:var(--sp-3)}
.actions{gap:var(--sp-2)}
.nav-actions{gap:var(--sp-3)}
.nav-links{gap:var(--sp-4)}

/* Sticky navigation: opaque at rest, controlled frosted glass after scrolling. */
.site-header{
  background:#000!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-bottom-color:rgba(255,255,255,.12)!important;
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease,-webkit-backdrop-filter .28s ease,backdrop-filter .28s ease!important;
}
.site-header.scrolled{
  background:rgba(0,0,0,.70)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  border-bottom-color:rgba(255,255,255,.16)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.22)!important;
}

/* Progress rail stays visually above the glass header. */
.launch-scroll-progress{z-index:1200}

@media(max-width:1100px){
  .opportunity-card,.opportunity-card.opportunity-primary{padding:var(--sp-4)}
  .work-featured-grid{gap:var(--sp-3)}
}

@media(max-width:900px){
  :root{--section-y:var(--sp-8);--section-head-gap:var(--sp-5)}
  .section-head,
  .work-section-head{grid-template-columns:1fr;row-gap:var(--sp-2)}
  .section-head>:first-child,.section-head>:last-child,
  .work-section-head>:first-child,.work-section-head>:last-child{grid-column:1}

  .home-primary-projects{gap:var(--sp-8)}
  .home-project-primary .home-project-link{grid-template-columns:1fr;gap:var(--sp-3)}
  .home-project-primary .home-project-copy,
  .home-project-primary:nth-child(even) .home-project-copy{grid-column:1;order:2;padding:0}
  .home-project-primary .home-project-visual,
  .home-project-primary:nth-child(even) .home-project-visual{grid-column:1;order:1}

  .opportunity-grid{grid-template-columns:1fr}
  .opportunity-card,.opportunity-card.opportunity-primary{min-height:0}
  .human-note{grid-template-columns:1fr;padding:var(--sp-5) 0}
  .human-note>.kicker,.human-note>div:last-child{grid-column:1}
  .resume-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
  :root{
    --layout-pad:22px;
    --section-y:72px;
    --section-head-gap:40px;
    --grid-gap:20px;
  }
  .section-head h2,.work-section-head h2,.page-title{font-size:clamp(42px,12vw,58px)}
  .home-supporting-projects{grid-template-columns:1fr;gap:var(--sp-7);margin-top:var(--sp-8)}
  .home-project-copy h3,.home-project-supporting .home-project-copy h3{font-size:clamp(44px,14vw,62px)}
  .home-project-copy p,.home-project-supporting .home-project-copy p{font-size:19px}
  .work-featured-grid,.work-selected-grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .work-card-copy{padding:var(--sp-2) var(--sp-3) var(--sp-3) 0}
  .opportunity-card,.opportunity-card.opportunity-primary{padding:var(--sp-3)}
  .resume-facts-grid{grid-template-columns:1fr}
  .timeline-item{gap:var(--sp-2)}
  .site-header.scrolled{
    background:rgba(0,0,0,.84)!important;
    -webkit-backdrop-filter:blur(16px) saturate(135%)!important;
    backdrop-filter:blur(16px) saturate(135%)!important;
  }
}

@media(max-width:480px){
  :root{--layout-pad:18px}
  .section{padding-block:64px}
  .page-hero{padding-block:72px 56px}
  .opportunity-card,.opportunity-card.opportunity-primary{padding:24px 20px}
  .actions{gap:12px}
}

@media(prefers-reduced-motion:reduce){
  .site-header{transition:none!important}
}