/* Matilda portfolio
   Type: Glacial Indifference only
   Rules: square corners, no lines, one colour per line of text */

:root{
  --stone:#ffffff;
  --paper:#f4f2ee;
  --ink:#191817;
  --soft:#6e6860;
  --tan:#dcc7b2;
  --night:#191817;
  --project:#1f5c54;
  --project-bg:#1f5c54;

  /* names still used inline in older case study markup */
  --red:var(--ink);
  --panel:var(--paper);
  --panel-line:transparent;
  --green:var(--ink);
  --green-light:var(--paper);

  --font:'Glacial Indifference','Century Gothic','Avenir Next',sans-serif;
  --gutter:clamp(16px,5vw,72px);
  --max:1320px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;border-radius:0 !important;}
html{scroll-behavior:smooth;}
body{background:var(--stone);color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body *{font-family:var(--font) !important;border:0 !important;text-decoration:none !important;}
a{color:inherit;}
img{max-width:100%;display:block;}
b,strong{font-weight:700;}
h1,h2,h3,h4{font-weight:400;line-height:1.04;letter-spacing:-.01em;}
ul{list-style:none;}
::selection{background:var(--ink);color:var(--paper);}
hr,.divider{display:none !important;}

.container,.wrap,.wrap-wide{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}

.label,.kicker,.eyebrow,.eyebrow-plain,.section-label,.fullshot-label{
  display:block;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-bottom:22px;
}

/* ===== HEADER ===== */
.top{position:sticky;top:0;z-index:20;background:var(--stone);}
.top .container{display:flex;justify-content:space-between;align-items:center;height:76px;}
.brand{font-size:15px;font-weight:700;letter-spacing:.32em;}
.top nav{display:flex;gap:36px;}
.top nav a{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);transition:color .2s;}
.top nav a:hover,.top nav a.active{color:var(--ink);}

/* ===== BUTTONS ===== */
.btn{display:inline-block;padding:18px 30px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:var(--paper);transition:background .25s,color .25s;}
.btn:hover{background:#3a3631;}
.btn-soft{background:var(--paper);color:var(--ink);}
.btn-soft:hover{background:var(--tan);}

/* ===== HERO ===== */
.hero{padding:48px 0 96px;}
.hero .container{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,6vw,96px);align-items:end;}
.hero h1{font-size:clamp(46px,6.6vw,100px);line-height:1;margin-bottom:34px;}
.hero p{font-size:20px;color:var(--soft);max-width:34ch;margin-bottom:40px;}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;}
.portrait{background:var(--tan);aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
.portrait img{width:84%;mix-blend-mode:multiply;transition:transform .8s ease;}
.portrait:hover img{transform:scale(1.03);}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:56px 0 0;}
.facts small{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:6px;}
.facts span{font-size:19px;}

/* ===== SECTIONS ===== */
.section{padding:120px 0;}
.section-title{font-size:clamp(40px,5vw,72px);margin-bottom:72px;max-width:14ch;}

/* ===== WORK ===== */
.project{display:block;margin-bottom:120px;}
.project:last-child{margin-bottom:0;}
.shot{background:var(--project-bg);padding:clamp(24px,6vw,96px) clamp(24px,6vw,96px) 0;overflow:hidden;}
.shot img{width:100%;box-shadow:0 30px 70px -30px rgba(0,0,0,.45);transform:translateY(12px);transition:transform .6s ease;}
.project:hover .shot img{transform:translateY(0);}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding-top:40px;}
.project-meta h3{font-size:clamp(36px,4vw,60px);}
.project-meta .kind{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:14px;display:block;}
.project-meta p{color:var(--soft);margin-bottom:28px;}
.stack{font-size:15px;color:var(--ink);margin-bottom:32px;}

/* ===== SERVICES ===== */
.dark{background:var(--night);color:var(--paper);}
.dark .label{color:#a59d92;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);}
.service h3{font-size:30px;margin-bottom:14px;}
.service p{color:#bdb6ab;font-size:17px;}

/* ===== ABOUT ===== */
.about .container{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,80px);}
.statement{font-size:clamp(30px,3.6vw,52px);line-height:1.15;margin-bottom:40px;}
.about-copy{color:var(--soft);max-width:56ch;margin-bottom:48px;}
.about-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px;margin-bottom:48px;}
.about-facts small{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:4px;}

/* ===== CONTACT ===== */
.contact{background:var(--tan);padding:140px 0 48px;}
.contact h2{font-size:clamp(52px,9vw,140px);line-height:.95;margin-bottom:48px;}
.mail{display:inline-block;font-size:clamp(22px,2.8vw,36px);transition:color .2s;}
.mail:hover{color:#6b4a33;}
.fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:140px;font-size:14px;color:#5b4c3f;}
.fine nav{display:flex;gap:28px;}
.fine a:hover{color:var(--ink);}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease;}
.reveal.in{opacity:1;transform:none;}

/* ===== CASE STUDIES ===== */
.cs-hero{padding:72px 0 96px;}
.cs-hero .eyebrow{margin-bottom:26px;}
.cs-hero h1{font-size:clamp(50px,8vw,124px);line-height:.98;margin-bottom:24px;max-width:12ch;}
.cs-hero .sub{font-size:20px;color:var(--soft);}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-top:72px;}
.cs-meta-item{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);}
.cs-meta-item b{display:block;margin-top:8px;font-size:18px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);}
.live-btn,.coming-soon-badge{display:inline-block;color:var(--ink) !important;background:var(--paper);padding:8px 14px;font-size:15px;transition:background .2s;}
.live-btn:hover{background:var(--tan);}

.pages-section{background:var(--project);padding:96px 0;}
.pages-section h2{font-size:clamp(28px,3vw,40px);margin-bottom:40px;color:var(--paper);}
.pages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pages-grid.three{grid-template-columns:repeat(3,1fr);}
.page-card{background:var(--paper);overflow:hidden;}
.page-card img{width:100%;height:auto;transition:transform .5s ease;}
.page-card:hover img{transform:scale(1.03);}
.page-label{padding:16px 18px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
.page-label a{color:var(--ink) !important;}

.mobile-section{background:var(--paper);padding:96px 0;}
.mobile-section h2{font-size:clamp(28px,3vw,40px);margin-bottom:14px;}
.mobile-intro{color:var(--soft);max-width:52ch;margin-bottom:48px;}
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(16px,1.6vw,28px);max-width:1080px;}
.phones:has(> :nth-child(2):last-child){max-width:640px;}
.phones:has(> :nth-child(3):last-child){max-width:960px;}
.phone img{width:100%;height:auto;box-shadow:0 30px 60px -32px rgba(0,0,0,.4);}
.phone figcaption{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);}

.cs-body{padding:120px 0;}
.cs-body > .wrap{max-width:900px;}
.cs-section{margin-bottom:80px;}
.cs-section h2{font-size:clamp(30px,3vw,42px);margin-bottom:20px;}
.cs-section p{font-size:21px;line-height:1.7;margin-bottom:20px;}
.fullshot-section{padding:0 0 100px;}
.fullshot-title{font-size:clamp(34px,4vw,56px);margin-bottom:24px;}
.fullshot-title a{display:block;width:max-content;margin-top:18px;font-size:13px !important;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--soft) !important;}
.fullshot-desc{font-size:19px;line-height:1.75;color:var(--soft);margin-bottom:18px;}
.fullshot-img{margin-top:40px;background:var(--paper);padding:clamp(12px,3vw,40px);}
.fullshot-img img{width:100%;height:auto;}
.coming-soon-block{background:var(--paper);padding:64px 40px;}
.coming-soon-block h3{font-size:34px;margin-bottom:14px;}
.coming-soon-block p{color:var(--soft);}
.cs-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px;}
.tag{background:var(--paper);padding:10px 14px;font-size:14px;}

.cs-footer-nav{background:var(--paper);}
.cs-footer-nav .wrap-wide{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:80px;padding-bottom:80px;}
.cs-footer-nav a{font-size:clamp(26px,3vw,42px);transition:color .2s;}
.cs-footer-nav a:last-child{text-align:right;}
.cs-footer-nav a:hover{color:var(--soft);}

/* ===== ABOUT PAGE ===== */
.about-top{padding:48px 0 120px;}
.photo-bio-grid{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:clamp(32px,6vw,96px);align-items:start;}
.photo-bio-grid img{width:100% !important;height:auto !important;aspect-ratio:4/5;object-fit:cover;object-position:center top;}
.about-intro h1{font-size:clamp(50px,7vw,108px);margin-bottom:40px;}
.skills-section{background:var(--paper);padding:120px 0;}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:16px;}
.skill-card h3{font-size:28px;margin-bottom:20px;}
.skill-card li{color:var(--soft);padding:3px 0;}

/* ===== RESPONSIVE ===== */
@media (max-width:1000px){
  .pages-grid,.pages-grid.three{grid-template-columns:repeat(2,1fr);}
  .facts{grid-template-columns:repeat(2,1fr);row-gap:28px;}
}
@media (max-width:760px){
  body{font-size:17px;}
  .top .container{height:64px;}
  .brand{font-size:14px;letter-spacing:.26em;}
  .top nav{gap:18px;}
  .top nav a{font-size:12px;letter-spacing:.14em;}
  .hero{padding:24px 0 72px;}
  .hero .container{grid-template-columns:1fr;}
  .portrait{order:-1;aspect-ratio:1/1;}
  .portrait img{width:66%;}
  .section{padding:88px 0;}
  .section-title{margin-bottom:48px;}
  .project{margin-bottom:88px;}
  .project-meta,.about .container,.photo-bio-grid{grid-template-columns:1fr;}
  .project-meta{gap:20px;padding-top:28px;}
  .services-grid,.skills-grid,.pages-grid,.pages-grid.three,.about-facts{grid-template-columns:1fr;}
  .contact{padding:96px 0 40px;}
  .fine{margin-top:96px;}
  .mobile-section{padding:72px 0;}
  .phones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:8px;}
  .phone{flex:0 0 72%;scroll-snap-align:start;}
  .cs-footer-nav .wrap-wide{grid-template-columns:1fr;}
  .cs-footer-nav a:last-child{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
}