/* Lorena Di Muzio · website draft, Velo direction. Grid, type scale and spacing are written out in source/build.py.
   Colours: White #FAF9F7 (page) · Veil #EFEDEA · Stone #BDB2A8 (hairlines; at half strength, #DCD6D0, the card at the foot) · Taupe #7B6D62 (labels) · Ink #221B1A (all text)

   RESPONSIVE (8 Oct, second pass): three layouts, everything between them scales.
     (breakpoints are written in em, 16 px = 1 em, so they also follow the reader's text size)
     phone   up to 700     2 columns
     tablet  701 to 1000   12 columns, text and pictures share the row half and half
     desktop from 1001     12 columns as designed at 1440; the sheet stops growing at 1440
   Margin, gutter, spacing and type are fluid (clamp), sizes are in rem so the reader's own text size is respected. */
@font-face{font-family:"Italiana";src:url(fonts/Italiana-normal-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-normal-500.woff2) format("woff2");font-weight:500;font-display:block}
:root{
  --white:#FAF9F7;--veil:#EFEDEA;--stone:#BDB2A8;--taupe:#7B6D62;--ink:#221B1A;
  --stone-half:#DCD6D0;                        /* Stone at half strength on White: the card at the foot (Nina, 8 Oct: full Stone was too strong). Ink on it 11.7 : 1 */
  --margin:clamp(1.25rem,5vw,4.5rem);          /* 20 … 72 */
  --gutter:clamp(.75rem,1.7vw,1.5rem);         /* 12 … 24 */
  --s1:.5rem;--s2:1rem;--s3:1.5rem;
  --s4:clamp(1.5rem,2.8vw,2.5rem);             /* 24 … 40 */
  --s5:clamp(2.5rem,4.4vw,4rem);               /* 40 … 64 */
  --s6:clamp(4.5rem,7.2vw,6.5rem);             /* 72 … 104 */
  /* the title is sized so that "make-up artist" (6.07 em wide, kept on one line) always fits its column */
  --title:clamp(2.5rem,12.4vw,4rem);           /* phone 40 … 64 */
  --sub:clamp(2rem,3.3vw,3rem);                /* 32 … 48 */
  --intro:clamp(1.5rem,2.08vw,1.875rem);       /* 24 … 30 */
  --text:clamp(1.25rem,1.53vw,1.375rem);       /* 20 … 22 */
  --small:clamp(1.0625rem,1.32vw,1.1875rem);   /* 17 … 19 */
  --name:1.1875rem;                            /* 19 */
  --tap:2.75rem;                               /* 44: smallest height of anything you tap */
}
@media (min-width:43.8125em){:root{--title:clamp(2.6rem,6vw,5rem);--name:clamp(1.25rem,2vw,1.5rem)}}
@media (min-width:62.5625em){:root{--title:clamp(3.25rem,5.56vw,5rem)}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--white);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:var(--text);line-height:1.45;color:var(--ink);
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{display:block;width:100%;height:auto;background:var(--veil)}
a{color:inherit;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2{font-family:"Italiana",serif;font-weight:400;text-wrap:balance}
h1{font-size:var(--title);line-height:1.04}
.hero h1{white-space:nowrap}
h2{font-size:var(--sub);line-height:1.1}
.nb{white-space:nowrap}
ul{list-style:none}
.skip{position:absolute;left:var(--margin);top:-5rem;background:var(--ink);color:var(--white);padding:.6rem 1rem;font-size:var(--small);z-index:2}
.skip:focus{top:.5rem}

.wrap{width:100%;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:max(var(--margin),env(safe-area-inset-left));padding-right:max(var(--margin),env(safe-area-inset-right))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gutter)}
main{flex:1 0 auto}
main>section+section{margin-top:var(--s6)}

/* the name is the logo: Italiana capitals, tracked as on the card */
.name{font-family:"Italiana",serif;font-size:var(--name);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:var(--tap)}
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:clamp(4.5rem,6.7vw,6rem)}
.top nav{display:flex;gap:clamp(1rem,2.6vw,2.5rem);font-size:var(--small)}
.top nav a{display:inline-flex;align-items:center;min-height:var(--tap)}

.intro{font-size:var(--intro);line-height:1.3}
/* the one link style: text with a hairline under it, tall enough to tap */
.go{display:inline-flex;align-items:center;min-height:var(--tap)}
figcaption{font-size:var(--small)}
figcaption a{display:inline-flex;align-items:center;min-height:var(--tap)}
figure>a{display:block}

/* THE DRAWN LINE. One hairline in ink, the weight of a liner stroke, is the site's only ornament.
   It sits under the page you are on and under every "go" link; on hover it draws itself from the left.
   --ly: where the line sits in a link that is centred in its 44 px tap height (text centre + .7 em). */
.top nav a,.go,.card .law a,figcaption a,.card p>a:not(.name),.name{--ly:calc(50% + .7em);
  background:linear-gradient(currentColor,currentColor) no-repeat 0 var(--ly)/0 1px;transition:background-size .5s cubic-bezier(.2,.7,.2,1)}
.go,.top nav a[aria-current],.card .law a[aria-current]{background-size:100% 1px}
/* ruled rows (services, contact): the ink line is drawn over the row's Stone hairline */
.list a::after,.contact dd a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.list a,.contact dd a{transition:padding-left .45s cubic-bezier(.2,.7,.2,1)}
/* pictures that lead somewhere (home): the print moves a little closer inside its frame */
.hero figure>a,.four figure>a,.about-row figure>a{overflow:hidden}
.hero figure img,.four figure img,.about-row figure img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
::selection{background:var(--stone);color:var(--ink)}
@keyframes redraw{
  0%{background-size:100% 1px;background-position:100% var(--ly)}
  45%{background-size:0 1px;background-position:100% var(--ly)}
  46%{background-size:0 1px;background-position:0 var(--ly)}
  100%{background-size:100% 1px;background-position:0 var(--ly)}
}
@media (hover:hover){
  .top nav a:hover,.card .law a:hover,figcaption a:hover,.card p>a:not(.name):hover,
  .hero figure:hover figcaption a,.four figure:hover figcaption a,.about-row figure:hover figcaption a{background-size:100% 1px}
  .go:hover{animation:redraw .8s cubic-bezier(.2,.7,.2,1)}
  .list a:hover,.contact dd a:hover{padding-left:.6rem}
  .list a:hover::after,.contact dd a:hover::after{transform:scaleX(1)}
  .hero figure:hover img,.four figure:hover img,.about-row figure:hover img{transform:scale(1.035)}
  .name:hover{background-size:calc(100% - .14em) 1px}   /* the line stops at the last letter, not after its tracking */
  .legal dd a:hover{text-decoration-color:var(--stone)}
}
@media (prefers-reduced-motion:reduce){
  *,*::after{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
  .go,.top nav a[aria-current],.card .law a[aria-current]{text-decoration:underline}
}

/* picture widths and starts on the 12 columns */
.w3{grid-column-end:span 3}.w4{grid-column-end:span 4}.w6{grid-column-end:span 6}.w7{grid-column-end:span 7}.w8{grid-column-end:span 8}.w12{grid-column-end:span 12}
.s7{grid-column-start:7}.s9{grid-column-start:9}.s10{grid-column-start:10}
.row+.row{margin-top:var(--gutter)}
.row.end{align-items:end}

/* home */
.hero{padding-top:var(--s3)}
.hero .say{grid-column:1/span 5;padding-top:clamp(2.5rem,6.1vw,5.5rem)}
.hero .intro{margin-top:var(--s4);max-width:15em}
.say p+p{margin-top:calc(var(--s4) - .65rem)}
.hero .f1{grid-column:6/span 4}
.hero .f2{grid-column:10/span 3;margin-top:clamp(4rem,6.7vw,6rem)}
.about-row .say{grid-column:1/span 5;align-self:end;padding-bottom:1.5rem}
.about-row figcaption{white-space:nowrap}

/* work pages */
.head{padding-top:var(--s5);align-items:end}
.head h1{grid-column:1/span 8}
.head .intro{grid-column:9/span 4;padding-bottom:.45rem}
.head+.prints{margin-top:var(--s5)}
.film+.prints{margin-top:var(--s4)}
.next{border-top:1px solid var(--stone);padding-top:var(--s2)}
main>section.next{margin-top:var(--s6)}
.next p{grid-column:span 6}
.next .n{text-align:right}

/* about, contact */
.about,.contact{padding-top:var(--s5)}
.about .portrait{grid-column:1/span 5}
.about .text{grid-column:7/span 6}
.contact .text{grid-column:1/span 6}
.contact .portrait{grid-column:8/span 5}
.text .intro{margin-top:var(--s4)}
.text .intro+p{margin-top:var(--s3)}
.about .text p+p+p{margin-top:1em}
.text h2{margin-top:var(--s5)}
.list{margin-top:var(--s3);border-bottom:1px solid var(--stone)}
.list li{border-top:1px solid var(--stone)}
.list a{display:block;padding:var(--s2) 0;position:relative}
dl{margin:var(--s5) 0 var(--s3);display:grid;grid-template-columns:minmax(5.5rem,1fr) 3fr;border-bottom:1px solid var(--stone)}
dt,dd{border-top:1px solid var(--stone)}
dt{font-size:var(--small);color:var(--taupe);padding-top:1.55rem}
dd{font-size:var(--intro);line-height:1.3;min-width:0;overflow-wrap:anywhere}
dd a{display:block;padding:var(--s2) 0;position:relative}

/* impressum, privacy: the contact page's ruled rows, at reading size */
.legal{padding-top:var(--s5)}
.legal .text{grid-column:1/span 8}
.legal dl{margin-bottom:0}
.legal dd{font-size:var(--text);line-height:1.45;padding:1.15rem 0 var(--s3)}
.legal dt{padding-top:1.3rem}
.legal dd p+p{margin-top:var(--s2)}
.legal dd a{display:inline;padding:0;position:static;text-decoration-line:underline}
/* a fact still missing from Lorena: shown so nobody launches with it (build.py refuses to) */
mark{background:var(--veil);color:var(--taupe);padding:.05em .35em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* foot of every page: the Stone card */
.card{background:var(--stone-half);margin-top:var(--s6);padding:var(--s5) 0;font-size:var(--small)}
.card .who{grid-column:span 6}.card .c1{grid-column:span 3}.card .c2{grid-column:span 3}
.card span{display:block}
.card .law{grid-column:span 12;margin-top:var(--s3);display:flex;gap:var(--s4)}
.card .law a{display:inline-flex;align-items:center;min-height:2rem}
.card p>a:not(.name){display:flex;align-items:center;min-height:2rem;width:fit-content}
.ig{flex:none;width:.74em;height:.74em;margin-right:.4em}

/* ───────── tablet: 701 to 1000 ───────── */
@media (min-width:43.8125em) and (max-width:62.5em){
  .hero .say{grid-column:1/span 6;grid-row:1;padding-top:var(--s4)}
  .hero .f1{grid-column:7/span 6;grid-row:1/span 2}
  .hero .f2{grid-column:1/span 3;grid-row:2;margin-top:0;align-self:end}
  .about-row .say{grid-column:1/span 6;padding-bottom:var(--tap)}
  .head h1{grid-column:1/span 7}
  .head .intro{grid-column:8/span 5}
  .about .portrait{grid-column:1/span 4}
  .about .text{grid-column:6/span 7}
  .contact .text{grid-column:1/span 7}
  .card .who,.card .c1,.card .c2{grid-column:span 4}
  .legal .text{grid-column:1/span 10}
}

/* narrow tablet: the name needs the whole first row of the card */
@media (min-width:43.8125em) and (max-width:53.125em){
  .card .who{grid-column:span 12}
  .card .c1,.card .c2{grid-column:span 6}
}

/* ───────── phone: up to 700 ───────── */
@media (max-width:43.75em){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid>*{grid-column:auto/span 2}
  .grid>.half{grid-column:auto/span 1}
  .grid>.r{grid-column:auto/span 2}
  .top{flex-direction:column;align-items:flex-start;gap:0;padding-top:.75rem;padding-bottom:var(--s2)}
  .top nav{width:100%;justify-content:space-between;gap:0}
  .hero{padding-top:var(--s1)}
  .hero .say{grid-column:span 2;padding:0 0 var(--s2)}
  .hero .intro{margin-top:var(--s3)}
  .hero .f1{grid-column:span 2}
  .hero .f2{grid-column:auto/span 2;margin-top:var(--s2)}
  .four>figure,.about-row>figure{grid-column:auto/span 1}
  .about-row .say{grid-column:span 2;padding-bottom:var(--s2)}
  .head{padding-top:var(--s3)}
  .head h1,.head .intro{grid-column:span 2}
  .head .intro{padding-bottom:0}
  .head+.prints{margin-top:var(--s4)}
  .next{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:var(--s3)}
  .next .n{white-space:nowrap}
  .about,.contact{padding-top:var(--s3)}
  .about .portrait,.about .text,.contact .text,.contact .portrait{grid-column:span 2}
  .about .text{margin-top:var(--s3)}
  .contact .portrait{margin-top:var(--s4)}
  dl{grid-template-columns:1fr;margin-top:var(--s4)}
  dt{padding:var(--s2) 0 0}dd{border-top:0;font-size:1.375rem}
  dd a{padding:.25rem 0 var(--s2)}
  .card .who,.card .c1,.card .c2{grid-column:span 2}
  .card p>a:not(.name){min-height:var(--tap)}
  .card .law{grid-column:span 2;margin-top:var(--s1)}
  .legal{padding-top:var(--s3)}
  .legal .text{grid-column:span 2}
  .legal dd{font-size:var(--text);padding:.25rem 0 var(--s3)}
  .legal dt{padding-top:var(--s2)}
}
/* big phones and phones held sideways: the two opening pictures stand side by side instead of filling two screens */
@media (min-width:32.5em) and (max-width:43.75em){
  .hero .f1,.hero .f2{grid-column:auto/span 1}
  .hero .f2{margin-top:0}
}
/* small phones: the five menu words no longer fit one row with air between them */
@media (max-width:24.3125em){
  .top nav{font-size:1rem}
}
@media (max-width:22.4375em){
  /* also reached on any phone when the reader has set a much larger text size: then the name and the title may break */
  .name,.hero h1,.next .n{white-space:normal}
  .top nav{flex-wrap:wrap;justify-content:flex-start;column-gap:1.375rem;font-size:1.0625rem}
}
/* touch screens of any width: the contact lines at the foot are as tall as a fingertip */
@media (pointer:coarse){
  .card p>a:not(.name){min-height:var(--tap)}
}
@media print{
  .skip,.top nav,.next{display:none}
  .card{background:none;border-top:1px solid var(--stone)}
}
/* read aloud, not shown */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}