/* anaismg.com
   The page takes its columns from the three words of the name:
   "ANAÍS " 3.896em, "MARTINEZ " 6.143em, "GOTTHARDT" 7.229em (whole name 17.268em),
   measured in the name's own type size (--name). */

@font-face{font-family:'Fahkwang';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fahkwang-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fahkwang';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fahkwang-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/archivo-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cutive Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cutive-mono-latin-400-normal.woff2) format('woff2')}

:root{
  --pad:clamp(16px,3vw,40px);
  --name:calc((100vw - 2 * var(--pad) - 20px) / 17.4);
  --body:clamp(17px,1.45vw,19px);
  --ink:#1c1512;
  --paper:#f6f4ee;
  --panel:#414848;
  --dark:#141416;
  --mono:'Cutive Mono','Courier New',Courier,monospace;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --head:'Fahkwang','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--dark);color:var(--ink);font-family:var(--mono)}
.page{background:var(--paper);overflow-x:hidden}
a{color:inherit}
a:hover{color:#6b4a36}
a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
img{max-width:100%}

/* ---------- the name's grid ---------- */
.grid{display:flex;flex-wrap:wrap;align-items:flex-start;max-width:17.268em;font-size:var(--name)}
.c1{flex:1 1 3.896em;min-width:220px;padding-right:28px}
.c2{flex:1 1 6.143em;min-width:220px;padding-right:28px}
.c3{flex:1 1 7.229em;min-width:220px}

h2{margin:0 0 28px;font-family:var(--head);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.1}
.label{margin:0;font-family:var(--sans);font-size:16px;font-weight:300;letter-spacing:.02em}
.t{margin:0;font-size:var(--body);line-height:1.7}
/* links inside running text: a slight bold, no underline */
.tl{text-decoration:none;-webkit-text-stroke:.4px currentColor}

/* ---------- top ---------- */
.hero{padding:clamp(16px,2vw,28px) var(--pad) clamp(40px,5vw,72px)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 32px;margin:-6px 0 clamp(6px,1.2vw,18px);font-family:var(--sans);font-size:16px;font-weight:300;letter-spacing:.02em}
.langs{display:flex;align-items:center;gap:10px}
.langs a{display:inline-block;padding:12px 0;text-decoration:none}
.langs a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.addr{padding:12px 0}
.name{margin:0;font-family:var(--head);font-weight:600;font-size:var(--name);line-height:1.04;white-space:nowrap;text-transform:uppercase}
.sub{margin:14px 0 clamp(20px,2.5vw,32px);font-family:var(--sans);font-size:17px;font-weight:300;letter-spacing:.02em}
.ocean{position:relative;overflow:hidden;height:calc(var(--name) * 4);margin:0 calc(-1 * var(--pad)) clamp(32px,5vw,72px);background:#8d8279}
.ocean img{position:absolute;left:0;bottom:0;width:100%;max-width:none;height:130%;object-fit:cover;object-position:center bottom;will-change:transform}
.intro{gap:28px 0}
.intro p{margin:0;font-size:17px;line-height:1.75}
.intro .c2{margin-top:clamp(0px,calc((100vw - 900px) * .1),29.75px)}
.intro .c3{display:flex;flex-direction:column;align-items:flex-start;gap:32px;margin-top:clamp(0px,calc((100vw - 900px) * .2),59.5px)}
.btn{display:inline-block;padding:13px 24px;border:1px solid rgba(28,21,18,.55);font-family:var(--sans);font-size:16px;font-weight:300;letter-spacing:.02em;text-decoration:none}

/* ---------- about ---------- */
.about{background:#fff;padding:clamp(56px,7vw,96px) var(--pad)}
.about .grid{align-items:stretch;gap:40px 0}
.about .c1{display:flex}
.portrait{flex:1 1 auto;position:relative;margin:7px 0 8px;min-height:clamp(0px,calc((900px - 100vw) * 10),420px)}
.portrait img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.about .text{flex:1 1 13.372em;min-width:280px;display:flex;flex-direction:column;gap:28px}

/* ---------- psychoanalysis ---------- */
.psy{background:var(--panel);color:var(--paper);padding:clamp(24px,3vw,40px) var(--pad) clamp(56px,7vw,96px)}
.psy h2{margin-bottom:clamp(20px,2.5vw,32px)}
.couch{margin:0 calc(-1 * var(--pad)) clamp(32px,5vw,72px)}
.couch .b{position:relative;overflow:hidden;aspect-ratio:5.2 / 1}
.couch .b img{position:absolute;left:0;top:-15%;width:100%;max-width:none;height:130%;object-fit:cover;object-position:center 45%;will-change:transform}
.couch .b:nth-child(2) img{opacity:.55}
.couch .b:nth-child(3) img{opacity:.25}
.psy .grid{gap:28px 0}
.p1{flex:1 1 10.039em;min-width:260px;padding-right:28px}
.p2{flex:1 1 7.229em;min-width:220px}
.fees{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:20px;border-top:1px solid rgba(246,244,238,.45)}

/* ---------- writing and speaking ---------- */
.writing{padding:clamp(56px,7vw,96px) var(--pad)}
.writing .grid{gap:40px 0}
.spiral{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:1004 / 1001;object-fit:cover}
.list{display:flex;flex-direction:column;gap:18px;font-family:var(--sans)}
.entries{display:flex;flex-direction:column;gap:26px}
.entry{display:flex;flex-direction:column;gap:8px}
.entry .title{font-family:var(--head);font-weight:500;font-size:clamp(19px,1.8vw,24px);line-height:1.3}
.entry .title a{text-decoration:none}
.entry .meta{font-size:16px;font-weight:300;line-height:1.5}

/* ---------- contact ---------- */
.contact{background:var(--dark);color:var(--paper);overflow:hidden;padding:clamp(24px,3vw,40px) var(--pad) 40px;font-family:var(--sans)}
.contact h2{margin:0;font-size:var(--name);line-height:1.05;white-space:nowrap;text-transform:uppercase}
.contact a:hover{color:#d9cfc4}
.cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px 64px;padding:clamp(32px,4vw,56px) 0 clamp(40px,5vw,64px)}
.left{flex:1 1 420px;min-width:0;max-width:660px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.left .t{font-family:var(--mono)}
.details{display:flex;flex-direction:column;align-items:flex-start;gap:18px;font-size:17px;font-weight:300;line-height:1.7}
.details a{text-decoration:none;font-weight:500}
address{font-style:normal}
.map{flex:0 1 520px;min-width:0;display:block;align-self:flex-start}
.map svg{display:block;width:100%;height:auto;font-family:var(--sans);letter-spacing:.03em}
.map .narrow{display:none}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 48px;font-size:14px;line-height:1.6;color:#d9cfc4}

/* ---------- welcome screen ---------- */
.welcome{min-height:100vh;min-height:100svh}
.welcome .sub{line-height:1.6}
.welcome .grid{align-items:baseline;gap:28px 0}
.welcome .grid p{margin:0;font-size:17px;line-height:1.75}
.choice{display:inline-block;padding:6px 0;font-family:var(--head);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.2;text-decoration:none}

/* ---------- narrow windows and tablets ----------
   Below about 1066px the "ANAÍS" column is too narrow for a line of text,
   so the three opening sentences stack instead of leaving the third one stranded. */
@media (max-width:1066px){
  .intro > div{flex-basis:100%;padding-right:0}
  .intro .c2,.intro .c3{margin-top:0}
  .intro p{max-width:640px}
}
@media (min-width:641px) and (max-width:1066px){
  .writing .c1,.welcome .c1{flex:0 0 240px}
  .writing .c2,.writing .c3,.welcome .c2,.welcome .c3{flex:1 1 200px;min-width:200px}
  /* the portrait keeps its place beside the text, with a fixed shape */
  .about .grid{align-items:flex-start}
  .about .c1{flex:0 0 240px}
  .about .text{flex:1 1 0;min-width:0}
  .portrait{min-height:0;aspect-ratio:4 / 5}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  :root{--name:calc((100vw - 2 * var(--pad)) / 10)}
  .name{white-space:normal}
  .name span{display:block}
  .c1,.c2,.p1{padding-right:0}
  .ocean{height:clamp(200px,58vw,300px)}
  .ocean img{object-position:30% bottom}
  .couch .b{aspect-ratio:3.4 / 1}
  .map{flex-basis:100%}
  .map .wide{display:none}
  .map .narrow{display:block}
  .langs a,.addr{padding:14px 0}
  .details a{display:inline-block;padding:4px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ocean img,.couch .b img{transform:none !important}
}

@media print{
  body{background:#fff}
  .ocean,.couch,.map,.btn,.langs{display:none}
  .psy,.contact{background:#fff;color:var(--ink)}
  .fine{color:var(--ink)}
}