/* Simples — philosophy page
   Converted 1:1 from the Claude Design handoff (design_handoff_simples_site/html/).
   Values are final: do not re-tune colours, sizes, spacing or motion timings. */

/* Philosophy overrides two .dark values from simples.css (wider copy column,
   6-column right rail). Kept here so the shared base stays canonical. */
.dark p{color:var(--grey-30);max-width:560px}
@media (min-width:1200px){.dark .inner{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.dark .dl{grid-column:span 5;display:flex;flex-direction:column;gap:24px}.dark .dr{grid-column:7/span 5;display:flex;flex-direction:column;gap:32px;justify-content:flex-end}}

/* philosophy */
.ph-hero{padding-top:var(--pad-y);padding-bottom:calc(var(--pad-y)*.75);display:flex;flex-direction:column;gap:24px;animation:fadeUp var(--t-base) ease both}
.ph-hero h1{font-size:32px;font-weight:300;line-height:1.35;letter-spacing:0.03em}
.ph-hero p{color:var(--grey-60);max-width:640px}
.ph-lead{font-size:15px}
@media (min-width:768px){.ph-hero{gap:32px}.ph-hero h1{font-size:44px;line-height:1.3}.ph-lead{font-size:17px}}
@media (min-width:1200px){.ph-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.ph-hero>.label{grid-column:span 4}.ph-hero>.ph-body{grid-column:5/span 8;display:flex;flex-direction:column;gap:40px}.ph-hero h1{font-size:56px}}
.ph-body{display:contents}@media (min-width:1200px){.ph-body{display:flex}}
.ph-hero h1 br{display:none}@media (min-width:768px){.ph-hero h1 br{display:inline}}
.man{padding:48px 0;display:flex;flex-direction:column;gap:16px}
.man h2{font-size:24px}
.man p{max-width:640px}
@media (min-width:768px){.man{padding:64px 0;gap:24px}.man h2{font-size:28px}.man p{font-size:17px}}
@media (min-width:1200px){.man{padding:96px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.man .man-l{grid-column:span 4;display:flex;flex-direction:column;gap:24px}.man p{grid-column:5/span 8}.man h2{font-size:32px}}
.man-l{display:contents}@media (min-width:1200px){.man-l{display:flex}}
.sec2{display:flex;flex-direction:column;gap:32px}
@media (min-width:768px){.sec2{gap:40px}}
@media (min-width:1200px){.sec2{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.sec2>.sec2-l{grid-column:span 4;display:flex;flex-direction:column;gap:24px}.sec2>.sec2-r{grid-column:5/span 8}}
.sec2-l{display:flex;flex-direction:column;gap:16px}
.prin{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:baseline;padding:20px 0;border-top:1px solid var(--hairline)}
.prin .no{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-60)}
.prin span:last-child{font-size:17px;line-height:1.6}
@media (min-width:768px){.prin{grid-template-columns:56px 1fr;gap:16px;padding:24px 0}.prin span:last-child{font-size:20px;line-height:1.5}}
@media (min-width:1200px){.prin{grid-template-columns:80px 1fr;gap:24px;padding:28px 0}}
.who{display:flex;flex-direction:column;gap:24px}
.who .lead{font-size:15px;max-width:640px}
@media (min-width:768px){.who .lead{font-size:17px}.who{gap:32px}}
@media (min-width:1200px){.who{gap:40px}}
.photos{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.photos{grid-template-columns:1fr 1fr}}
.photo{aspect-ratio:4/3;background:#F2F2F0;display:flex;align-items:flex-end;padding:16px}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ph-cta{display:flex;flex-direction:column;gap:24px}
.ph-cta h2{font-size:32px}
@media (min-width:768px){.ph-cta{gap:28px}.ph-cta h2{font-size:40px}}
@media (min-width:1200px){.ph-cta{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.ph-cta>div{grid-column:5/span 8;display:flex;flex-direction:column;gap:32px}.ph-cta h2{font-size:48px}}
.ph-cta .cta-signal{align-self:flex-start}

/* ---- geo map (2026-09-04): stands in for the two b&w photos ----------- */
.geo-map{position:relative;background:#F2F2F0;aspect-ratio:4/3;overflow:hidden}
@media (min-width:768px){.geo-map{aspect-ratio:2/1}}
@media (min-width:1200px){.geo-map{aspect-ratio:1200/520}}
.geo-map svg{position:absolute;inset:0;width:100%;height:100%}
.geo-map .grid path{fill:none;stroke:var(--hairline);stroke-width:1}
.geo-map .route{fill:none;stroke:var(--black);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1600ms cubic-bezier(.2,.7,.2,1) 300ms}
.geo-map .route+.route{transition-delay:700ms}
.is-in .geo-map .route{stroke-dashoffset:0}
.geo-map .node{fill:var(--black)}
.geo-map .pulse{fill:var(--signal)}
.geo-face{position:absolute;transform:translate(-50%,-50%);display:flex}
.geo-face .face{display:flex;gap:6px}
.geo-face .face .glyph{width:10px;height:10px}
.geo-label{position:absolute;transform:translate(-50%,18px);white-space:nowrap;font-size:11px;color:var(--grey-60)}
.geo-label b{font-weight:400;color:var(--black);margin-right:6px}
.geo-label.is-r{transform:translate(-100%,-32px)}
.geo-label.is-b{transform:translate(0,18px)}
@media (min-width:768px){.geo-label{font-size:12px}.geo-face .face{gap:8px}.geo-face .face .glyph{width:12px;height:12px}}
@media (min-width:1200px){.geo-label{font-size:13px}}
@media (prefers-reduced-motion:reduce){.geo-map .route{stroke-dashoffset:0;transition:none}.geo-map .pulse{display:none}}