:root{
  /* Light and dark tone sets. Sections flip between them. */
  --light:#ffffff; --dark:#000000;
  --mute-on-light:#6b6b6b; --mute-on-dark:#9a9a9a;
  --line-on-light:#d9d9d9; --line-on-dark:#2e2e2e;
  --paper:var(--light);
  --ink:var(--dark);
  --mute:var(--mute-on-light);
  --line:var(--line-on-light);
  --frame-a:#1a1a1a;
  --frame-b:#5a5a5a;
  --serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Work Sans", "Helvetica Neue", Arial, sans-serif;
  --pad:clamp(20px, 5vw, 72px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:var(--dark); --ink:var(--light); --mute:var(--mute-on-dark); --line:var(--line-on-dark); --frame-a:#141414; --frame-b:#4a4a4a; }
}
:root[data-theme="dark"]{ --paper:var(--dark); --ink:var(--light); --mute:var(--mute-on-dark); --line:var(--line-on-dark); --frame-a:#141414; --frame-b:#4a4a4a; }

/* Inverted sections: the opposite tone of the page */
.invert{ --paper:var(--dark); --ink:var(--light); --mute:var(--mute-on-dark); --line:var(--line-on-dark); background:var(--paper); color:var(--ink); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .invert{ --paper:var(--light); --ink:var(--dark); --mute:var(--mute-on-light); --line:var(--line-on-light); }
}
:root[data-theme="dark"] .invert{ --paper:var(--light); --ink:var(--dark); --mute:var(--mute-on-light); --line:var(--line-on-light); }

*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px); }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

/* Nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:10; display:flex; justify-content:space-between; align-items:baseline;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--pad) 18px; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); }
.nav .mark{ font-family:var(--serif); font-style:italic; font-size:22px; text-decoration:none; }
.nav ul{ list-style:none; display:flex; gap:32px; margin:0; padding:0; font-size:14px; letter-spacing:.02em; }
.nav a{ text-decoration:none; }
.nav a:hover{ text-decoration:underline; text-underline-offset:5px; }
@media (max-width:640px){ .nav li:not(:last-child){ display:none; } }

/* Image frames */
.frame{ position:relative; overflow:hidden; background:
  radial-gradient(ellipse 55% 45% at 38% 35%, var(--frame-b), transparent 70%),
  linear-gradient(160deg, var(--frame-a), #000 80%); }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Hero */
.hero{ min-height:100svh; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:1fr auto; align-items:end; padding:68px var(--pad) clamp(28px,5vw,64px); position:relative; }
.hero .frame{ grid-column:6 / -1; grid-row:1 / 3; align-self:stretch; margin-right:calc(-1 * var(--pad)); min-height:72svh;
  animation:reveal 1.6s cubic-bezier(.2,.7,.1,1) both; }
.hero .words{ grid-column:1 / -1; grid-row:1; position:relative; z-index:2; mix-blend-mode:difference; color:#fff; pointer-events:none; }
.wordmark .second{ display:block; padding-left:.9em; }
.wordmark{ font-family:"Italianno", "Snell Roundhand", "Apple Chancery", cursive; font-style:normal; font-weight:400; font-size:clamp(64px, 13vw, 210px); line-height:.72; letter-spacing:0; margin:0 0 .08em -.02em; }
.hero .sub{ grid-column:1 / 6; grid-row:2; align-self:start; margin:0; max-width:28ch; font-family:var(--serif); font-size:clamp(20px,2.1vw,28px); line-height:1.35; position:relative; z-index:3; }
.hero .sub a{ display:inline-block; margin-top:28px; font-family:var(--sans); font-size:14px; letter-spacing:.02em; padding:12px 22px; border:1px solid var(--ink); text-decoration:none; }
.hero .sub a:hover{ background:var(--ink); color:var(--paper); }
@keyframes reveal{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; align-items:start; }
  .hero .frame{ grid-column:1; grid-row:1; min-height:62svh; margin:0 calc(-1 * var(--pad)); }
  .hero .words{ grid-column:1; align-self:end; margin-bottom:-.1em; }
  .wordmark{ font-size:clamp(76px, 22vw, 150px); }
  .hero .sub{ grid-column:1; grid-row:2; margin-top:32px; }
}
@media (prefers-reduced-motion:reduce){ .hero .frame{ animation:none; } html{ scroll-behavior:auto; } }

/* Sections */
section{ padding:clamp(48px,7vw,96px) var(--pad); }
h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,60px); line-height:1.05; letter-spacing:-.015em; margin:0 0 .6em; }
.lede{ font-family:var(--serif); font-size:clamp(20px,1.9vw,25px); line-height:1.5; max-width:34ch; }
p{ max-width:62ch; margin:0 0 1em; }
.muted{ color:var(--mute); }

/* About */
.about{ display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; }
.about h2{ grid-column:1 / 5; }
.about .body{ grid-column:6 / 12; }
.promises{ grid-column:6 / 12; margin:48px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:32px 40px; }
.promises dt{ font-family:var(--serif); font-size:21px; margin-bottom:6px; }
.promises dd{ margin:0; font-size:15px; color:var(--mute); }
@media (max-width:760px){ .about h2,.about .body,.promises{ grid-column:1 / -1; } .promises{ grid-template-columns:1fr; } }

/* Work */
.work{ padding-left:0; padding-right:0; }
.work h2{ padding:0 var(--pad); }
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:0 var(--pad); }
/* Three per row. A last row with two photos splits the width in half; a single leftover spans the row. All rows share one height. */
.gallery .frame{ grid-column:span 2; aspect-ratio:4/5; }
.gallery .frame:nth-child(3n+1):nth-last-child(2),
.gallery .frame:nth-child(3n+1):nth-last-child(2) ~ .frame{ grid-column:span 3; aspect-ratio:6/5; }
.gallery .frame:nth-child(3n+1):last-child{ grid-column:span 6; aspect-ratio:12/5; }
@media (max-width:760px){
  .gallery .frame:nth-child(n){ grid-column:span 3; aspect-ratio:4/5; }
}

/* Sessions */
.sessions-head{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:56px; }
.sessions-head p{ margin:0; max-width:40ch; }
.session{ display:grid; grid-template-columns:4fr 5fr 2fr; gap:24px; padding:36px 0; border-top:1px solid var(--ink); }
.session:last-of-type{ border-bottom:1px solid var(--ink); }
.session h3{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(28px,3vw,40px); line-height:1; margin:0 0 8px; }
.session .for{ margin:0; color:var(--mute); font-size:15px; }
.session ul{ list-style:none; margin:0; padding:0; font-size:15px; }
.session li{ padding:3px 0; }
.session .price{ font-family:var(--serif); font-size:clamp(26px,2.6vw,34px); text-align:right; margin:0; }
.extras{ margin-top:48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 40px; font-size:15px; }
.extras div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; border-bottom:1px solid var(--line); padding:8px 0; }
@media (max-width:760px){ .session{ grid-template-columns:1fr; gap:14px; } .session .price{ text-align:left; } }

/* Process: a real sequence, so it's numbered */
.process ol{ list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; counter-reset:step; }
.process li{ counter-increment:step; }
.process li::before{ content:counter(step); display:block; font-family:var(--serif); font-style:italic; font-size:64px; line-height:1; margin-bottom:18px; }
.process h3{ font-family:var(--serif); font-weight:400; font-size:22px; margin:0 0 8px; }
.process p{ font-size:15px; color:var(--mute); }
@media (max-width:900px){ .process ol{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .process ol{ grid-template-columns:1fr; } }

/* Book */
.book{ display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; }
.book .intro{ grid-column:1 / 6; }
.book form{ grid-column:7 / 13; display:grid; grid-template-columns:1fr 1fr; gap:28px 24px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
label{ font-size:13px; color:var(--mute); }
input,select,textarea{ font:inherit; font-size:17px; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink); border-radius:0; padding:8px 0; width:100%; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
select option{ color:#000; }
textarea{ resize:vertical; min-height:110px; }
input:focus,select:focus,textarea:focus{ outline:none; border-bottom-width:2px; }
button{ grid-column:1 / -1; justify-self:start; font:inherit; font-size:14px; letter-spacing:.02em; padding:14px 32px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); cursor:pointer; }
button:hover{ background:transparent; color:var(--ink); }
.contact-lines{ margin-top:40px; font-size:15px; }
.contact-lines a{ text-decoration:none; border-bottom:1px solid var(--line); }
@media (max-width:760px){ .book .intro,.book form{ grid-column:1 / -1; } .book form{ grid-template-columns:1fr; margin-top:40px; } }

footer{ padding:40px var(--pad); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--mute); border-top:1px solid var(--line); }
footer .mark{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink); }