@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* =========================================================
   TOKENS
   ========================================================= */

:root{
  --black:#050505;
  --white:#fff;

  --gold:#d7b065;

  --soft:#f8f8f7;
  --ivory:#f8f6f2;
  --ivory-light:#faf9f7;

  --line:#e7e7e7;

  --serif:'Playfair Display',Georgia,serif;
  --body:Roboto,Arial,sans-serif;
  --nav:Montserrat,Arial,sans-serif;
}

/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  background:#fff;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#fff;
  color:#050505;

  font:17px/1.75 var(--body);

  transition:
    opacity .35s ease,
    transform .35s ease;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================================================
   HEADER GLOBAL

   Marca sempre à esquerda.
   Menu sempre à direita.
   ========================================================= */

.site-header{
  position:fixed;
  z-index:20;

  inset:0 0 auto;

  height:112px;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  padding:0 6.1vw;

  background:transparent;
}

.brand{
  position:relative;
  z-index:102;

  font:500 31px/1 var(--serif);

  letter-spacing:-.09em;
}

.brand span{
  color:var(--gold);
}

/* =========================================================
   MENU TOGGLE
   ========================================================= */

.menu-toggle{
  position:absolute;
  right:6.1vw;

  z-index:102;

  width:26px;
  height:27px;

  padding:0;

  border:0;

  background:none;

  color:transparent;

  cursor:pointer;

  font-size:0;
}

.menu-toggle:before,
.menu-toggle:after,
.menu-toggle span{
  position:absolute;

  right:0;

  width:20px;
  height:3px;

  background:var(--black);

  content:'';

  transition:
    transform .35s ease,
    width .28s ease,
    background .25s ease;
}

.menu-toggle:before{
  top:4px;
}

.menu-toggle span{
  top:12px;
  width:10px;
}

.menu-toggle:after{
  top:20px;
}

.menu-toggle:hover span{
  width:20px;
}

/* =========================================================
   MENU FULLSCREEN
   ========================================================= */

.menu{
  position:fixed;
  z-index:100;

  inset:0;

  background:var(--black);

  display:flex;
  visibility:hidden;

  opacity:0;

  pointer-events:none;

  align-items:center;
  justify-content:center;
  flex-direction:column;

  gap:8px;

  transition:
    visibility 0s .5s,
    opacity .5s ease;
}

.menu:before{
  position:absolute;

  content:'DRA. WANUZIA';

  left:6.1vw;
  top:50%;

  transform:
    translateY(-50%)
    rotate(-90deg);

  transform-origin:left center;

  color:#555;

  font:10px var(--nav);

  letter-spacing:.28em;
}

.menu a{
  position:relative;

  display:block;

  width:430px;
  min-width:430px;

  color:#fff;

  font:400 clamp(38px,5vw,75px)/1.2 var(--serif);

  letter-spacing:-.06em;

  opacity:0;

  transform:translateY(20px);

  transition:
    color .2s ease,
    opacity .4s ease,
    transform .4s ease;
}

.menu a:after{
  content:'↗';

  position:absolute;

  left:calc(100% + 20px);
  top:15px;

  font:22px var(--body);

  color:var(--gold);

  opacity:0;

  transform:translateX(-10px);

  transition:.25s ease;
}

.menu a:hover{
  color:var(--gold);
}

.menu a:hover:after{
  opacity:1;

  transform:none;
}

/* =========================================================
   MENU OPEN
   ========================================================= */

.menu-open{
  overflow:hidden;
}

.menu-open .menu{
  visibility:visible;

  opacity:1;

  pointer-events:auto;

  transition-delay:0s;
}

.menu-open .menu a{
  opacity:1;

  transform:none;
}

.menu-open .menu a:nth-child(1){
  transition-delay:.15s;
}

.menu-open .menu a:nth-child(2){
  transition-delay:.21s;
}

.menu-open .menu a:nth-child(3){
  transition-delay:.27s;
}

.menu-open .menu a:nth-child(4){
  transition-delay:.33s;
}

.menu-open .brand{
  color:#fff;
}

.menu-open .menu-toggle:before,
.menu-open .menu-toggle:after,
.menu-open .menu-toggle span{
  background:#fff;
}

.menu-open .menu-toggle:before{
  transform:
    translateY(8px)
    rotate(45deg);
}

.menu-open .menu-toggle span{
  opacity:0;
}

.menu-open .menu-toggle:after{
  transform:
    translateY(-8px)
    rotate(-45deg);
}

/* =========================================================
   PRELOAD
   ========================================================= */

.preload{
  position:fixed;
  z-index:200;

  inset:0;

  display:grid;

  place-content:center;

  gap:18px;

  background:#fff;

  text-align:center;

  animation:
    preload
    1s
    1.1s
    cubic-bezier(.7,0,.25,1)
    forwards;
}

.preload-name{
  font:400 clamp(33px,4vw,56px) var(--serif);

  letter-spacing:-.06em;
}

.preload small{
  font:9px var(--nav);

  letter-spacing:.2em;
}

.preload i{
  display:block;

  height:1px;

  background:var(--gold);

  transform:scaleX(0);

  animation:
    line
    .85s
    .08s
    ease
    forwards;
}

@keyframes line{

  to{
    transform:scaleX(1);
  }

}

@keyframes preload{

  to{
    transform:translateY(-100%);

    visibility:hidden;
  }

}

/* =========================================================
   HOME
   ========================================================= */

.home{
  height:100vh;

  overflow:hidden;

  background:#fff;
}

.landing{
  position:relative;

  display:grid;

  grid-template-columns:
    1fr
    1fr;

  height:100vh;

  padding:30px;

  background:#fff;
}

.identity{
  z-index:2;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    70px
    8vw
    0;
}

.eyebrow{
  margin:
    0
    0
    23px;

  font:10px var(--nav);

  letter-spacing:.19em;
}

.identity h1,
.page h1{
  margin:0;

  font:
    400
    clamp(69px,9.2vw,142px)
    /.86
    var(--serif);

  letter-spacing:-.07em;
}

.intro{
  max-width:280px;

  margin:
    32px
    0
    0;

  font:
    300
    17px
    /1.85
    var(--body);
}

.identity .intro{
  max-width:390px;

  font-size:16px;

  line-height:1.65;
}

/* =========================================================
   HOME PORTRAIT
   ========================================================= */

.portrait{
  position:relative;

  z-index:1;

  overflow:hidden;

  margin:0;

  background:#eee;
}

.portrait:after{
  position:absolute;

  content:'';

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.1),
      transparent 28%
    );

  pointer-events:none;
}

.portrait img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:56% center;

  filter:
    saturate(.76)
    contrast(1.01);

  transform:none;

  transition:
    filter .7s ease;
}

.portrait:hover img{
  filter:
    saturate(1)
    contrast(1.02);

  transform:none;
}

/* =========================================================
   HOME PATHS
   ========================================================= */

.paths{
  position:absolute;

  z-index:3;

  left:30px;
  right:30px;
  bottom:30px;

  height:23vh;

  display:grid;

  grid-template-columns:
    1fr
    1fr;
}

.path{
  position:relative;

  isolation:isolate;

  display:grid;

  grid-template-columns:
    1fr
    auto;

  grid-template-rows:
    auto
    1fr
    auto;

  padding:
    26px
    4vw;

  background:var(--black);

  color:#fff;

  overflow:hidden;

  transition:
    padding .4s ease;
}

.path-patient{
  background:#fff;

  color:#050505;

  border:
    1px
    solid
    var(--black);
}

.path:before{
  position:absolute;

  z-index:-1;

  content:'';

  inset:0;

  background:var(--gold);

  transform:translateY(101%);

  transition:
    transform
    .5s
    cubic-bezier(.2,.7,.2,1);
}

.path-patient:before{
  background:#050505;
}

.path:hover{
  padding-top:19px;
}

.path:hover:before{
  transform:none;
}

.path-patient:hover{
  color:#fff;
}

.path-index,
.path small{
  font:10px var(--nav);

  letter-spacing:.11em;
}

.path-title{
  align-self:end;

  font:
    400
    clamp(31px,3.7vw,54px)
    /.85
    var(--serif);

  letter-spacing:-.06em;

  transition:
    transform .4s ease;
}

.path:hover .path-title{
  transform:translateY(-6px);
}

.arrow{
  font:28px var(--serif);

  transition:
    transform .35s ease;
}

.path:hover .arrow{
  transform:
    translate(7px,-5px);
}

.path small{
  align-self:end;

  text-transform:uppercase;
}

.scroll-note{
  position:absolute;

  z-index:4;

  right:3vw;
  top:52%;

  font:9px var(--nav);

  letter-spacing:.16em;

  writing-mode:vertical-rl;
}

.leaving{
  opacity:0;

  transform:translateY(10px);
}

.path.chosen{
  animation:
    chosen
    .48s
    forwards;
}

@keyframes chosen{

  to{
    transform:scale(1.04);
  }

}

/* =========================================================
   PÁGINAS INTERNAS
   MÉDICOS / PACIENTES / CONTATO

   A imagem da Home aparece aqui com apenas cerca de 5%.
   ========================================================= */

.internal{
  min-height:100vh;

  background:
    linear-gradient(
      rgba(248,246,242,.88),
      rgba(248,246,242,.88)
    ),
    url('assets/background-vulva.png')
    center
    /cover
    fixed
    no-repeat;
}

.internal .site-header{
  position:absolute;

  height:152px;
}

.page{
  position:relative;

  z-index:1;

  max-width:1200px;

  margin:auto;

  padding:
    215px
    30px
    100px;

  background:transparent;

  animation:
    pagein
    .65s
    .62s
    both;
}

@keyframes pagein{

  from{
    opacity:0;

    transform:translateY(35px);
  }

  to{
    opacity:1;

    transform:none;
  }

}

.page .eyebrow{
  color:#777;
}

.page h1{
  max-width:1040px;

  font-size:
    clamp(
      58px,
      8vw,
      119px
    );

  line-height:.94;
}

.page h1 em{
  color:var(--gold);

  font-style:italic;
}

.page-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:11vw;

  max-width:910px;

  margin:
    86px
    auto
    0;
}

.lead{
  margin:0;

  font:
    400
    27px
    /1.45
    var(--serif);

  letter-spacing:-.03em;
}

.page-grid div{
  font:
    300
    17px
    /1.95
    var(--body);
}

.page-grid p:first-child{
  margin-top:0;
}

.quote{
  max-width:910px;

  margin:
    105px
    auto
    0;

  padding:
    26px
    0
    0;

  border-top:
    1px
    solid
    var(--line);

  font:
    400
    34px
    /1.4
    var(--serif);

  letter-spacing:-.035em;
}

.text-link{
  display:inline-flex;

  gap:30px;

  margin-top:19px;

  padding-bottom:8px;

  border-bottom:
    1px
    solid
    var(--black);

  font:10px var(--nav);

  letter-spacing:.12em;

  text-transform:uppercase;
}

.text-link b{
  font:20px/1 var(--body);

  transition:
    transform .25s ease;
}

.text-link:hover b{
  transform:translateX(7px);
}

.numbers{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  max-width:910px;

  margin:
    100px
    auto
    0;

  border-top:
    1px
    solid
    var(--line);
}

.numbers div{
  display:grid;

  gap:8px;

  padding:
    22px
    18px
    0
    0;
}

.numbers strong{
  font:
    400
    37px
    var(--serif);

  letter-spacing:-.05em;
}

.numbers span,
.note{
  font:10px var(--nav);

  letter-spacing:.1em;

  text-transform:uppercase;
}

.note{
  max-width:910px;

  margin:
    80px
    auto;
}

.contact-list{
  max-width:910px;

  margin:
    85px
    auto
    0;

  border-top:
    1px
    solid
    var(--line);
}

.contact-list a,
.contact-list p{
  display:flex;

  justify-content:space-between;

  gap:25px;

  margin:0;

  padding:
    23px
    0;

  border-bottom:
    1px
    solid
    var(--line);

  font:
    400
    23px
    var(--serif);
}

.contact-list a:hover{
  color:var(--gold);
}

.contact-list span{
  padding-top:7px;

  font:10px var(--nav);

  letter-spacing:.08em;
}

.contact-list small{
  font:10px var(--nav);

  letter-spacing:.08em;
}

/* =========================================================
   SOBRE

   Aqui não usamos a textura.
   Apenas um off-white quase imperceptível.
   ========================================================= */

.about-page-body{
  background:var(--ivory-light);
}

.about-page-body .site-header{
  position:fixed;

  height:112px;
}

.about-page{
  min-height:100vh;

  background:var(--ivory-light);
}

/* Caso a página Sobre também possua a classe internal */
.about-page-body.internal,
.about-page-body .internal{
  background:var(--ivory-light);
}

.about-portrait{
  position:fixed;

  z-index:1;

  inset:
    0
    50%
    0
    0;

  margin:0;

  overflow:hidden;

  background:#d6d0c5;
}

.about-portrait:after{
  position:absolute;

  content:'';

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(5,5,5,.06) 48%,
      rgba(5,5,5,.62) 100%
    );

  pointer-events:none;
}

.about-portrait img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:71% center;

  filter:
    saturate(.82)
    contrast(1.02);
}

.about-portrait figcaption{
  position:absolute;

  z-index:2;

  left:6.1vw;
  right:5vw;
  bottom:6vh;

  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:20px;

  color:#fff;
}

.about-portrait figcaption span,
.about-portrait figcaption small{
  font:9px var(--nav);

  letter-spacing:.18em;
}

.about-portrait figcaption small{
  opacity:.65;

  text-align:right;
}

.about-content{
  position:relative;

  z-index:2;

  margin-left:50%;

  width:50%;

  background:var(--ivory-light);
}

.about-section{
  min-height:100vh;

  padding:
    15vh
    9vw
    12vh
    7vw;

  display:flex;

  flex-direction:column;

  justify-content:center;

  scroll-margin-top:0;

  background:var(--ivory-light);
}

.about-section .eyebrow{
  color:#777;

  margin-bottom:34px;
}

.about-section h1,
.about-section h2{
  margin:0;

  font:
    400
    clamp(51px,5vw,82px)
    /.96
    var(--serif);

  letter-spacing:-.065em;
}

.about-section h1 em,
.about-section h2 em{
  color:var(--gold);

  font-weight:400;
}

.about-lead{
  margin:
    55px
    0
    24px;

  font:
    400
    clamp(22px,2vw,29px)
    /1.45
    var(--serif);

  letter-spacing:-.035em;
}

.about-intro>
p:not(.eyebrow):
not(.about-lead){
  max-width:620px;

  margin:0;

  font:
    300
    16px
    /1.9
    var(--body);
}

.about-next{
  align-self:flex-start;

  display:flex;

  align-items:center;

  gap:28px;

  margin-top:54px;

  padding-bottom:8px;

  border-bottom:
    1px
    solid
    var(--black);

  font:10px var(--nav);

  letter-spacing:.12em;

  text-transform:uppercase;
}

.about-next span{
  font-size:18px;

  transition:
    transform .25s ease;
}

.about-next:hover span{
  transform:translateY(5px);
}

/* =========================================================
   SOBRE RAIL
   ========================================================= */

.about-rail{
  position:fixed;

  z-index:12;

  right:2.25vw;
  top:50%;

  transform:translateY(-50%);

  display:grid;

  gap:17px;
}

.about-rail a{
  display:flex;

  flex-direction:row-reverse;

  align-items:center;

  gap:10px;

  color:#777;

  font:9px var(--nav);

  letter-spacing:.1em;
}

.about-rail a span{
  display:grid;

  place-items:center;

  width:21px;
  height:21px;

  border:
    1px
    solid
    #aaa;

  border-radius:50%;

  font-size:7px;

  transition:.25s ease;
}

.about-rail a b{
  font-weight:500;

  text-transform:uppercase;

  opacity:0;

  transform:translateX(5px);

  transition:.25s ease;
}

.about-rail a:hover b,
.about-rail a.active b{
  opacity:1;

  transform:none;
}

.about-rail a.active span{
  border-color:var(--gold);

  background:var(--gold);

  color:#fff;
}

/* =========================================================
   CURRÍCULO
   ========================================================= */

.cv-list{
  margin-top:65px;

  border-top:
    1px
    solid
    var(--line);
}

.cv-list article{
  display:grid;

  grid-template-columns:
    115px
    1fr;

  column-gap:22px;

  padding:
    20px
    0;

  border-bottom:
    1px
    solid
    var(--line);
}

.cv-list article>span{
  grid-row:1/3;

  padding-top:5px;

  color:#777;

  font:
    9px
    /1.6
    var(--nav);

  letter-spacing:.1em;

  text-transform:uppercase;
}

.cv-list h3{
  margin:
    0
    0
    3px;

  font:
    400
    23px
    /1.25
    var(--serif);

  letter-spacing:-.03em;
}

.cv-list p{
  margin:0;

  color:#666;

  font:
    300
    13px
    /1.55
    var(--body);
}

/* =========================================================
   SOBRE DARK SECTION
   ========================================================= */

.about-dark{
  background:var(--black);

  color:#fff;
}

.about-dark .eyebrow{
  color:#888;
}

.about-dark .about-lead{
  margin-bottom:50px;
}

.credentials{
  border-top:
    1px
    solid
    #313131;
}

.credentials article{
  display:grid;

  grid-template-columns:
    42px
    1fr;

  gap:18px;

  padding:
    21px
    0;

  border-bottom:
    1px
    solid
    #313131;
}

.credentials strong{
  color:var(--gold);

  font:
    400
    24px
    var(--serif);
}

.credentials p{
  margin:0;

  color:#d5d5d5;

  font:
    300
    14px
    /1.65
    var(--body);
}

/* =========================================================
   PUBLICAÇÕES
   ========================================================= */

.publication-list{
  margin-top:55px;

  border-top:
    1px
    solid
    var(--line);
}

.publication-list a{
  display:grid;

  grid-template-columns:
    48px
    1fr
    auto;

  align-items:start;

  gap:20px;

  padding:
    22px
    0;

  border-bottom:
    1px
    solid
    var(--line);

  transition:
    color .25s ease;
}

.publication-list a:hover{
  color:var(--gold);
}

.publication-list span{
  padding-top:4px;

  color:#777;

  font:9px var(--nav);

  letter-spacing:.1em;
}

.publication-list h3{
  margin:0;

  font:
    400
    20px
    /1.35
    var(--serif);

  letter-spacing:-.025em;
}

.publication-list b{
  font:
    400
    19px
    var(--body);

  transition:
    transform .25s ease;
}

.publication-list a:hover b{
  transform:
    translate(4px,-4px);
}

.about-section blockquote{
  margin:
    75px
    0
    18px;

  padding:
    24px
    0
    0;

  border-top:
    1px
    solid
    var(--line);

  font:
    italic
    400
    29px
    /1.35
    var(--serif);

  letter-spacing:-.035em;
}

/* =========================================================
   HOME EDITORIAL
   ========================================================= */

.home-editorial{
  background:#f3e6d1;
}

.home-editorial .home-header{
  height:124px;

  padding:
    0
    10.8vw;

  justify-content:flex-start;
}

.home-editorial .brand{
  font-size:43px;

  color:#0a2d32;
}

.home-direct-nav{
  display:flex;

  align-items:center;

  gap:42px;

  margin-left:auto;
}

.home-direct-nav a{
  position:relative;

  font:
    500
    10px
    var(--nav);

  letter-spacing:.12em;

  text-transform:uppercase;

  color:#0a2024;
}

.home-direct-nav a:after{
  position:absolute;

  content:'';

  left:0;
  right:100%;
  bottom:-7px;

  height:1px;

  background:#0a2024;

  transition:
    right .28s ease;
}

.home-direct-nav a:hover:after{
  right:0;
}

.home-editorial .menu-toggle{
  display:none;
}

.editorial-home{
  height:100vh;

  overflow:hidden;

  background:#f3e6d1;
}

.editorial-hero{
  position:relative;

  height:78vh;

  min-height:560px;

  overflow:hidden;

  isolation:isolate;
}

.editorial-background{
  position:absolute;

  z-index:0;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;
}

.editorial-name{
  position:absolute;

  z-index:1;

  inset:0;

  margin:0;

  color:#082f34;

  font-family:var(--serif);

  font-weight:400;

  letter-spacing:-.07em;

  text-transform:uppercase;

  pointer-events:none;
}

.editorial-name span{
  position:absolute;

  display:block;

  white-space:nowrap;
}

.name-prefix{
  top:20.5vh;

  left:10.8vw;

  font-size:5vw;

  line-height:.85;
}

.name-first{
  top:31.5vh;

  left:10.8vw;

  font-size:8.5vw;

  line-height:.78;
}

.name-last{
  top:45.5vh;

  right:6.5vw;

  font-size:8.5vw;

  line-height:.78;
}

.editorial-copy{
  position:absolute;

  z-index:3;

  top:50.5vh;

  left:12.4vw;

  width:340px;

  margin:0;

  color:#121b1c;

  font:
    400
    17px
    /1.65
    var(--body);
}

.editorial-person{
  position:absolute;

  z-index:2;

  left:50%;

  bottom:0;

  height:75vh;

  width:auto;

  max-width:none;

  transform:translateX(-50%);

  filter:
    saturate(.91)
    contrast(1.015);

  pointer-events:none;
}

.editorial-band{
  height:22vh;

  display:grid;

  grid-template-columns:
    1fr
    1fr;
}

.editorial-cta{
  position:relative;

  isolation:isolate;

  display:grid;

  grid-template-columns:
    1fr
    auto;

  grid-template-rows:
    auto
    1fr
    auto;

  padding:
    2.2vh
    6vw
    2vh
    10.8vw;

  overflow:hidden;

  transition:
    color .35s ease;
}

.editorial-cta:before{
  position:absolute;

  z-index:-1;

  content:'';

  inset:0;

  transform:translateY(101%);

  transition:
    transform
    .5s
    cubic-bezier(.2,.7,.2,1);
}

.editorial-cta:hover:before,
.editorial-cta:focus-visible:before{
  transform:none;
}

.editorial-cta-doctor{
  background:#062f34;

  color:#fff;
}

.editorial-cta-doctor:before{
  background:#0a4148;
}

.editorial-cta-patient{
  background:#9c8b73;

  color:#102f33;
}

.editorial-cta-patient:before{
  background:#b5a58e;
}

.editorial-cta span,
.editorial-cta small{
  font:
    500
    9px
    var(--nav);

  letter-spacing:.12em;

  text-transform:uppercase;
}

.editorial-cta strong{
  align-self:end;

  font:
    400
    clamp(27px,2.8vw,44px)
    /.9
    var(--serif);

  letter-spacing:-.055em;
}

.editorial-cta small{
  align-self:end;

  opacity:.72;
}

.editorial-cta b{
  grid-column:2;

  grid-row:1/4;

  align-self:center;

  font:
    400
    27px
    var(--body);

  transition:
    transform .35s ease;
}

.editorial-cta:hover b,
.editorial-cta:focus-visible b{
  transform:
    translate(7px,-5px);
}

.home-editorial.menu-open .brand{
  color:#fff;
}

/* =========================================================
   HOME COMPOSITE
   ========================================================= */

.home-composite-test .landing{
  background:
    #f3e6d1
    url('assets/background-vulva.png')
    center
    /cover
    no-repeat;
}

.home-composite-test .portrait-composite{
  background:transparent;

  overflow:hidden;
}

.home-composite-test .portrait-composite:after{
  display:none;
}

.home-composite-test
.portrait-composite
.portrait-person{
  width:100%;
  height:100%;

  padding-top:4vh;

  object-fit:contain;

  object-position:center bottom;

  filter:
    saturate(.92)
    contrast(1.01);

  transform:none;

  transition:
    filter .7s ease;
}

.home-composite-test
.portrait-composite:hover
.portrait-person{
  filter:
    saturate(1)
    contrast(1.02);

  transform:none;
}

/* =========================================================
   HOME V2
   ========================================================= */

.home-v2-format{
  --hero-axis:
    clamp(
      58px,
      8.6vw,
      165px
    );

  --hero-copy-offset:
    clamp(
      20px,
      2.2vw,
      42px
    );

  --hero-prefix-size:
    clamp(
      62px,
      min(5.5vw,10vh),
      106px
    );

  --hero-main-size:
    clamp(
      91px,
      min(9vw,15.5vh),
      173px
    );

  --hero-prefix-top:
    clamp(
      120px,
      20vh,
      216px
    );

  --hero-first-top:
    clamp(
      185px,
      30.5vh,
      329px
    );

  --hero-last-top:
    clamp(
      270px,
      44.5vh,
      480px
    );

  --hero-copy-top:
    clamp(
      330px,
      52vh,
      562px
    );

  --hero-copy-size:
    clamp(
      15px,
      .92vw,
      17px
    );
}

.home-v2-format .identity{
  position:static;

  z-index:auto;

  padding:0;
}

.home-v2-format .hero-name{
  position:absolute;

  z-index:1;

  inset:0;

  margin:0;

  color:#050505;

  font-family:var(--serif);

  font-weight:400;

  line-height:.8;

  letter-spacing:.05em;

  text-transform:uppercase;

  text-rendering:optimizeLegibility;

  font-feature-settings:
    "kern" 1,
    "liga" 1;

  pointer-events:none;
}

.home-v2-format .hero-name span{
  position:absolute;

  display:block;

  white-space:nowrap;
}

.home-v2-format .hero-name-prefix{
  top:var(--hero-prefix-top);

  left:var(--hero-axis);

  font-size:
    var(--hero-prefix-size);
}

.home-v2-format .hero-name-first{
  top:var(--hero-first-top);

  left:var(--hero-axis);

  font-size:
    var(--hero-main-size);
}

.home-v2-format .hero-name-last{
  top:var(--hero-last-top);

  right:5vw;

  font-size:
    var(--hero-main-size);
}

.home-v2-format .identity .intro{
  position:absolute;

  z-index:3;

  top:var(--hero-copy-top);

  left:
    calc(
      var(--hero-axis)
      +
      var(--hero-copy-offset)
    );

  width:
    min(
      380px,
      29vw
    );

  max-width:65ch;

  margin:0;

  color:#050505;

  font-size:
    var(--hero-copy-size);

  line-height:1.45;

  text-rendering:optimizeLegibility;

  font-feature-settings:
    "kern" 1,
    "liga" 1;
}

.home-v2-format .portrait-composite{
  position:absolute;

  z-index:2;

  top:2.5vh;

  right:25%;

  bottom:
    calc(
      23vh
      +
      30px
    );

  left:25%;

  width:auto;
  height:auto;
}

.home-v2-format
.portrait-composite
.portrait-person{
  padding-top:0;

  object-position:center bottom;

  transform:none;
}

.home-v2-format
.portrait-composite:hover
.portrait-person{
  transform:none;
}

/* =========================================================
   TABLET 1100
   ========================================================= */

@media(max-width:1100px){

  .home-direct-nav{
    gap:23px;
  }

  .editorial-person{
    left:53%;

    height:71vh;
  }

  .editorial-copy{
    left:9vw;

    width:295px;

    font-size:15px;
  }

  .name-prefix,
  .name-first{
    left:8vw;
  }

  .name-last{
    right:4vw;
  }

}

/* =========================================================
   TABLET 1000
   ========================================================= */

@media(max-width:1000px){

  .home-v2-format{
    --hero-axis:7vw;
    --hero-copy-offset:1vw;
  }

  .home-v2-format .hero-name-last{
    right:3vw;
  }

  .home-v2-format .identity .intro{
    width:32vw;
  }

  .home-v2-format .portrait-composite{
    right:20%;

    left:28%;
  }

}

/* =========================================================
   TABLET 980
   ========================================================= */

@media(max-width:980px){

  .about-rail{
    display:none;
  }

  .about-section{
    padding-right:7vw;
  }

  .about-portrait figcaption small{
    display:none;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  /* HEADER */

  .site-header{
    height:80px;

    padding:
      0
      8vw;

    justify-content:flex-start;
  }

  .brand{
    font-size:28px;
  }

  .menu-toggle{
    right:8vw;
  }

  /* MENU */

  .menu{
    align-items:flex-start;

    flex-direction:column;

    padding:
      125px
      12vw;
  }

  .menu:before{
    display:none;
  }

  .menu a{
    width:auto;

    min-width:0;

    font-size:48px;
  }

  /* HOME */

  .landing{
    display:block;

    padding:16px;

    overflow:hidden;
  }

  .identity{
    position:absolute;

    z-index:2;

    inset:0;

    padding:
      16vh
      8vw
      0;

    justify-content:flex-start;
  }

  .identity h1{
    font-size:21vw;
  }

  .intro{
    max-width:230px;

    margin-top:22px;

    font-size:14px;
  }

  .identity .intro{
    max-width:270px;

    font-size:14px;

    line-height:1.55;
  }

  .portrait{
    position:absolute;

    inset:
      0
      0
      25vh
      23%;

    height:auto;
  }

  .portrait:after{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.85),
        transparent 65%
      );
  }

  /* PATHS */

  .paths{
    left:16px;
    right:16px;
    bottom:16px;

    height:24vh;
  }

  .path{
    padding:
      17px
      5vw;
  }

  .path-title{
    font-size:30px;
  }

  .path small{
    display:none;
  }

  .scroll-note{
    display:none;
  }

  /* INTERNAL */

  .internal{
    background:
      linear-gradient(
        rgba(248,246,242,.88),
        rgba(248,246,242,.88)
      ),
      url('assets/background-vulva.png')
      center
      /cover
      fixed
      no-repeat;
  }

  .internal .site-header{
    height:90px;
  }

  .page{
    padding:
      145px
      8vw
      65px;
  }

  .page h1{
    font-size:15.3vw;
  }

  .page-grid{
    grid-template-columns:1fr;

    gap:30px;

    margin-top:53px;
  }

  .lead{
    font-size:25px;
  }

  .quote{
    margin-top:65px;

    font-size:28px;
  }

  .numbers{
    grid-template-columns:1fr;

    margin-top:70px;
  }

  .numbers div{
    grid-template-columns:
      65px
      1fr;

    align-items:center;

    padding:
      16px
      0;

    border-bottom:
      1px
      solid
      var(--line);
  }

  .contact-list{
    margin-top:60px;
  }

  .contact-list a,
  .contact-list p{
    display:block;

    font-size:20px;
  }

  .contact-list span{
    display:block;

    margin-top:5px;
  }

  /* SOBRE */

  .about-page-body{
    background:var(--ivory-light);
  }

  .about-page-body .site-header{
    height:80px;
  }

  .about-portrait{
    position:relative;

    inset:auto;

    width:100%;

    height:66vh;
  }

  .about-portrait img{
    object-position:70% center;
  }

  .about-portrait figcaption{
    left:8vw;
    right:8vw;
    bottom:4vh;
  }

  .about-content{
    margin-left:0;

    width:100%;

    background:var(--ivory-light);
  }

  .about-section{
    min-height:auto;

    padding:
      95px
      8vw;

    background:var(--ivory-light);
  }

  .about-section h1,
  .about-section h2{
    font-size:14vw;
  }

  .about-lead{
    margin-top:42px;

    font-size:24px;
  }

  .cv-list{
    margin-top:45px;
  }

  .cv-list article{
    grid-template-columns:1fr;

    gap:4px;
  }

  .cv-list article>span{
    grid-row:auto;

    margin-bottom:5px;
  }

  .credentials article{
    grid-template-columns:
      35px
      1fr;
  }

  .publication-list a{
    grid-template-columns:
      42px
      1fr
      auto;

    gap:12px;
  }

  .about-section blockquote{
    font-size:26px;
  }

  /* HOME EDITORIAL */

  .home-editorial .home-header{
    height:82px;

    padding:
      0
      7vw;
  }

  .home-editorial .brand{
    font-size:32px;
  }

  .home-direct-nav{
    display:none;
  }

  .home-editorial .menu-toggle{
    display:block;

    right:7vw;
  }

  .editorial-hero{
    height:83vh;

    min-height:0;
  }

  .editorial-background{
    object-position:61% center;
  }

  .name-prefix{
    top:15vh;

    left:7vw;

    font-size:11vw;
  }

  .name-first{
    top:23vh;

    left:7vw;

    font-size:17vw;
  }

  .name-last{
    top:32vh;

    left:7vw;
    right:auto;

    font-size:17vw;
  }

  .editorial-person{
    left:72%;

    height:57vh;
  }

  .editorial-copy{
    top:auto;

    left:7vw;

    bottom:4.5vh;

    width:53vw;

    font-size:12px;

    line-height:1.5;
  }

  .editorial-band{
    height:17vh;
  }

  .editorial-cta{
    padding:
      2vh
      5vw;
  }

  .editorial-cta strong{
    font-size:25px;
  }

  .editorial-cta small{
    display:none;
  }

  .editorial-cta b{
    font-size:20px;
  }

  /* HOME COMPOSITE */

  .home-composite-test .portrait-composite{
    inset:
      0
      0
      24vh
      23%;
  }

  .home-composite-test
  .portrait-composite
  .portrait-person{
    padding-top:10vh;

    object-position:70% bottom;
  }

  /* HOME V2 */

  .home-v2-format{
    --hero-axis:7vw;

    --hero-copy-offset:0px;

    --hero-prefix-size:11vw;

    --hero-main-size:16vw;

    --hero-prefix-top:13vh;

    --hero-first-top:21vh;

    --hero-last-top:30vh;

    --hero-copy-size:15px;
  }

  .home-v2-format .hero-name-last{
    right:auto;

    left:var(--hero-axis);
  }

  .home-v2-format .portrait-composite{
    top:7vh;

    right:-9%;

    bottom:24vh;

    left:25%;
  }

  .home-v2-format
  .portrait-composite
  .portrait-person{
    padding-top:0;

    object-position:center bottom;

    transform:none;
  }

  .home-v2-format .identity .intro{
    top:auto;

    bottom:27vh;

    left:var(--hero-axis);

    width:54vw;

    font-size:
      var(--hero-copy-size);

    line-height:1.4;
  }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;

    transition-duration:.01ms!important;
  }

  .preload{
    display:none;
  }

}