/* The studio's own pages. Deliberately small: this is a name and a way to make
   contact, not a shop window. Everything here is used; nothing is decorative. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/manrope-latin-600-normal.woff2") format("woff2")}

:root{
  --paper:#f7f5ee;
  --surface:#ece9dd;
  --ink:#15302a;
  --muted:color-mix(in srgb,var(--ink) 70%,transparent);
  --hairline:color-mix(in srgb,var(--ink) 18%,transparent);
  --heading:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --shell:min(760px,88%);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15.5px/1.75 var(--body);-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-underline-offset:4px}
a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
h1,h2,p,ul{margin:0}
h1,h2{font-family:var(--heading);font-weight:400}
h1{font-size:clamp(38px,6vw,60px);line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(22px,2.6vw,29px);line-height:1.2;letter-spacing:-.02em;margin-top:40px}
ul{padding:0;list-style:none}

.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:16px;top:-100px;z-index:5;background:var(--ink);color:var(--paper);padding:12px 16px;text-decoration:none}
.skip:focus{top:16px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;color:var(--muted)}

.card{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(50px,10vh,110px)}
.card h1{margin-top:14px}
.lede{font-family:var(--heading);font-size:clamp(19px,2.4vw,24px);line-height:1.45;margin-top:20px;max-width:30ch}
.note{margin-top:26px;max-width:52ch;color:var(--muted)}

.page{flex:1;padding-block:clamp(44px,7vh,80px)}
.page h1{margin-top:14px}
.page .lede{margin-top:22px;font-family:var(--body);font-size:16px;line-height:1.7;max-width:60ch;color:var(--muted)}
.prose{margin-top:clamp(28px,4vw,44px);max-width:68ch}
.prose p,.prose li{font-size:15px}
.prose p{margin-top:14px}
.prose li{padding-left:20px;position:relative;margin-top:8px;color:var(--muted)}
.prose li::before{content:"—";position:absolute;left:0}
.prose .terms{border:1px solid var(--hairline);background:var(--surface);padding:24px}
.prose .terms p{margin-top:0;font-size:16px}
.updated{margin-top:40px;padding-top:18px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted)}

footer{padding-block:24px 36px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 32px;font-size:13px;color:var(--muted)}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

@media print{
  .skip{display:none}
  body{display:block;background:#fff}
  footer{border-color:#999}
}