:root{
  --ink:#0E1620; --ink-2:#1B2735; --slate:#41525F;
  --paper:#E9E7E1; --paper-2:#F4F3EF;
  --rule:#C9C6BE; --rule-dark:#2C3846;
  --patina:#3F7C6E; --patina-lt:#6FA79A;
  --display:"Bodoni Moda",Georgia,serif;
  --prose:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --rail:88px;
}

body.dr{background:var(--paper);color:var(--ink);font-family:var(--prose);font-weight:300;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;margin:0}
body.dr :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,table,button,input,textarea,select){
  margin:0;padding:0;border:0;background:none;font:inherit;color:inherit}
body.dr :where(img){max-width:100%;display:block;border:0}
body.dr :where(ul,ol){list-style:none}
body.dr *,body.dr *:before,body.dr *:after{box-sizing:border-box}
body.dr ::selection{background:var(--patina);color:var(--paper-2)}
body.dr a{color:inherit}
html{scroll-behavior:smooth}

.dr-shell{margin-left:var(--rail)}
.dr-wrap{max-width:1080px;padding:0 48px;margin:0 auto}
.dr-sec{padding:104px 0}

/* rail */
.dr-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);border-right:1px solid var(--rule);
  z-index:40;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 44px);
  background-position:0 0;background-size:9px 100%;background-repeat:repeat-y}
.dr-rail>*{pointer-events:auto}
.dr-rail:after{content:"";position:absolute;right:-1px;top:0;width:1px;height:var(--progress,0%);
  background:var(--patina);transition:height .1s linear}
.dr-mark{position:absolute;top:74px;left:50%;transform:translateX(-50%);width:40px;height:40px;
  border:1px solid var(--patina);border-radius:50%;display:flex;align-items:center;
  justify-content:center;text-decoration:none;font-family:var(--display);font-size:14px;
  font-weight:500;letter-spacing:.03em;color:var(--patina);
  transition:background .4s ease,color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.dr-mark:hover,.dr-mark:focus-visible{background:var(--patina);color:var(--paper-2);
  transform:translateX(-50%) scale(1.06)}
.dr-railnav{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;
  gap:15px;justify-items:center}
.dr-dot{position:relative;display:block;width:16px;height:7px;text-decoration:none}
.dr-dot:before{content:"";position:absolute;left:0;top:3px;width:16px;height:1px;
  background:var(--slate);opacity:.5;
  transition:width .45s cubic-bezier(.2,.7,.3,1),background .4s,opacity .4s}
.dr-dot:hover:before,.dr-dot:focus-visible:before{opacity:1;width:26px}
.dr-dot.on:before{width:32px;height:2px;background:var(--patina);opacity:1}
.dr-dot span{position:absolute;left:34px;top:-6px;white-space:nowrap;background:var(--ink);
  color:var(--paper-2);padding:5px 11px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateX(-6px);
  pointer-events:none;transition:opacity .3s,transform .3s}
.dr-dot:hover span,.dr-dot:focus-visible span{opacity:1;transform:none}
.dr-now{position:absolute;bottom:104px;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;max-height:230px;overflow:hidden}
.dr-now span{font-family:var(--display);font-style:italic;font-size:16px;color:var(--slate);
  transition:opacity .18s ease}
.dr-pct{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--patina)}
.dr-pct:after{content:"%";opacity:.5;margin-left:1px}

/* masthead */
.dr-mast{position:fixed;top:0;left:var(--rail);right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:18px 48px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper-2);border-bottom:1px solid transparent;
  transition:background .45s ease,color .45s ease,border-color .45s ease,padding .35s ease}
.dr-mast.docked{background:var(--paper);color:var(--ink);border-bottom-color:var(--rule);padding:12px 48px}
.dr-mast a{text-decoration:none}
.dr-mast .name{font-family:var(--display);font-size:17px;letter-spacing:.02em;text-transform:none;font-weight:500}
.dr-mast nav{display:flex;gap:24px}
.dr-mast nav a{opacity:.68;padding-bottom:2px;border-bottom:1px solid transparent;
  transition:opacity .3s,border-color .3s}
.dr-mast nav a:hover{opacity:1}
.dr-mast nav a[aria-current]{opacity:1;border-bottom-color:var(--patina-lt)}
.dr-mast.docked nav a[aria-current]{border-bottom-color:var(--patina)}
.dr-cta{border-bottom:1px solid currentColor;padding-bottom:2px;opacity:.9}

/* hero */
.dr-hero{background:var(--ink);color:var(--paper-2);padding:150px 0 0;overflow:hidden}
.dr-hero .dr-wrap{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:end}
.dr-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--patina-lt);margin-bottom:30px}
.dr-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(56px,8.4vw,116px);
  line-height:.94;letter-spacing:-.02em}
.dr-hero h1 em{font-style:italic}
.dr-role{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#8C9AA6;margin-top:32px;line-height:2}
.dr-lede{font-size:21px;font-weight:200;line-height:1.55;color:#C4CBD2;max-width:33ch;margin-top:26px}
.dr-portrait{border:1px solid var(--rule-dark);padding:9px;align-self:end;margin-bottom:-1px}
.dr-herofoot{margin-top:76px;border-top:1px solid var(--rule-dark);display:flex;
  justify-content:space-between;align-items:center;gap:24px;padding:16px 0 20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7A8794}
.dr-herofoot a{color:var(--patina-lt);text-decoration:none;border-bottom:1px solid transparent}
.dr-herofoot a:hover{border-bottom-color:var(--patina-lt)}

/* page header */
.dr-phead{background:var(--ink);color:var(--paper-2);padding:150px 0 62px}
.dr-phead .dr-wrap{display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:end}
.dr-phead .dr-mark-l{color:#7A8794}
.dr-phead h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,7vw,86px);
  line-height:.98;letter-spacing:-.02em}
.dr-phead h1 em{font-style:italic}
.dr-phead .dr-lede{grid-column:2;color:#AEB7C0;max-width:48ch;margin-top:22px}
.dr-strip{grid-column:1/-1;margin-top:52px;border-top:1px solid var(--rule-dark);padding-top:16px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7A8794}

/* section heads */
.dr-head{display:grid;grid-template-columns:150px 1fr;gap:40px;padding-bottom:22px;
  border-bottom:1px solid var(--rule);margin-bottom:46px}
.dr-mark-l{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);padding-top:11px}
.dr-head h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);
  line-height:1.06;letter-spacing:-.015em}
.dr-note{grid-column:2;font-size:17px;color:var(--slate);max-width:52ch;margin-top:12px}

/* register rows */
.dr-reg{border-top:1px solid var(--rule)}
.dr-row{border-bottom:1px solid var(--rule)}
.dr-btn{width:100%;cursor:pointer;text-align:left;display:grid;
  grid-template-columns:150px 1fr 34px;gap:40px;align-items:baseline;padding:26px 0;
  font-family:inherit;color:inherit;transition:padding-left .35s cubic-bezier(.2,.7,.3,1)}
.dr-btn:hover,.dr-btn:focus-visible{padding-left:14px}
.dr-btn:focus-visible{outline:1px solid var(--patina);outline-offset:6px}
.dr-ref{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--patina)}
.dr-title{font-family:var(--display);font-size:clamp(21px,2.7vw,30px);font-weight:400;line-height:1.15}
.dr-sign{position:relative;height:11px;width:11px;justify-self:end;align-self:center}
.dr-sign:before,.dr-sign:after{content:"";position:absolute;background:var(--ink);
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.dr-sign:before{left:0;top:5px;width:11px;height:1px}
.dr-sign:after{left:5px;top:0;width:1px;height:11px}
.dr-row.open .dr-sign:after{transform:scaleY(0)}
.dr-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.3,1)}
.dr-row.open .dr-panel{grid-template-rows:1fr}
.dr-panel>div{overflow:hidden}
.dr-body{display:grid;grid-template-columns:150px 1fr;gap:40px;padding:0 0 30px}
.dr-body p{grid-column:2;max-width:56ch;color:var(--slate);font-size:17px}
.dr-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.dr-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--rule);padding:5px 10px;color:var(--slate)}

/* profile */
.dr-band{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dr-profile{display:grid;grid-template-columns:150px 1fr 260px;gap:40px;align-items:start}
.dr-profile .txt{max-width:56ch}
.dr-profile .txt p+p{margin-top:20px}
.dr-drop:first-letter{font-family:var(--display);float:left;font-size:76px;line-height:.78;
  padding:6px 12px 0 0;font-weight:400}
.dr-pull{border-left:1px solid var(--patina);padding-left:22px;font-family:var(--display);
  font-style:italic;font-size:21px;line-height:1.42;color:var(--ink-2);margin-top:34px}
.dr-side{border:1px solid var(--rule);padding:8px;background:var(--paper)}
.dr-cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-top:12px;line-height:1.7}
.dr-more{display:inline-block;margin-top:30px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--patina);padding-bottom:3px}

/* credentials */
.dr-cred{width:100%;border-collapse:collapse}
.dr-cred tr{border-bottom:1px solid var(--rule)}
.dr-cred tr:first-child{border-top:1px solid var(--rule)}
.dr-cred th{text-align:left;width:150px;padding:22px 40px 22px 0;vertical-align:top;
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate)}
.dr-cred td{padding:22px 0;vertical-align:top}
.dr-cred td strong{font-family:var(--display);font-weight:500;font-size:20px;display:block;margin-bottom:3px}
.dr-cred td span{color:var(--slate);font-size:16px}

/* gallery */
.dr-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:44px 34px;
  border-top:1px solid var(--rule);padding-top:44px}
.dr-plate figure{border:1px solid var(--rule);padding:9px;background:var(--paper-2);overflow:hidden}
.dr-plate img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.dr-plate:hover img{transform:scale(1.04)}
.dr-plate-ref{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--patina);margin-top:14px}
.dr-plate-cap{font-size:16px;color:var(--slate);margin-top:5px;line-height:1.5}

/* articles */
.dr-entry{display:grid;grid-template-columns:150px 1fr 130px;gap:40px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:padding-left .35s cubic-bezier(.2,.7,.3,1)}
.dr-entry:first-of-type{border-top:1px solid var(--rule)}
.dr-entry:hover{padding-left:14px}
.dr-entry:hover .dr-etitle{color:var(--patina)}
.dr-emeta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--patina);line-height:1.9}
.dr-etitle{font-family:var(--display);font-size:clamp(22px,3vw,32px);font-weight:400;
  line-height:1.14;display:block;transition:color .3s}
.dr-esub{display:block;color:var(--slate);font-size:16px;margin-top:9px;max-width:56ch}
.dr-edate{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);text-align:right}

/* single article */
.dr-reading{max-width:640px;margin:0 auto}
.dr-reading p{font-size:19px;line-height:1.75;margin-bottom:24px}
.dr-reading h2,.dr-reading h3{font-family:var(--display);font-weight:400;font-size:27px;
  margin:44px 0 16px;line-height:1.2}
.dr-reading blockquote{border-left:1px solid var(--patina);padding-left:24px;margin:36px 0;
  font-family:var(--display);font-style:italic;font-size:22px;line-height:1.45;color:var(--ink-2)}
.dr-reading ul,.dr-reading ol{margin:0 0 24px 20px;list-style:disc}
.dr-reading ol{list-style:decimal}
.dr-reading li{margin-bottom:9px}
.dr-reading a{color:var(--patina);text-decoration:none;border-bottom:1px solid var(--patina)}
.dr-byline{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:16px 0;margin:0 auto 46px;max-width:640px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}

/* contact */
.dr-form{display:grid;grid-template-columns:150px 1fr;gap:40px}
.dr-fields{grid-column:2;max-width:560px}
.dr-field{margin-bottom:26px}
.dr-field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-bottom:9px}
.dr-field input,.dr-field textarea,.dr-field select{width:100%;background:transparent;
  border-bottom:1px solid var(--rule);padding:11px 0;font-family:var(--prose);font-size:18px;
  font-weight:300;color:var(--ink);transition:border-color .3s}
.dr-field textarea{resize:vertical;min-height:118px;line-height:1.6}
.dr-field input:focus,.dr-field textarea:focus,.dr-field select:focus{outline:0;border-bottom-color:var(--patina)}
.dr-field input::placeholder,.dr-field textarea::placeholder{color:#A8A49B}
.dr-submit{margin-top:12px;background:var(--ink);color:var(--paper-2);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:17px 34px;transition:background .3s}
.dr-submit:hover{background:var(--patina)}
.dr-err{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#A33;margin-top:7px}
.dr-ok{grid-column:2;border:1px solid var(--patina);padding:20px 24px;color:var(--ink-2);
  font-size:17px;margin-bottom:26px}

/* contact block */
.dr-contact{background:var(--ink);color:var(--paper-2);padding:112px 0}
.dr-contact .dr-head{border-bottom-color:var(--rule-dark)}
.dr-contact .dr-mark-l{color:#7A8794}
.dr-contact h2{font-size:clamp(34px,5.6vw,62px)}
.dr-cgrid{display:grid;grid-template-columns:150px 1fr;gap:40px}
.dr-cgrid p{grid-column:2;color:#AEB7C0;max-width:46ch;font-size:19px;font-weight:200}
.dr-links{grid-column:2;margin-top:40px;border-top:1px solid var(--rule-dark)}
.dr-link{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;
  border-bottom:1px solid var(--rule-dark);text-decoration:none;
  transition:padding-left .35s cubic-bezier(.2,.7,.3,1)}
.dr-link:hover{padding-left:12px}
.dr-link:hover .val{color:var(--patina-lt)}
.dr-link .key{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7A8794}
.dr-link .val{font-family:var(--display);font-size:clamp(18px,2.4vw,25px);transition:color .3s}
.dr-contact .dr-links.light{border-top-color:var(--rule)}

/* footer */
.dr-foot{background:var(--ink);color:#6E7B88;padding:0 0 44px}
.dr-foot .inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--rule-dark);padding-top:22px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase}
.dr-foot nav{display:flex;gap:26px}
.dr-foot a{text-decoration:none}
.dr-foot a:hover{color:var(--patina-lt)}

/* reveal, degrades to visible without JS */
.dr-rv{opacity:1;transform:none}
html.dr-js .dr-rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
html.dr-js .dr-rv.in{opacity:1;transform:none}

/* admin bar */
body.dr.admin-bar .dr-mast{top:32px}
body.dr.admin-bar .dr-rail{top:32px}

@media(max-width:900px){
  :root{--rail:44px}
  .dr-wrap{padding:0 26px}
  .dr-mast{padding:14px 26px}
  .dr-mast.docked{padding:11px 26px}
  .dr-mast nav{display:none}
  .dr-hero{padding-top:118px}
  .dr-hero .dr-wrap{grid-template-columns:1fr;gap:38px}
  .dr-portrait{max-width:220px}
  .dr-phead{padding-top:118px}
  .dr-head,.dr-btn,.dr-body,.dr-profile,.dr-cgrid,.dr-form,.dr-entry,.dr-phead .dr-wrap{
    grid-template-columns:1fr;gap:14px}
  .dr-btn{grid-template-columns:1fr 34px;gap:14px}
  .dr-ref{grid-column:1/-1}
  .dr-note,.dr-body p,.dr-tags,.dr-cgrid p,.dr-links,.dr-fields,.dr-ok,.dr-phead .dr-lede{grid-column:1}
  .dr-edate{text-align:left}
  .dr-cred th{display:block;padding:20px 0 0}
  .dr-cred td{display:block;padding:6px 0 20px}
  .dr-now,.dr-dot span{display:none}
  .dr-mark{width:30px;height:30px;font-size:11px;top:66px}
  .dr-railnav{gap:12px}
  .dr-dot,.dr-dot:before{width:12px}
  .dr-dot.on:before{width:20px}
  .dr-sec{padding:72px 0}
  .dr-plates{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px 22px}
}
@media(max-width:600px){
  body.dr.admin-bar .dr-mast,body.dr.admin-bar .dr-rail{top:46px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.dr *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html.dr-js .dr-rv{opacity:1;transform:none}
}


/* Foreign footer markup control.
   Astra and Elementor print widgets and icon sprites on wp_footer. Their CSS is
   dequeued on these templates, so that markup would render unstyled at natural
   size. Only our own top level nodes are allowed to paint. */
body.dr > *:not(.dr-rail):not(.dr-shell):not(#wpadminbar):not(script):not(style):not(noscript){
  display:none !important;
}
body.dr #ast-scroll-top,
body.dr .ast-scroll-top-icon,
body.dr .elementor-location-footer,
body.dr .e-con.e-parent{display:none !important}
body.dr svg[style*="display:none"],
body.dr svg[aria-hidden="true"]:not(.dr-shell svg){position:absolute;width:0;height:0;overflow:hidden}


/* Hero display type corrections.
   Bodoni italic carries a deep descender on the j in Najam. At the original
   0.94 line height it collided with the role line below and was clipped by the
   section overflow. Open the leading, give the italic line its own reserve, and
   let the mono role line breathe. */
.dr-hero h1{line-height:1.04;padding-bottom:.04em}
.dr-hero h1 em{display:inline-block;padding-bottom:.12em;margin-bottom:-.12em}
.dr-hero{overflow:visible}
.dr-role{margin-top:40px;letter-spacing:.16em;line-height:2.1;overflow-wrap:break-word}
.dr-lede{margin-top:28px}
@media(max-width:1180px){
  .dr-hero h1{font-size:clamp(48px,7.4vw,92px)}
  .dr-role{font-size:11px;letter-spacing:.12em}
}
@media(max-width:900px){
  .dr-role{margin-top:30px;line-height:1.95}
}
