/* ============================================================
   Michael Wearne — clean design system
   One typeface (Archivo), warm palette, generous whitespace.
   ============================================================ */

:root{
  --paper:#F4F1E9;
  --paper-soft:#ECE7DB;
  --ink:#1B1A16;
  --ink-soft:#3E3B33;
  --grey:#8A857B;
  --line:#E0DACE;
  --accent:#5A6B5C;
  --max:1080px;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:350;font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.label{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:rgba(244,241,233,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:80px}
.brand{font-family:'Questrial',sans-serif;font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:400;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-family:'Inter',sans-serif;font-size:15px;color:var(--grey);transition:color .2s}
.nav a:hover,.nav a.on{color:var(--ink)}

/* ---- text link ---- */
.more{display:inline-block;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px;transition:color .2s,border-color .2s}
.more:hover{color:var(--ink);border-color:var(--grey)}

/* ---- sections ---- */
/* anchored targets stop clear of the sticky header */
section[id],.service[id]{scroll-margin-top:110px}
main section{padding:120px 0;border-top:1px solid var(--line)}
main section.flush{border-top:none}
main section.tight{padding-top:0}
.sec-head{margin-bottom:88px}
.sec-head .label{display:block;margin-bottom:24px}
.sec-head h2{font-size:clamp(30px,4vw,48px);font-weight:400;letter-spacing:-.02em;line-height:1.16;max-width:24ch;text-wrap:balance}

/* ---- home hero ---- */
.hero{padding:132px 0 116px}
.hero .label{display:block;margin-bottom:34px}
.hero h1{font-size:clamp(40px,6vw,72px);font-weight:400;line-height:1.08;letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.hero p{margin-top:40px;max-width:54ch;font-size:19px;color:var(--ink-soft)}
.hero .cta{margin-top:46px}

/* ---- text + image split (home hero & "how I work") ----
   Figures stretch to the exact height of the text column
   beside them, so image + caption share the text box's top
   and bottom edges — every split reads as one clean block. */
.split-figure{margin:0}
.split-figure img{width:100%;display:block;aspect-ratio:9/10;object-fit:cover;object-position:60% center;background:#1B1A18;border-radius:var(--radius)}
.split-figure figcaption{margin-top:14px;font-size:13px;letter-spacing:.06em;color:var(--grey)}
.hero.split .split-figure,.split-row .split-figure,.page-hero.split .split-figure{
  align-self:stretch;display:flex;flex-direction:column;min-width:0;
}
/* when the image is the taller column, the text sits balanced
   beside it instead of leaving a gap at the bottom */
.hero.split > :not(.split-figure),.split-row > :not(.split-figure),.page-hero.split > :not(.split-figure){align-self:center}
.about > *{align-self:center}
.hero.split .split-figure img,.split-row .split-figure img,.page-hero.split .split-figure img{
  flex:1;height:auto;min-height:340px;aspect-ratio:auto;
}
.hero.split .split-figure figcaption,.split-row .split-figure figcaption,.page-hero.split .split-figure figcaption{flex:0 0 auto}
/* image placeholder slot — swap the .ph-box for an <img> when the photo exists */
.ph-box{width:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:9/10;border:1px dashed var(--grey);border-radius:var(--radius);background:var(--paper-soft);color:var(--grey);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
/* let split-layout cells shrink instead of forcing the page wider than the viewport */
.hero.split > *,.page-hero.split > *,.split-row > *,.about > *{min-width:0}

.hero.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;padding:128px 0 120px}
.hero.split .intro{min-width:0}
.hero.split h1{font-size:clamp(40px,5.2vw,66px);max-width:none}
.hero.split p{max-width:46ch;font-size:20px}
.hero.split .split-figure{order:0}                 /* photo to the right */

.split-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin-bottom:88px}
.split-row .sec-head{margin-bottom:0}              /* photo to the right of the heading */
.split-row .sec-head p{margin-top:26px;max-width:42ch;color:var(--ink-soft);font-size:18px}
.split-row.media-left .split-figure{order:-1}      /* opt-in: photo to the left */

/* Japanese aside (about teaser) */
.jp span[lang=ja]{font-size:1.15em;letter-spacing:.08em}

/* ---- page hero (inner pages) ---- */
.page-hero{padding:116px 0 80px}
.page-hero .label{display:block;margin-bottom:26px}
.page-hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:400;line-height:1.1;letter-spacing:-.025em;max-width:18ch;text-wrap:balance}
.page-hero h1 em{font-style:normal;color:var(--grey)}
.page-hero .lede{margin-top:36px;max-width:56ch;font-size:19px;color:var(--ink-soft)}
.page-hero.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.page-hero.split .intro{min-width:0}
.page-hero.split h1{font-size:clamp(34px,4.4vw,52px);max-width:none}
.page-hero.split .lede{max-width:48ch}

/* ---- two paired pillars (home services) ----
   Subgrid keeps the two columns in lockstep: heading, intro, each
   list item and the closing link all share rows, so nothing drifts
   when one side's text wraps a line longer. The list itself uses
   display:contents so its items join the shared rows. ---- */
.pillars{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;grid-template-rows:auto auto auto 1fr auto}
.pillar{display:grid;grid-template-rows:subgrid;grid-row:span 5;border-top:2px solid var(--ink);padding-top:36px}
.pillar h3{font-size:28px;font-weight:450;letter-spacing:-.015em}
.pillar > p{margin-top:18px;color:var(--ink-soft);font-size:18px;max-width:42ch}
.pillar ul{list-style:none;display:contents}
.pillar li{padding:22px 0;border-top:1px solid var(--line)}
.pillar li:first-of-type{margin-top:36px}
.pillar li:last-child{border-bottom:1px solid var(--line)}
.pillar .svc{display:flex;align-items:baseline;gap:11px;font-size:17.5px;font-weight:450;letter-spacing:-.01em;color:var(--ink)}
.pillar .svc::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.pillar .svc-desc{display:block;margin-top:8px;margin-left:17px;font-size:15px;line-height:1.55;color:var(--grey);max-width:40ch}
.pillar .more{margin-top:34px}

/* ---- creativity (the spine) ---- */
.creative .lead{font-size:clamp(23px,2.9vw,33px);font-weight:400;line-height:1.4;letter-spacing:-.01em;max-width:30ch;color:var(--ink)}
.creative .lead b{font-weight:450}
.creative .sub{margin-top:30px;max-width:56ch;color:var(--ink-soft);font-size:17px}
.creative .grid{margin-top:68px}
.note{margin-top:48px}

/* ---- photo grid (home) ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;background:#1B1A18;border-radius:var(--radius)}

/* ---- service detail blocks (services page) ---- */
.service{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;padding:60px 0;border-top:1px solid var(--line)}
.service:first-of-type{border-top:none;padding-top:0}
.service .head h3{font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:-.015em;line-height:1.15}
.service .head .tag{display:block;margin-top:16px;font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.service .body p{color:var(--ink-soft);margin-bottom:18px}
.service .body ul{list-style:none;margin-top:30px}
.service .body li{padding:18px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:16px;display:flex;align-items:baseline;gap:12px}
.service .body li:last-child{border-bottom:1px solid var(--line)}
.service .body li::before{content:"";flex:0 0 6px;height:6px;margin-top:9px;border-radius:50%;background:var(--accent)}

/* ---- process steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.step .label{display:block;margin-bottom:20px}
.step h3{font-size:19px;font-weight:400;letter-spacing:-.01em;margin-bottom:10px}
.step p{font-size:15px;color:var(--ink-soft)}

/* ---- faq ---- */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:30px 0;font-size:19px;font-weight:400;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto;color:var(--grey)}
.faq details[open] summary .pm::before{content:"–"}
.faq details:not([open]) summary .pm::before{content:"+"}
.faq .ans{padding:0 0 30px;max-width:64ch;color:var(--ink-soft);font-size:16px}

/* ---- showcase (photography page) ----------------------------
   A masonry wall of twenty frames in varying dimensions.
   Filter chips narrow the wall by theme; tiles lift gently and
   their photographs ease closer on hover. Placeholder plates
   (.ph-box) mark where new work drops in — swap each for an
   <img> with the same aspect-ratio. */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.chip{
  font-family:'Inter',sans-serif;font-size:13.5px;letter-spacing:.03em;
  padding:9px 20px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--grey);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.masonry{columns:3;column-gap:24px}
.masonry .tile{break-inside:avoid;margin:0 0 24px;transition:opacity .8s ease,transform .8s ease}
.masonry .tile.hide{display:none}
.tile .crop{overflow:hidden;border-radius:var(--radius);background:#1B1A18}
.tile .crop img{width:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover .crop img{transform:scale(1.04)}
.tile .ph-box{aspect-ratio:auto}
.tile figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:16px;font-size:13px;letter-spacing:.04em;color:var(--grey)}
.tile figcaption span:last-child{color:var(--accent)}
@media(max-width:900px){.masonry{columns:2}}
@media(max-width:600px){.masonry{columns:1}}

/* ---- lightbox -----------------------------------------------
   Click a photograph and it opens full size in a quiet dark
   room: thin sharp border, caption beneath, nothing else.
   Closes on ×, Esc, or a click outside the frame. */
.lightbox{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,4vw,48px);background:rgba(27,26,22,.92);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox figure{margin:0;max-width:min(1240px,94vw)}
.lightbox img{
  display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;
  border:1px solid var(--paper);border-radius:0;background:#1B1A18;
}
.lightbox figcaption{margin-top:14px;display:flex;justify-content:space-between;gap:16px;font-size:13px;letter-spacing:.06em;color:var(--paper-soft)}
.lb-close{
  position:absolute;top:16px;right:24px;background:none;border:none;cursor:pointer;
  color:var(--paper);font-family:'Archivo',sans-serif;font-weight:350;font-size:40px;line-height:1;
  transition:color .2s;
}
.lb-close:hover{color:var(--accent)}
/* small expandable "how this image was made" window */
.lb-details{margin-top:10px}
.lb-details summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:baseline;gap:8px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-soft);opacity:.75;
  transition:opacity .2s;
}
.lb-details summary:hover{opacity:1}
.lb-details summary::-webkit-details-marker{display:none}
.lb-details summary::after{content:"+";color:var(--accent);font-size:14px}
.lb-details[open] summary::after{content:"–"}
.lb-details p{
  margin-top:10px;padding:12px 16px;border:1px solid rgba(244,241,233,.35);
  font-size:13.5px;line-height:1.6;color:var(--paper-soft);max-width:56ch;
}
.tile .crop{cursor:zoom-in}
body.lb-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.lightbox{transition:none}}

/* ---- gallery (photography page) ---- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.gallery figure{margin:0}
.gallery img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;background:#1B1A18}
.gallery .wide{grid-column:1 / -1}
.gallery .wide img{aspect-ratio:16/9}
.gallery figcaption{margin-top:12px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--grey)}

/* ---- about ---- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
/* on the About page the block opens a flush section, so give it air below the hairline */
.tight .about{padding-top:64px}
.about h2{font-size:clamp(24px,2.8vw,34px);font-weight:400;letter-spacing:-.02em;line-height:1.22;text-wrap:balance}
.about p{color:var(--ink-soft);margin-bottom:24px}
.portrait{margin:0}
.portrait img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;background:#1B1A18;border-radius:var(--radius)}
.portrait figcaption{margin-top:12px;font-size:13px;color:var(--grey)}
.prose{max-width:60ch}
.prose p{color:var(--ink-soft);margin-bottom:22px}
.creds{list-style:none}
.creds li{padding:16px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:16px;display:flex;align-items:baseline;gap:12px}
.creds li::before{content:"";flex:0 0 6px;height:6px;margin-top:9px;border-radius:50%;background:var(--accent)}

/* ---- contact ---- */
.contact h2{font-size:clamp(40px,6.2vw,82px);font-weight:400;letter-spacing:-.025em;line-height:1.06}
.contact h2 a{border-bottom:2px solid var(--ink);transition:color .25s,border-color .25s}
.contact h2 a:hover{color:var(--accent);border-color:var(--accent)}
.contact .lines{margin-top:48px;display:flex;gap:36px;flex-wrap:wrap;font-size:15px;color:var(--grey)}
.contact .lines a:hover{color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.cdl div{display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.cdl div:last-child{border-bottom:1px solid var(--line)}
.cdl dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.cdl dd{color:var(--ink-soft);text-align:right;font-size:16px}
.fine{margin-top:32px;color:var(--grey);font-size:14px;max-width:46ch}
form label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin:28px 0 8px}
form input,form textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--ink);padding:10px 0;font-family:inherit;font-size:17px;color:var(--ink);border-radius:0}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent)}
form button{margin-top:36px;background:var(--ink);color:var(--paper);border:none;padding:16px 32px;font-family:inherit;font-size:14px;letter-spacing:.04em;cursor:pointer;transition:background .25s}
form button:hover{background:var(--accent)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:40px;padding-bottom:48px;font-family:'Inter',sans-serif;font-size:14px;color:var(--grey)}
.foot-nav a{margin-right:24px;transition:color .2s}
.foot-nav a:last-child{margin-right:0}
.foot-nav a:hover{color:var(--ink)}

/* ---- reveal + a11y ---- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* ---- headline reveal ----------------------------------------
   Soft reveal: headings simply ease in — a quiet fade with the
   gentlest lift. Replays on every pass, scrolling down or up
   (the observer in main.js resets elements once they have
   fully left the viewport). */
h1.rv,h2.rv,.rv h1,.rv h2{
  opacity:0;transform:translateY(10px);
  transition:opacity 1.1s ease .1s,transform 1.1s ease .1s;
}
h1.rv.in,h2.rv.in,.rv.in h1,.rv.in h2{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  h1.rv,h2.rv,.rv h1,.rv h2{opacity:1;transform:none;transition:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- responsive ---- */
@media(max-width:760px){
  section[id],.service[id]{scroll-margin-top:160px}
  header .wrap{flex-direction:column;align-items:flex-start;gap:18px;height:auto;padding-top:22px;padding-bottom:22px}
  .nav{flex-wrap:wrap;gap:14px 22px}
  .hero{padding:92px 0 76px}
  .hero.split{grid-template-columns:1fr;gap:40px;padding:84px 0 72px}
  .split-row{grid-template-columns:1fr;gap:32px;margin-bottom:48px}
  .split-figure{order:0}
  .split-figure img,.ph-box{aspect-ratio:3/2}
  .hero.split .split-figure,.split-row .split-figure,.page-hero.split .split-figure{align-self:auto;display:block}
  .hero.split .split-figure img,.split-row .split-figure img,.page-hero.split .split-figure img{flex:none;min-height:0;aspect-ratio:3/2}
  .page-hero{padding:84px 0 60px}
  .page-hero.split{grid-template-columns:1fr;gap:40px}
  main section{padding:88px 0}
  .sec-head{margin-bottom:60px}
  .pillars{grid-template-columns:1fr;grid-template-rows:none;gap:52px}
  .pillar{display:block}
  .creative .grid,.grid{grid-template-columns:1fr;gap:14px}
  .grid img{aspect-ratio:4/3}
  .service{grid-template-columns:1fr;gap:22px;padding:46px 0}
  .steps{grid-template-columns:1fr 1fr;gap:36px}
  .gallery{grid-template-columns:1fr;gap:18px}
  .gallery img,.gallery .wide img{aspect-ratio:4/3}
  .about,.contact-grid{grid-template-columns:1fr;gap:40px}
}