/* A quiet gallery opening and a typographic index of the six practice areas. */
#page-pratiche .studio-scene{
  height:min(66.666667vw,calc(100svh - var(--studio-header-space)));
  min-height:0;
  max-height:none;
  background:#dededb;
  border-bottom:1px solid var(--site-line);
}
#page-pratiche .scene-art{position:absolute;inset:0;transform:none}
#page-pratiche .scene-art img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
#page-pratiche .practice-collection{background:var(--site-paper);padding:64px 0 0}
#page-pratiche .practice-shell{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(24px,4.5vw,64px)}
#page-pratiche .practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:80px;row-gap:0}
#page-pratiche .practice-entry{position:relative;border-top:1px solid #c8c5bc;padding:36px 0 40px;min-width:0}
#page-pratiche .practice-entry::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:var(--site-ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.65,.3,1);
}
#page-pratiche .practice-entry h2{margin:0;text-wrap:initial}
#page-pratiche .practice-card{
  position:static;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--site-ink);
  font:500 clamp(32px,2.8vw,40px)/1.08 var(--site-serif);
  letter-spacing:-.025em;
  text-align:left;
  transform:none;
  transition:color .25s;
}
/* The button's hit area covers its whole entry, including the summary. */
#page-pratiche .practice-card::after{content:"";position:absolute;inset:0;z-index:1}
#page-pratiche .practice-card:hover{background:transparent;box-shadow:none;border:0;transform:none;color:#000}
#page-pratiche .practice-card:focus-visible{outline:none}
#page-pratiche .practice-card:focus-visible::after{outline:2px solid var(--site-accent);outline-offset:8px}
#page-pratiche .practice-name{display:block;min-height:2.16em}
#page-pratiche .practice-summary{
  margin:22px 68px 0 0;
  max-width:410px;
  color:var(--site-copy);
  font:400 16px/1.75 var(--site-sans);
  letter-spacing:0;
}
#page-pratiche .practice-open{
  flex:0 0 42px;
  height:42px;
  position:relative;
  border:1px solid #aaa79e;
  border-radius:50%;
  color:var(--site-copy);
  margin-top:3px;
  transition:background-color .25s,border-color .25s,color .25s;
}
#page-pratiche .practice-open::before,#page-pratiche .practice-open::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
#page-pratiche .practice-open::after{transform:translate(-50%,-50%) rotate(90deg)}
#page-pratiche .practice-entry:focus-within::before{transform:scaleX(1)}
#page-pratiche .practice-entry:focus-within .practice-open{background:var(--site-ink);border-color:var(--site-ink);color:var(--site-paper)}
#page-pratiche .practice-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:64px;
  padding:62px 0 82px;
  margin-top:12px;
  border-top:1px solid #c8c5bc;
}
#page-pratiche .practice-contact-copy{max-width:560px}
#page-pratiche .practice-eyebrow{font:500 10px/1.5 var(--site-sans);letter-spacing:.19em;text-transform:uppercase;color:var(--site-accent);margin:0 0 23px}
#page-pratiche .practice-contact h2{font:500 clamp(36px,3.7vw,52px)/1.05 var(--site-serif);letter-spacing:-.025em;color:var(--site-ink);margin:0;text-wrap:initial}
#page-pratiche .practice-contact h2 em{font-weight:500}
#page-pratiche .practice-contact-description{font:400 16px/1.75 var(--site-sans);color:var(--site-copy);margin:23px 0 0;max-width:465px}
#page-pratiche .practice-contact-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
  gap:40px;
  min-height:54px;
  border-bottom:1px solid var(--site-ink);
  color:var(--site-ink);
  font:500 14px/1.5 var(--site-sans);
  letter-spacing:.025em;
}
#page-pratiche .practice-contact-link span{font-size:24px;font-weight:400;transition:transform .25s}
#page-pratiche .practice-contact-link:hover span{transform:translate(3px,-3px)}

/* The existing detail dialog, dressed as a single reading surface. */
#practiceModal:not(.hidden){display:flex;align-items:center;justify-content:center;padding:24px}
#practiceModal .modal-backdrop{background:rgba(22,23,21,.62);backdrop-filter:blur(8px)}
#practiceModal>.relative{width:100%;max-width:760px;margin:0;padding:0}
#practiceModal>.relative>div{border:0;border-radius:0;box-shadow:0 24px 100px #0003;max-height:calc(100dvh - 48px);animation:practice-sheet-in .28s ease-out}
#practiceModal>.relative>div>div:first-child{padding:42px 44px 30px;gap:20px;border:0}
#practiceModal>.relative>div>div:first-child p{font-size:10px;letter-spacing:.18em;font-weight:500;margin-bottom:18px}
#practiceModal #modalTitle{font:500 clamp(36px,3.6vw,49px)/1.06 var(--site-serif);letter-spacing:-.028em;margin:0;text-wrap:initial}
#practiceModal #modalClose{margin:-6px -8px 0 0;border:1px solid var(--site-line);border-radius:50%;width:40px;height:40px;color:var(--site-copy)}
#practiceModal #modalClose:hover{background:var(--site-surface);color:var(--site-ink)}
#practiceModal #modalClose i{font-size:16px}
#practiceModal>.relative>div>div:nth-child(2){padding:0 44px 40px}
#practiceModal #modalIntro{font-size:17px;line-height:1.75;color:var(--site-copy)}
#practiceModal .mt-6.bg-surface{background:transparent;border:0;border-radius:0;padding:24px 0 0;margin-top:4px}
#practiceModal .mt-6.bg-surface h4{font:500 11px/1.5 var(--site-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--site-ink);margin-bottom:15px}
#practiceModal #modalList{border-top:1px solid var(--site-line)}
#practiceModal #modalList li{margin:0;padding:12px 0;border-bottom:1px solid var(--site-line);font-size:15px;line-height:1.6;gap:14px}
#practiceModal #modalList i{font-size:9px;color:var(--site-muted);margin-top:7px}
#practiceModal #modalContactLink{padding:15px 24px;min-height:52px;letter-spacing:.035em}
#practiceModal>.relative>div>div:nth-child(2)>p:last-child{font-size:11px;line-height:1.6;margin-top:22px}
@keyframes practice-sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(hover:hover){
  #page-pratiche .practice-entry:hover::before{transform:scaleX(1)}
  #page-pratiche .practice-entry:hover .practice-open{background:var(--site-ink);border-color:var(--site-ink);color:var(--site-paper)}
}
@media(max-width:1023px){
  #page-pratiche .practice-grid{column-gap:48px}
  #page-pratiche .practice-collection{padding-top:48px}
  #page-pratiche .practice-card{font-size:34px;gap:18px}
  #page-pratiche .practice-summary{margin-right:0}
  #page-pratiche .practice-contact{gap:48px;padding:52px 0 66px}
}
@media(max-width:767px){
  #page-pratiche .practice-collection{padding-top:32px}
  #page-pratiche .practice-grid{grid-template-columns:minmax(0,1fr);gap:0}
  #page-pratiche .practice-entry{padding:28px 0 31px}
  #page-pratiche .practice-card{font-size:clamp(30px,7.8vw,38px);gap:18px}
  #page-pratiche .practice-name{min-height:0}
  #page-pratiche .practice-open{flex-basis:36px;height:36px;margin-top:0}
  #page-pratiche .practice-summary{margin:17px 25px 0 0;font-size:15px;line-height:1.7;max-width:480px}
  #page-pratiche .practice-contact{display:block;padding:39px 0 55px;margin-top:0}
  #page-pratiche .practice-eyebrow{margin-bottom:20px}
  #page-pratiche .practice-contact h2{font-size:40px}
  #page-pratiche .practice-contact-description{font-size:15px;line-height:1.7;margin-top:20px}
  #page-pratiche .practice-contact-link{margin-top:27px;width:100%;max-width:320px;font-size:13px;min-height:52px}
  #practiceModal:not(.hidden){padding:12px}
  #practiceModal>.relative>div{max-height:calc(100dvh - 24px)}
  #practiceModal>.relative>div>div:first-child{padding:28px 24px 23px;gap:14px}
  #practiceModal>.relative>div>div:first-child p{font-size:9px;margin-bottom:15px}
  #practiceModal #modalTitle{font-size:36px}
  #practiceModal #modalClose{margin:-5px -7px 0 0;width:36px;height:36px}
  #practiceModal>.relative>div>div:nth-child(2){padding:0 24px 28px}
  #practiceModal #modalIntro{font-size:16px;line-height:1.65}
  #practiceModal #modalList li{font-size:14px}
}
@media(max-width:359px){
  #page-pratiche .practice-card{font-size:29px;gap:12px}
  #page-pratiche .practice-summary{margin-right:0}
  #practiceModal #modalTitle{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  #page-pratiche .practice-entry::before,#page-pratiche .practice-open,#page-pratiche .practice-contact-link span{transition:none}
  #practiceModal>.relative>div{animation:none}
}

/* The studio has its own page: the artwork is the whole opening. */
#page-home:not(.active){
  display:block;
  position:absolute;
  inset:0 0 auto;
  width:100%;
  visibility:hidden;
  pointer-events:none;
}
#page-studio{background:var(--site-paper)}
#page-studio .studio-scene{
  position:relative;
  display:flex;
  flex-direction:column;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:hidden;
  isolation:isolate;
  background:var(--site-paper);
  border-bottom:0;
}
#page-studio .scene-art{position:relative;inset:auto;order:1;z-index:0;transform:none;margin-top:0;margin-bottom:-4vw}
#page-studio .scene-art img{display:block;width:100%;height:auto;object-fit:contain;object-position:center;filter:none}
#page-studio .studio-scene::after{
  content:none;display:none;
}
#page-studio .studio-overlay{position:relative;inset:auto;z-index:2;order:0;display:flex;justify-content:flex-end;width:calc(100% - 120px);max-width:1320px;margin:0 auto;padding:clamp(24px,3vw,42px) 0 0;color:var(--site-ink)}
#page-studio .studio-overlay h2{grid-column:1;grid-row:1/4;margin:0;font:500 clamp(52px,5.3vw,76px)/1.04 var(--site-serif);letter-spacing:-.035em;text-wrap:balance;color:inherit}
#page-studio .studio-overlay h2 em{display:inline;font-weight:500}
#page-studio .studio-overlay-description{grid-column:2;max-width:435px;margin:0;color:var(--site-copy);font:400 17px/1.7 var(--site-sans);text-wrap:pretty}
#page-studio .studio-overlay-meta{grid-column:2;margin:18px 0 0;color:var(--site-copy);font:400 12px/1.6 var(--site-sans);letter-spacing:.02em}
#page-studio .studio-overlay-scroll{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:44px;margin-top:0;padding:6px 0 10px;border:0;border-bottom:1px solid #aaa79e;border-radius:0;background:transparent;color:var(--site-ink);font:500 12px/1.5 var(--site-sans);letter-spacing:.025em;text-align:left;cursor:pointer;transition:border-color .2s}
#page-studio .studio-overlay-scroll span{font-size:21px;line-height:1;transition:transform .2s}
#page-studio .studio-overlay-scroll:hover{border-color:var(--site-ink)}
#page-studio .studio-overlay-scroll:hover span{transform:translateY(3px)}
#page-studio .studio-overlay-scroll:focus-visible{outline:2px solid var(--site-ink);outline-offset:7px}
@media(min-width:768px) and (max-width:1100px){
  #page-studio .scene-art{margin-top:0}
  #page-studio .studio-overlay{width:calc(100% - 80px)}
  #page-studio .studio-overlay h2{font-size:48px}
  #page-studio .studio-overlay h2 em{display:inline}
  #page-studio .studio-overlay-description{max-width:395px;font-size:16px;line-height:1.6;margin-top:0}
  #page-studio .studio-overlay-meta{margin-top:18px;font-size:12px}
  #page-studio .studio-overlay-scroll{margin-top:20px}
}
@media(max-width:767px){
  #page-studio .studio-scene{height:auto;min-height:0;padding:0;background:var(--site-paper);border-bottom:0}
  #page-studio .scene-art{bottom:auto;height:auto;margin-top:0;margin-bottom:-28px}
  #page-studio .scene-art img{object-fit:contain;object-position:center center}
  #page-studio .studio-overlay{display:flex;justify-content:flex-end;position:relative;inset:auto;width:calc(100% - 48px);max-width:520px;margin:0 auto;padding-top:22px}
  #page-studio .studio-overlay h2{font-size:clamp(39px,10.8vw,58px);line-height:1.08;letter-spacing:-.035em}
  #page-studio .studio-overlay h2 em{display:inline}
  #page-studio .studio-overlay-description{max-width:460px;margin-top:21px;font-size:17px;line-height:1.7}
  #page-studio .studio-overlay-meta{margin-top:21px;font-size:12px}
  #page-studio .studio-overlay-scroll{margin-top:21px;font-size:12px;gap:28px}
}

/* Family archive: original photographs, generous margins, a quiet editorial rhythm. */
#page-studio .family-history{background:var(--site-paper);color:var(--site-ink)}
#page-studio .family-shell{width:calc(100% - 120px);max-width:1320px;margin:0 auto}
#page-studio .family-intro{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:100px;padding:112px 0 100px}
#page-studio .family-eyebrow{margin:0 0 24px;color:var(--site-accent);font:500 11px/1.5 var(--site-sans);letter-spacing:.17em;text-transform:uppercase}
#page-studio .family-intro h2{margin:0;font:500 clamp(60px,5.7vw,86px)/.99 var(--site-serif);letter-spacing:-.04em}
#page-studio .family-intro h2 em{font-weight:500}
#page-studio .family-intro-copy{max-width:455px;padding:0 0 5px;font:400 18px/1.8 var(--site-sans);color:var(--site-copy)}
#page-studio .family-intro-copy p{margin:0}
#page-studio .family-intro-copy p:first-child{margin-bottom:19px;color:var(--site-ink);font:500 27px/1.3 var(--site-serif);letter-spacing:-.015em}
#page-studio .family-portrait{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:80px;padding:0 0 106px}
#page-studio .family-photograph{margin:0;min-width:0}
#page-studio .family-photograph img{display:block;width:100%;height:auto;aspect-ratio:4/3;background:var(--site-surface)}
#page-studio .family-photograph figcaption{display:flex;justify-content:space-between;gap:14px;margin-top:15px;padding-top:13px;border-top:1px solid var(--site-line);color:var(--site-muted);font:400 12px/1.6 var(--site-sans)}
#page-studio .family-photograph figcaption span:last-child{text-align:right}
#page-studio .family-biography{min-width:0;padding:3px 0 32px}
#page-studio .family-biography .family-eyebrow{margin-bottom:21px}
#page-studio .family-biography h3{margin:0;font:500 clamp(46px,4.1vw,62px)/1 var(--site-serif);letter-spacing:-.035em}
#page-studio .family-role{margin:22px 0 28px;color:var(--site-ink);font:500 22px/1.3 var(--site-serif);font-style:italic}
#page-studio .family-body{font:400 16px/1.8 var(--site-sans);color:var(--site-copy)}
#page-studio .family-body p{margin:0 0 17px}
#page-studio .family-body p:last-child{margin-bottom:0}
#page-studio .family-portrait-reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);padding:94px 0 110px;border-top:1px solid var(--site-line)}
#page-studio .family-portrait-reverse .family-photograph{grid-column:2;grid-row:1}
#page-studio .family-portrait-reverse .family-biography{grid-column:1;grid-row:1}
#page-studio .family-body .family-memory{margin-top:25px;padding-top:23px;border-top:1px solid var(--site-line);font-size:14px;line-height:1.75}
#page-studio .family-memory a{color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-line);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
#page-studio .family-memory a:hover{text-decoration-color:var(--site-ink)}
#page-studio .family-continuity{display:flex;align-items:center;justify-content:space-between;gap:60px;border-top:1px solid var(--site-line);padding:56px 0 78px}
#page-studio .family-continuity .family-eyebrow{margin-bottom:18px}
#page-studio .family-continuity-title{margin:0;font:500 clamp(36px,3.3vw,48px)/1.12 var(--site-serif);letter-spacing:-.028em}
#page-studio .family-continuity-title em{font-weight:500}
#page-studio .family-profile-link{display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:52px;border-bottom:1px solid var(--site-ink);color:var(--site-ink);font:500 14px/1.5 var(--site-sans)}
#page-studio .family-profile-link span{font-size:23px;transition:transform .2s}
#page-studio .family-profile-link:hover span{transform:translate(3px,-3px)}
#page-studio .family-history a:focus-visible{outline:2px solid var(--site-accent);outline-offset:6px}
@media(min-width:1600px){
  #page-studio .family-body{font-size:17px}
}
@media(max-width:1100px){
  #page-studio .family-shell{width:calc(100% - 80px)}
  #page-studio .family-intro{gap:54px;padding:85px 0 75px}
  #page-studio .family-intro-copy{font-size:16px}
  #page-studio .family-intro-copy p:first-child{font-size:25px}
  #page-studio .family-portrait{gap:44px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding-bottom:75px}
  #page-studio .family-biography h3{font-size:46px}
  #page-studio .family-role{font-size:21px;margin:21px 0}
  #page-studio .family-body{font-size:15px}
  #page-studio .family-photograph figcaption{display:block;font-size:11px}
  #page-studio .family-photograph figcaption span{display:block}
  #page-studio .family-photograph figcaption span:last-child{text-align:left;margin-top:3px}
  #page-studio .family-portrait-reverse{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);padding-top:75px}
  #page-studio .family-continuity{gap:40px}
  #page-studio .family-profile-link{gap:22px;font-size:13px}
}
@media(max-width:900px){
  #page-studio .family-shell{width:calc(100% - 48px);max-width:640px}
  #page-studio .family-intro{display:block;padding:60px 0 43px}
  #page-studio .family-eyebrow{font-size:10px;margin-bottom:22px}
  #page-studio .family-intro h2{font-size:clamp(54px,12vw,74px)}
  #page-studio .family-intro-copy{max-width:520px;margin-top:31px;padding:0;font-size:16px;line-height:1.75}
  #page-studio .family-intro-copy p:first-child{font-size:25px;margin-bottom:13px}
  #page-studio .family-portrait{display:flex;flex-direction:column;gap:33px;align-items:stretch;padding:0 0 49px}
  #page-studio .family-photograph figcaption{display:flex;gap:20px;padding-top:11px;margin-top:12px;font-size:11px}
  #page-studio .family-photograph figcaption span:last-child{text-align:right;margin-top:0;max-width:48%}
  #page-studio .family-biography{padding:0}
  #page-studio .family-biography .family-eyebrow{margin-bottom:17px}
  #page-studio .family-biography h3{font-size:clamp(46px,10vw,60px)}
  #page-studio .family-role{margin:21px 0 23px;font-size:23px}
  #page-studio .family-body{font-size:16px;line-height:1.8;max-width:560px}
  #page-studio .family-portrait-reverse{padding-top:46px}
  #page-studio .family-body .family-memory{font-size:14px;margin-top:23px;padding-top:22px}
  #page-studio .family-continuity{display:block;padding:38px 0 55px}
  #page-studio .family-continuity-title{font-size:37px;max-width:340px}
  #page-studio .family-profile-link{margin-top:28px;max-width:350px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  #page-studio .studio-overlay-scroll span{transition:none}
  #page-studio .family-profile-link span,#page-studio .family-memory a{transition:none}
}