/* =========================================================
   PERFECTURE — MASTER SYSTEM
   Unified across all pages
   Institutional / Editorial / Timeless
========================================================= */


/* =========================================================
   ROOT SYSTEM
========================================================= */

:root{
  --bg: #fafafa;
  --ink: #111;

  --muted: rgba(0,0,0,0.60);
  --muted2: rgba(0,0,0,0.45);
  --line: rgba(0,0,0,0.10);

  --max: 1120px;

  /* Desktop padding stays the same feeling,
     mobile will override with a larger, safer padding */
  --pad: 48px;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype",
           Palatino, Garamond, "Times New Roman", Times, serif;

  --sans: -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

/* CRITICAL for iOS Safari:
   prevents automatic font inflation that can cause overlaps */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  font-family: var(--sans);
  line-height: 1.6;
  min-height: 100vh;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* prevents accidental horizontal overflow on mobile */
  overflow-x: hidden;
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   LAYOUT
========================================================= */

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

main{
  flex: 1;
}


/* =========================================================
   HEADER (MASTER)
========================================================= */

header{
  padding: 24px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.brand a{
  font-weight: 500;
}

nav a{
  margin-left: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

nav a:hover{
  color: var(--ink);
}


/* =========================================================
   FOOTER (MASTER)
========================================================= */

footer{
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted2);
  padding: 24px 0;
  letter-spacing: 0.06em;
}


/* =========================================================
   HOME
========================================================= */

.manifesto{
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.manifesto h1{
  font-family: var(--serif);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 500;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.manifesto p{
  font-family: var(--serif);
  font-size: 17px;
  line-height: 2.0;
  color: var(--muted);
  margin: 0;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.page-philosophy{
  padding: 118px 0 120px;
}

.philosophy-label{
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 84px;
}

.two-up{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 140px;
  align-items: start;
}

.art{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
}

.philosophy-text{
  max-width: 480px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.95;
  color: var(--muted);
}

.philosophy-text p{
  margin: 0 0 24px 0;
}

.philosophy-text p:last-child{
  margin-bottom: 0;
}


/* =========================================================
   TRILOGY
========================================================= */

.section{
  padding: 140px 0;
}

.section-head{
  max-width: 66ch;
  margin-bottom: 56px;
}

.section-kicker{
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--muted2);
}

.section-title{
  font-family: var(--serif);
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 400;
  margin: 12px 0 0;
  letter-spacing: -0.02em;
}

.copy{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.95;
  color: var(--muted);
  max-width: 66ch;
}

.copy p{
  margin: 0 0 20px 0;
}

.copy p:last-child{
  margin-bottom: 0;
}

.gallery{
  margin-top: 94px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.gallery figure{
  margin: 0;
}

.gallery figcaption{
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted2);
}


/* =========================================================
   CONTACT
========================================================= */

.page-contact{
  padding: 118px 0 150px;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
}

.contact-kicker{
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--muted2);
}

.contact-title{
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  margin: 14px 0 26px;
}

.contact-copy{
  max-width: 420px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--muted);
}

.contact-rule{
  margin: 36px 0;
  border: none;
  border-top: 1px solid var(--line);
}

.contact-channels{
  font-size: 14px;
  color: var(--muted);
}

.form label{
  display: block;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}

input,
textarea{
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;

  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);

  margin-bottom: 28px;
}

input:focus,
textarea:focus{
  outline: none;
  border-color: var(--ink);
}

textarea{
  min-height: 140px;
  resize: vertical;
}

.btn{
  background: transparent;
  border: 1px solid var(--line);
  padding: 10px 26px;

  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover{
  border-color: var(--ink);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px){

  header{
    padding: 20px 18px;
  }

  /* Slightly more than before for tablets */
  .container{
    padding: 0 18px;
  }

  nav a{
    margin-left: 14px;
  }

  .two-up{
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .contact-grid{
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .gallery{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section{
    padding: 100px 0;
  }

  .page-philosophy,
  .page-contact{
    padding: 90px 0;
  }
}


/* =========================================================
   iPHONE / SMALL MOBILE FIXES (the important part)
   - more side breathing room
   - prevent text overlap/inflation
   - tighten huge gaps that feel “too empty” on phone
========================================================= */

@media (max-width: 600px){

  /* This is the main reason it felt “tight”: 18px is too thin on iPhone.
     24px keeps it premium + readable. */
  .container{
    padding: 0 24px;
  }

  header{
    padding: 18px 24px;
    gap: 10px;
  }

  /* Let the nav wrap instead of compressing text into collisions */
  header nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 10px;
  }

  nav a{
    margin-left: 14px;
  }

  /* Reduce “museum wall” emptiness while keeping the ritual calm */
  .page-philosophy{
    padding: 72px 0 84px;
  }

  .page-contact{
    padding: 72px 0 96px;
  }

  .section{
    padding: 84px 0;
  }

  .philosophy-label{
    margin-bottom: 42px;
  }

  .section-head{
    margin-bottom: 34px;
  }

  .gallery{
    margin-top: 52px;
    gap: 22px;
  }

  /* Typography: keep the desktop feeling but avoid oversized iOS rendering */
  .manifesto{
    padding: 0;
  }

  .manifesto p{
    font-size: 16px;
    line-height: 1.85;
  }

  .philosophy-text,
  .copy,
  .contact-copy{
    font-size: 16px;
    line-height: 1.85;
  }

  /* Safety: long words/links won’t cause sideways overflow */
  .copy,
  .philosophy-text,
  .contact-copy,
  .contact-channels{
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
/* =========================================================
   iPHONE FIX — FORCE SAFE PADDING + STOP TEXT COLLISION
   (ONE-FILE FIX, no HTML edits)
========================================================= */

@media (max-width: 720px){

  /* Global safe gutter on iPhone */
  body{ overflow-x: hidden; }

  header{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Any container pattern used across pages */
  .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Prevent “text on text” + force clean line breaks */
  .philosophy-text,
  .copy,
  .intro,
  .lede,
  .note,
  .channels{
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Philosophy layout: force single column on iPhone */
  .two-up{
    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }

  /* Trilogy gallery: force single column on iPhone */
  .gallery{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Contact layout: force single column on iPhone */
  .grid,
  .contact-grid{
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }
}
/* =========================================================
   PHILOSOPHY — iOS MOBILE FIX
   Stops text overlapping + ensures footer shows
========================================================= */
@media (max-width: 720px){

  /* iOS Safari sometimes auto-resizes text and causes overlap */
  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Remove the iOS vh/min-height trap on Philosophy */
  .page-philosophy{
    min-height: auto !important;
    padding-bottom: 110px !important; /* makes room for footer + Safari bar */
  }

  /* Force clean paragraph flow (prevents “text on text”) */
  .philosophy-text{
    line-height: 2.05 !important;
  }

  .philosophy-text p{
    display: block;
    margin: 0 0 24px 0 !important;
  }

  .philosophy-text p:last-child{
    margin-bottom: 0 !important;
  }

  /* Make footer always visible above iPhone safe area */
  footer{
    padding-bottom: calc(36px + env(safe-area-inset-bottom)) !important;
  }
}
/* =========================================================
   MICRO-TYPOGRAPHY — INSTITUTIONAL MOBILE TUNING
   Subtle luxury spacing for small screens
========================================================= */
@media (max-width: 720px){

  /* Give text more breathing room (editorial feel) */
  body{
    letter-spacing: 0.01em;
  }

  /* Philosophy + long-form reading comfort */
  .philosophy-text,
  .copy,
  .contact-copy,
  .manifesto p{
    font-size: 17px !important;
    line-height: 2.15 !important;
  }

  /* Section titles: calmer, more composed */
  .section-title,
  .contact-title,
  .manifesto h1{
    line-height: 1.18 !important;
    letter-spacing: -0.015em;
  }

  /* Labels & small text: museum catalog style */
  .philosophy-label,
  .section-kicker,
  .contact-kicker{
    letter-spacing: 0.34em !important;
  }

  /* More vertical rhythm between blocks */
  .section{
    padding: 110px 0 !important;
  }

  .page-philosophy,
  .page-contact{
    padding-top: 110px !important;
  }

  /* Images breathe more (gallery / editorial spacing) */
  .gallery{
    gap: 36px !important;
  }

  .two-up{
    gap: 54px !important;
  }
}
/* =========================================================
   iOS SAFETY FIX — Prevent Text Overlap (Safari Bug)
========================================================= */
@media (max-width: 720px){

  .philosophy-text p,
  .copy p,
  .contact-copy p,
  .manifesto p{
    line-height: 2.25 !important;
    margin-bottom: 26px !important;
    display: block;
    clear: both;
  }

  /* Force proper text rendering on iOS */
  body{
    -webkit-text-size-adjust: 100%;
  }
}
/* =========================================================
   PERFECTURE — EXPERIENCE REFINEMENT SYSTEM
   Subtle transitions + cinematic perception
========================================================= */


/* -----------------------------------------
   Smooth institutional scrolling
----------------------------------------- */
html{
  scroll-behavior: smooth;
}


/* -----------------------------------------
   Page fade-in (museum loading feel)
----------------------------------------- */
body{
  opacity: 0;
  transition: opacity 0.65s ease;
}

body.loaded{
  opacity: 1;
}


/* -----------------------------------------
   Typography stability (prevents iOS glitches)
----------------------------------------- */
body{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}


/* -----------------------------------------
   Cinematic vertical rhythm on mobile
----------------------------------------- */
@media (max-width: 720px){

  body{
    letter-spacing: 0.01em;
  }

  .philosophy-text,
  .copy,
  .contact-copy,
  .manifesto p{
    font-size: 17px;
    line-height: 2.15;
  }

  .section{
    padding: 110px 0;
  }

  .two-up{
    gap: 54px;
  }

  .gallery{
    gap: 36px;
  }
}
/* =========================================================
   PERFECTURE — 0.001% INSTITUTIONAL EXPERIENCE SYSTEM
   Museum-grade restraint + cinematic perception
========================================================= */


/* ---------------------------------------------------------
   SCROLL WEIGHT — slow perception subtly
--------------------------------------------------------- */

html{
  scroll-behavior: smooth;
}

body{
  transition: background-color 0.6s ease;
}


/* ---------------------------------------------------------
   PAGE LOAD FADE — editorial entrance
--------------------------------------------------------- */

body{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.loaded{
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   SECTION REVEAL — exhibition pacing
--------------------------------------------------------- */

.section,
.two-up,
.manifesto,
.contact-grid{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s ease,
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.section.in-view,
.two-up.in-view,
.manifesto.in-view,
.contact-grid.in-view{
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   IMAGE CALM REVEAL
--------------------------------------------------------- */

.art img,
.gallery img{
  transition: transform 1.4s ease, opacity 1.2s ease;
  opacity: 0.85;
}

.section.in-view .art img,
.section.in-view .gallery img{
  opacity: 1;
  transform: scale(1.02);
}


/* ---------------------------------------------------------
   TYPOGRAPHIC BREATHING — mobile museum tuning
--------------------------------------------------------- */

@media (max-width: 720px){

  body{
    letter-spacing: 0.012em;
  }

  .philosophy-text,
  .copy,
  .contact-copy,
  .manifesto p{
    font-size: 17px;
    line-height: 2.2;
  }

  .section{
    padding: 120px 0;
  }

  .two-up{
    gap: 60px;
  }

  .gallery{
    gap: 42px;
  }

  .philosophy-label,
  .section-kicker,
  .contact-kicker{
    letter-spacing: 0.36em;
  }
}


/* ---------------------------------------------------------
   FOOTER PRESENCE — institutional calm
--------------------------------------------------------- */

footer{
  opacity: 0.7;
  transition: opacity 0.6s ease;
}

footer:hover{
  opacity: 1;
}
/* =========================================================
   PERFECTURE — PERCEPTUAL CONTROL SYSTEM
   Typography weight • Scroll friction • Micro timing
========================================================= */


/* ---------------------------------------------------------
   1. PERCEPTUAL TYPOGRAPHY WEIGHT
   Makes text feel denser, more serious, more archival
--------------------------------------------------------- */

body{
  letter-spacing: 0.012em;
}

.philosophy-text,
.copy,
.contact-copy,
.manifesto p{
  font-weight: 400;
  text-shadow: 0 0 0.01px rgba(0,0,0,0.2);
}

/* Headings slightly tighter for authority */
h1, h2{
  letter-spacing: -0.018em;
  font-weight: 500;
}


/* ---------------------------------------------------------
   2. SCROLL FRICTION ILLUSION
   (creates subconscious “heavier” scrolling feel)
--------------------------------------------------------- */

.section,
.two-up,
.manifesto,
.contact-grid{
  transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Slightly delay nested elements for exhibition pacing */
.section h2,
.section p{
  transition: opacity 1.2s ease 0.15s,
              transform 1.2s ease 0.15s;
}


/* ---------------------------------------------------------
   3. MICRO TIMING PRECISION
   Smooth hover calmness — not flashy
--------------------------------------------------------- */

a{
  transition: color 0.4s ease, border-color 0.4s ease;
}

button{
  transition: all 0.45s ease;
}

button:hover{
  transform: translateY(-1px);
}


/* ---------------------------------------------------------
   IMAGE PRESENCE — CLEAN & SHARP (no fog)
--------------------------------------------------------- */

.art img,
.gallery img{
  opacity: 1;
  transform: none;
  transition: transform 1.6s ease;
}

.art img:hover,
.gallery img:hover{
  transform: scale(1.01);
}


/* ---------------------------------------------------------
   5. MOBILE REFINEMENT — CALM BREATHING
--------------------------------------------------------- */

@media (max-width: 720px){

  body{
    letter-spacing: 0.014em;
  }

  .philosophy-text,
  .copy,
  .contact-copy,
  .manifesto p{
    font-size: 17px;
    line-height: 2.25;
  }

  .section{
    padding: 130px 0;
  }

  .two-up{
    gap: 64px;
  }

  .gallery{
    gap: 44px;
  }
}
/* =========================================================
   MUSEUM TYPOGRAPHY CALIBRATION
   Ultra-subtle institutional weight
========================================================= */

body{
  color: #121212; /* slightly deeper ink */
  letter-spacing: 0.014em;
}

.philosophy-text,
.copy,
.contact-copy,
.manifesto p{
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: 0.012em;
}

h1, h2{
  letter-spacing: -0.022em;
  font-weight: 500;
}
/* =========================================================
   PERFECTURE — 0.001% MOBILE / MUSEUM SYSTEM
   Paste at END of public/css/style.css
   (No HTML edits. Works across iPhone + Android.)
========================================================= */

/* --- iOS / mobile typography stability (prevents “text on text”) --- */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 720px){
  body{ overflow-x: hidden; }
}

/* Safe area support (prevents footer being “hidden” by iPhone bars) */
@supports (padding: env(safe-area-inset-bottom)){
  body{
    padding-bottom: env(safe-area-inset-bottom);
  }
  footer{
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   MOBILE LAYOUT FIX — GUTTERS + SINGLE COLUMN
========================================================= */
@media (max-width: 720px){

  header{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Force clean wrapping everywhere */
  .philosophy-text,
  .copy,
  .manifesto,
  .contact-copy,
  .contact-channels{
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  /* Philosophy layout */
  .two-up{
    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }

  /* Trilogy gallery */
  .gallery{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Contact */
  .contact-grid{
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }

  /* iPhone Safari: stop rare text overlap/ghosting */
  .philosophy-text,
  .copy,
  .manifesto p,
  .contact-copy{
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    letter-spacing: 0.001em; /* microscopic “museum” tension */
  }

  /* Footer visibility + breathing room */
  footer{
    padding-top: 28px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================
   MUSEUM “WEIGHT” — TYPOGRAPHIC PERCEPTION (ALL DEVICES)
   (subtle: feels editorial, not “web default”)
========================================================= */

/* Slightly heavier perception without looking bold */
body{
  letter-spacing: 0.002em;
}

.manifesto h1,
.section-title,
.contact-title{
  letter-spacing: -0.018em;
}

.philosophy-text,
.copy,
.manifesto p,
.contact-copy{
  line-height: 2.02;              /* slower reading = more authority */
  color: rgba(0,0,0,0.58);        /* softer ink = gallery print feel */
}

/* Micro spacing rhythm = “institutional pacing” */
.copy p{ margin-bottom: 22px; }
.philosophy-text p{ margin-bottom: 24px; }

/* =========================================================
   IMAGE “CLARITY” — remove fog perception (very subtle)
========================================================= */
.art img,
.gallery img{
  filter: contrast(1.03) saturate(1.02);
}

/* =========================================================
   SCROLL FEEL + EXHIBITION REVEAL (CSS-only, progressive)
========================================================= */

/* Smooth but not “floaty” */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Scroll-driven reveals where supported (Chrome/Edge etc).
   Safari will simply ignore this — still looks perfect. */
@supports (animation-timeline: view()){
  .section,
  .two-up,
  .contact-grid,
  .manifesto{
    animation: perfecture-reveal 900ms cubic-bezier(.2,.8,.2,1) both;
    animation-timeline: view();
    animation-range: entry 10% cover 28%;
  }

  @keyframes perfecture-reveal{
    from{
      opacity: 0;
      transform: translateY(14px);
      filter: blur(1.2px);
    }
    to{
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}

/* =========================================================
   SUBTLE PAGE TRANSITIONS (progressive enhancement)
   Works in browsers that support View Transitions.
========================================================= */
@supports (view-transition-name: root){
  html{ view-transition-name: root; }

  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
  }

  ::view-transition-old(root){
    opacity: 1;
  }
  ::view-transition-new(root){
    opacity: 0;
  }
}
/* =========================================================
   TRILOGY MOBILE RHYTHM CALIBRATION
   (Museum breathing on iPhone)
========================================================= */

@media (max-width: 720px){

  .section{
    padding-top: 110px !important;
    padding-bottom: 110px !important;
  }

  .copy{
    line-height: 2.15 !important;
  }

  .copy p{
    margin-bottom: 26px !important;
  }

  .copy p:last-child{
    margin-bottom: 48px !important;
  }

}
/* =========================================================
   PERFECTURE — 0.001% MOBILE + MUSEUM FEEL PACK
   Paste at VERY BOTTOM of public/css/style.css
   (Overrides per-page styles without editing HTML)
========================================================= */

/* --- Global: cleaner text rendering + calmer motion --- */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth; /* “heavier” feel via eased navigation */
}

body{
  overflow-x: hidden;
  font-kerning: normal;
  text-rendering: geometricPrecision;
}

/* Subtle page-load “presence” (CSS-only) */
@media (prefers-reduced-motion: no-preference){
  body{
    animation: perfectureFadeIn 520ms cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes perfectureFadeIn{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  a, nav a{
    transition: color 220ms ease, opacity 220ms ease;
  }
}

/* “Perceptual weight” — still light, but more institutional */
:root{
  --museum-text: rgba(0,0,0,0.64);
  --museum-muted: rgba(0,0,0,0.46);
}

/* Apply to your main serif blocks (safe + subtle) */
.manifesto p,
.copy,
.philosophy-text,
.contact-copy,
.contact-channels{
  color: var(--museum-text);
  letter-spacing: 0.002em;
  font-variant-ligatures: common-ligatures;
}

/* Prevent ugly iOS hyphen breaks like “Pres-ence” */
.copy,
.philosophy-text,
.manifesto p,
.contact-copy{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  overflow-wrap: break-word;
  word-break: normal;
}

/* --- iPhone / small phones: safe gutters + exhibition spacing --- */
@media (max-width: 720px){

  /* Safe gutter (forces “museum wall” margins) */
  header{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Make small-screen typography feel calmer + more “curated” */
  .manifesto h1,
  .section-title,
  .contact-title{
    letter-spacing: -0.015em;
  }

  .manifesto p,
  .copy,
  .philosophy-text,
  .contact-copy{
    font-size: 17px;          /* slightly more “printed” */
    line-height: 2.05;        /* slower, gallery-like reading */
  }

  /* Philosophy: single column + remove any collision */
  .two-up{
    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }

  /* If any page-internal CSS tries to constrain differently, we win */
  .philosophy-text{
    max-width: 100% !important;
  }

  /* Trilogy gallery: single column */
  .gallery{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Contact: single column */
  .contact-grid,
  .grid{
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }

  /* Slightly more “exhibition” spacing between paragraphs */
  .copy p{ margin-bottom: 26px; }
  .philosophy-text p{ margin-bottom: 26px !important; }
  .philosophy-text p:last-child,
  .copy p:last-child{ margin-bottom: 0 !important; }

  /* Footer breathing room on phones */
  footer{
    padding-top: 44px;
    padding-bottom: 34px;
  }
}

/* --- Images: remove “foggy” perception (very subtle, still quiet) --- */
img{
  image-rendering: auto;
}

@media (prefers-reduced-motion: no-preference){
  /* Only a tiny clarity lift; keeps the museum softness */
  .art img,
  .gallery img{
    filter: contrast(1.04) saturate(1.02);
  }
}

/* --- “Scroll friction illusion” (CSS-only safe version) --- */
/* Makes scroll feel more controlled on iOS/Android without breaking anything */
body{
  overscroll-behavior-y: none;
}