/* Desktop overview. Perspective reads first, inset from both edges.
   A descending line leads to Projects, still one row of four circles. */
@media screen and (min-width: 1050px) and (min-height: 650px) {
  body.art-research .site-reader {
    max-width: 1380px;
    padding-bottom: 0;
  }

  body.art-research:has(#home:not([hidden]), #research:not([hidden]), #embody:not(.is-lab):not([hidden]), #impressions:not([hidden])) .site-header {
    padding: 22px 34px 16px;
    gap: 24px;
  }

  body.art-research .site-nav {
    gap: 2px;
  }

  body.art-research .site-footer {
    margin: 0 34px;
    padding: 10px 0;
    gap: 8px 22px;
  }

  body.art-research #research {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px clamp(40px, 4.5vw, 72px) 40px;
  }

  body.art-research #research > .hero-title,
  body.art-research #embody:not(.is-lab) .hero-title {
    max-width: none;
    white-space: nowrap;
    margin-top: 16px;
    font-size: clamp(32px, 3.2vw, var(--type-title));
    line-height: 1.08;
  }

  body.art-research #research > .hero-title {
    width: min(calc(62rem + 34px), 100%);
    margin-top: 2px;
    margin-inline: auto;
    padding-inline-start: 34px;
    box-sizing: border-box;
    font-size: 40px;
    text-align: start;
  }

  body.art-research #research > .research-split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(calc(62rem + 34px), 100%);
    margin-top: 18px;
    --rail-gap: clamp(56px, 8vh, 84px);
  }

  body.art-research #research .research-perspective {
    width: min(62rem, 100%);
  }

  body.art-research #research .research-part {
    margin-bottom: 14px;
  }

  body.art-research #research .research-work .research-part {
    margin-bottom: 20px;
    text-align: start;
  }

  body.art-research #research .research-statement {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.6;
    text-align: start;
  }

  body.art-research #research .research-statement p + p {
    margin-top: 1em;
  }

  body.art-research #research .research-work {
    width: 100%;
  }

  body.art-research #research .research-projects {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
    gap: 12px 28px;
    padding-top: 0;
    padding-bottom: 8px;
    max-width: none;
    width: 100%;
    justify-items: center;
    align-items: start;
  }

  body.art-research #research .research-orb {
    width: 100%;
    max-width: 220px;
  }

  body.art-research #research .research-orb-disc {
    width: 100%;
  }

  body.art-research #research .research-name {
    font-size: 17px;
  }

  body.art-research #impressions {
    padding: 0;
  }

  body.art-research #impressions .page-header {
    padding-inline: 34px;
  }

  body.art-research #impressions .hero-title {
    margin-top: 12px;
    font-size: clamp(52px, 5.2vw, 72px);
    text-align: start;
  }
}



/* Reduce surplus spacing in shorter laptop windows, keeping readable body text
   and the same visible content. The mobile/tablet design remains unchanged. */
@media screen and (min-width: 1050px) and (min-height: 650px) and (max-height: 850px) {
  body.art-research #research {
    padding-top: 8px;
    padding-bottom: 36px;
  }

  body.art-research #research > .hero-title,
  body.art-research #embody:not(.is-lab) .hero-title {
    font-size: 36px;
    margin-top: 8px;
  }

  body.art-research #research > .research-split {
    margin-top: 16px;
    --rail-gap: 36px;
  }

  body.art-research #research .research-statement {
    margin-top: 0;
    font-size: var(--type-body);
    line-height: 1.55;
    text-align: start;
  }

  body.art-research #research .research-projects {
    margin-top: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
    width: 100%;
  }

  body.art-research #research .research-orb {
    width: 100%;
    max-width: 208px;
  }

  body.art-research #research .research-orb-disc {
    width: 100%;
  }

  body.art-research #impressions .hero-title {
    font-size: clamp(48px, 4.6vw, 60px);
    margin-top: 8px;
  }

  body.art-research #about {
    padding-top: 8px;
  }

  body.art-research #about .page-header h1 {
    font-size: 36px;
  }

  body.art-research .about-layout {
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 12px 28px;
  }

  body.art-research #about .about-body {
    font-size: var(--type-body);
    line-height: 1.55;
  }

  body.art-research #about .contact {
    margin-top: 44px;
    padding-top: 18px;
  }
}

/* The selected experiment is a hairline on the page, not a second card. */
body.art-research #embody:not(.is-lab) .embody-labs a[aria-current="page"],
body.art-research #embody.is-lab .embody-labs a[aria-current="page"] {
  background: transparent;
}
body.art-research #embody:not(.is-lab) .embody-labs a[aria-current="page"] {
  color: #ffdbb8;
  border-bottom-color: #ffdbb8;
}
body.art-research #embody.is-lab .embody-labs a[aria-current="page"] {
  color: #ffdbb8;
  border-bottom-color: #ffdbb8;
}

/* ---------------------------------------------------------------------------
   About, in the same voice as Research / Embody / Impressions:
   a large glowing serif title (no eyebrow or back link), Research's reading
   column, peach links, and the site's orb treatment for the portrait and the
   CV / talks links. Everything for About lives in this block.
   ------------------------------------------------------------------------- */
body.art-research #about :is(.back-link, .page-header .eyebrow) {display:none;}
body.art-research #about .page-header {margin:0;padding:0;border:0;}
body.art-research #about .page-header h1 {
  max-width:none;margin:22px 0 0;
  font:600 clamp(32px,3.2vw,40px)/1.08 var(--serif);letter-spacing:-.03em;text-wrap:balance;
  color:#fff8ee;text-shadow:0 2px 22px #0a172be6,0 1px 2px #0a172bcc;
}
body.art-research #about :is(.about-body,.link-row,.contact) {margin-inline-start:0;}
body.art-research #about .about-body {
  max-width:none;margin-top:20px;
  font:400 var(--type-body)/1.6 var(--serif);
  text-shadow:0 2px 18px #0a172be6,0 1px 2px #0a172bcc;
}
body.art-research #about .about-body p + p {margin-top:1em;}

/* Links: Research's peach underline and small arrow. */
body.art-research #about :is(.about-body a, .contact .email) {
  color:#ffdbb8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;
  text-shadow:0 1px 10px #0a172be6;
}
body.art-research #about .about-body a::after {
  content:"↗";display:inline-block;margin-inline:.22em .06em;font-size:.46em;line-height:1;
  vertical-align:.42em;text-decoration:none;transition:transform .25s ease;
}
body.art-research #about :is(.about-body a, .contact .email):is(:hover,:focus-visible) {color:#fff8ee;}
body.art-research #about .about-body a:is(:hover,:focus-visible)::after {transform:translate(2px,-2px);}

/* CV and talks as small orbs, like the Research project circles. */
body.art-research #about .link-row {display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:30px;}
body.art-research #about .link-row a {
  display:flex;align-items:center;justify-content:center;width:124px;min-height:0;aspect-ratio:1;
  padding:14px;box-sizing:border-box;border:1px solid #fff8ee55;border-radius:50%;
  background:#0d1a2ef2;box-shadow:0 14px 40px #0004;
  color:#fff8ee;font:600 16px/1.2 var(--serif);letter-spacing:0;text-align:center;text-decoration:none;
  text-shadow:0 1px 10px #0a172be6;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .35s ease;
}
body.art-research #about .link-row a:is(:hover,:focus-visible) {
  transform:translateY(-4px) scale(1.02);border-color:#ffdbb8;
  box-shadow:0 0 0 1px #ffdbb866,0 0 26px #ffdbb866,0 22px 54px #0006;
}
body.art-research #about .link-row a:focus-visible {outline:2px solid #ffdbb8;outline-offset:4px;}
body.art-research #about .link-row .link-mark {display:none;}

/* "Get in touch": Research's peach section label, no divider line. */
body.art-research #about .contact {margin-top:44px;padding-top:0;border:0;}
body.art-research #about .contact .label {
  margin:0 0 12px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#ffdbb8;text-shadow:0 1px 10px #0a172be6;
}
body.art-research #about .contact .email {display:inline-block;min-height:0;margin-bottom:6px;font:600 22px/1.3 var(--serif);}
body.art-research #about .contact > p:not(.label) {text-shadow:0 2px 18px #0a172be6,0 1px 2px #0a172bcc;}
html[dir="rtl"] body.art-research #about :is(.page-header h1, .contact .label) {letter-spacing:0;text-transform:none;}

/* Portrait: the glowing peach rim of an active orb, with the same gentle lift. */
body.art-research #about .about-portrait {
  border:1px solid #ffdbb8;
  box-shadow:0 0 0 1px #ffdbb866,0 0 26px #ffdbb866,0 14px 40px #0005;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;
}
body.art-research #about .about-portrait:hover {
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 0 0 1px #ffdbb899,0 0 34px #ffdbb888,0 22px 54px #0006;
}
@media (prefers-reduced-motion:reduce) {
  body.art-research #about :is(.about-portrait, .link-row a, .about-body a::after) {transition:none;}
  body.art-research #about :is(.about-portrait:hover, .link-row a:hover, .link-row a:focus-visible) {transform:none;}
}

/* Research's centred column, title and text inset the same 34px. */
@media (min-width:701px) {
  body.art-research #about {
    display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;box-sizing:border-box;
    padding:28px clamp(36px,4.5vw,72px) 48px;
  }
  body.art-research #about .about-layout {
    width:min(calc(62rem + 34px),100%);margin-inline:auto;padding-inline-start:34px;box-sizing:border-box;
    grid-template-columns:minmax(0,1fr) clamp(220px,24vw,300px);gap:0 clamp(32px,4vw,56px);align-items:start;
  }
  body.art-research #about .about-portrait {margin-top:22px;}
}
@media screen and (min-width:1050px) and (min-height:650px) {
  body.art-research #about {padding:8px clamp(40px,4.5vw,72px) 40px;}
  body.art-research #about .page-header h1 {margin-top:2px;font-size:40px;}
  body.art-research #about .about-portrait {margin-top:30px;}   /* room for the glow inside the scroll area */
}
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:850px) {
  body.art-research #about .page-header h1 {margin-top:8px;font-size:36px;}
  body.art-research #about .about-portrait {margin-top:30px;}
  body.art-research #about .about-body {font-size:var(--type-body);line-height:1.55;}
  body.art-research #about {padding-bottom:28px;}
  body.art-research #about .link-row {margin-top:20px;}
  body.art-research #about .link-row a {width:108px;font-size:15px;}
  body.art-research #about .contact {margin-top:26px;}
}
@media (max-width:700px) {
  body.art-research #about .page-header h1 {margin-top:4px;font-size:clamp(28px,8vw,36px);}
  body.art-research #about .link-row a {width:112px;font-size:15px;}
  body.art-research #about {padding-bottom:28px;}
  body.art-research #about .about-portrait {margin-top:28px;}
}

/* The four research project pages: each fits on one desktop screen, in the same spread.
   A header band: title and question on the left; the lead (the finding, the project intro, or
   the opening paragraph), authors and links on the right. Below, the body in columns:
   Embodied reads text, Fig. 4c, text, Fig. 6d in its own order; Sleep runs in two text columns;
   Organoids sets its three questions side by side; Rhythms puts its other two paragraphs in two
   columns. Body text scales a little with window height. Phones and tablets keep one column. */
@media screen and (min-width:1050px) and (min-height:650px) {
  body.art-research :is(#model, #sleep, #organoids, #circadian) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: clamp(36px, 4vw, 64px);
    align-items: start;
    width: min(100%, 86rem);
    box-sizing: border-box;
    padding: 4px clamp(40px, 4.5vw, 72px) 16px;
  }
  body.art-research :is(#model, #sleep, #organoids, #circadian) > .back-link { grid-column: 1 / -1; min-height: 32px; margin: -6px 0 4px; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) > .page-header { grid-column: 1; grid-row: 2 / span 2; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) .page-header h1 { margin-top: 0; font-size: 40px; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) .page-header .project-question { margin-top: 8px; font-size: 22px; }
  /* the lead, set between two hairlines like the finding */
  body.art-research :is(#model, #sleep) > .paper-finding,
  body.art-research #organoids > .project-intro,
  body.art-research #circadian > .model-essay > p:first-child {
    grid-column: 2 / span 2; grid-row: 2; align-self: start; max-width: none;
    margin-top: 2px; padding: 10px 0; border-block: 1px solid #ffffff55;
    font: 400 var(--type-body)/1.55 var(--serif);
  }
  body.art-research :is(#model, #sleep, #organoids) > .project-meta { grid-column: 2; grid-row: 3; align-self: center; margin-top: 4px; }
  body.art-research :is(#model, #sleep) > .model-links,
  body.art-research #organoids > .project-contact { grid-column: 3; grid-row: 3; align-self: center; margin-top: 4px; }
  body.art-research :is(#model, #sleep) > .model-essay,
  body.art-research #organoids > .project-notes { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  body.art-research :is(#model, #sleep) .model-essay > p,
  body.art-research :is(#model, #sleep) .model-essay > .essay-part > p { font-size: clamp(14.5px, 1.85vh, 16.5px); line-height: 1.52; }
  body.art-research :is(#model, #sleep) .model-essay > p + p,
  body.art-research :is(#model, #sleep) .model-essay > .essay-part > p + p { margin-top: .85em; }

  body.art-research #model .model-essay {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr) minmax(0, 1.45fr) minmax(0, .75fr);
    column-gap: clamp(22px, 2.2vw, 34px);
    align-items: start;
  }
  body.art-research #model .model-figure,
  body.art-research #model .model-figure + .essay-part { width: auto; margin: 0; }
  body.art-research #model .model-figure img { padding: 7px 7px 4px; border-radius: 10px; }
  body.art-research #model .model-figure figcaption { margin-top: 9px; }
  body.art-research #model .model-figure figcaption p { font-size: clamp(12px, 1.5vh, 13.5px); line-height: 1.45; }

  body.art-research #sleep .model-essay { columns: 2; column-gap: clamp(36px, 4vw, 64px); }
  body.art-research #sleep .model-essay > p { orphans: 3; widows: 3; font-size: clamp(15.5px, 2.05vh, 18px); line-height: 1.55; }

  body.art-research #organoids > .project-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); }
  body.art-research #organoids .project-notes article { padding-top: 14px; }
  body.art-research #organoids > .project-meta { font-size: 13px; line-height: 1.6; }

  /* Rhythms: the opening paragraph is the lead; the other two sit side by side below */
  body.art-research #circadian > .page-header { grid-row: 2; }
  body.art-research #circadian > .model-essay { display: contents; }
  body.art-research #circadian > .model-essay > p { margin: 0; }
  body.art-research #circadian > .model-essay > p:nth-child(2) { grid-column: 1; grid-row: 3; margin-top: 22px; }
  body.art-research #circadian > .model-essay > p:nth-child(3) { grid-column: 2 / span 2; grid-row: 3; margin-top: 22px; }
  body.art-research #circadian > .model-essay > p:not(:first-child) { font-size: clamp(15.5px, 2.05vh, 18px); line-height: 1.55; }
}
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:850px) {
  body.art-research :is(#model, #sleep, #organoids, #circadian) .page-header h1 { font-size: 36px; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) .page-header .project-question { font-size: 20px; }
}
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:760px) {
  body.art-research :is(#model, #sleep, #organoids, #circadian) .page-header h1 { font-size: 32px; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) .page-header .project-question { margin-top: 6px; font-size: 18px; }
  body.art-research :is(#model, #sleep) .model-essay > p,
  body.art-research :is(#model, #sleep) .model-essay > .essay-part > p { font-size: 14px; line-height: 1.48; }
  body.art-research #model .model-figure figcaption p { font-size: 12px; line-height: 1.4; }
  body.art-research :is(#model, #sleep) > .model-essay { margin-top: 8px; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) { padding-bottom: 4px; }
  body.art-research :is(#model, #sleep, #organoids, #circadian) > .back-link { min-height: 26px; margin-bottom: 2px; }
}

/* Research: the Perspective reads on the left, and the four projects sit beside it as a 2×2
   that stays in view while the text scrolls. Hovering a sentence about a project lights that
   project's circle (photographic.js). Phones and tablets keep text, then projects. */
@media screen and (min-width:1050px) and (min-height:650px) {
  body.art-research #research > .hero-title { width: min(86rem, 100%); }
  body.art-research #research > .research-split {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(48px, 5vw, 84px);
    width: min(86rem, 100%);
  }
  body.art-research #research .research-perspective { flex: 1.65 1 0; width: auto; min-width: 0; }
  body.art-research #research .research-statement { font-size: 17px; line-height: 1.6; }
  body.art-research #research .research-work { flex: 1 1 0; min-width: 0; position: sticky; top: 8px; }
  body.art-research #research .research-work .research-part { margin-bottom: 8px; }
  body.art-research #research .research-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
  body.art-research #research .research-orb { max-width: 210px; }
}
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:850px) {
  body.art-research #research .research-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.art-research #research .research-orb { max-width: 178px; }
  body.art-research #research .research-statement { font-size: 16px; line-height: 1.58; }
}
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:790px) {
  body.art-research #research .research-orb { max-width: 150px; }
  body.art-research #research .research-name { font-size: 15px; }
}
@media screen and (min-width:1050px) and (min-height:650px) and (max-height:740px) {
  body.art-research #research .research-orb { max-width: 136px; }
  body.art-research #research .research-name { font-size: 14px; }
  body.art-research #research .research-orb-disc { padding: 12px 10px; }
}

/* ---------------------------------------------------------------------------
   Impressions: a line under each door, a soft feathered shade where text sits
   on pale paint, and on phones the title moved off the eye.
   ------------------------------------------------------------------------- */
body.art-research .impressions-stage .impression-side {gap:0;}
body.art-research .impression-side .impression-meta {
  display:block;margin-top:-4px;
  font:600 12px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#fff3e4;text-shadow:0 0 2px #1c120cdd,0 1px 3px #1c120ccc,0 0 16px #1c120caa;
  transition:opacity .7s ease;
}
html[dir="rtl"] body.art-research .impression-side .impression-meta {letter-spacing:0;text-transform:none;font-size:13px;}
body.art-research .impression-side:has(.research-name:hover) ~ .impression-side .impression-meta,
body.art-research .impression-side:has(+ .impression-side .research-name:hover) .impression-meta,
body.art-research .impression-side:focus-visible ~ .impression-side .impression-meta,
body.art-research .impression-side:has(+ .impression-side:focus-visible) .impression-meta {opacity:.42;}

body.art-research:has(#impressions:not([hidden])) :is(.site-header, .site-footer)::before {
  content:"";position:absolute;z-index:-1;pointer-events:none;
}
body.art-research:has(#impressions:not([hidden])) .site-header::before {
  inset-inline-start:-60px;top:-40px;width:min(640px,80%);height:calc(100% + 90px);
  background:radial-gradient(ellipse at var(--imp-shade-x,30%) 45%,#140e08b0 0%,#140e0866 42%,transparent 72%);
}
body.art-research:has(#impressions:not([hidden])) .site-footer::before {
  inset-inline-start:-60px;bottom:-30px;width:min(520px,70%);height:calc(100% + 80px);
  background:radial-gradient(ellipse at var(--imp-shade-x,28%) 60%,#140e08b0 0%,#140e0866 42%,transparent 72%);
}
html[dir="rtl"] body.art-research {--imp-shade-x:70%;}
/* The red and green door names read best straight on the pale paint, so no shade
   behind them; the small labels under them carry their own dark outline. */
@media (max-width:700px) {
  /* The eye sits high on a phone, so the title moves to the cheek, just above the doors. */
  body.art-research #impressions .page-header {position:absolute;left:0;right:0;bottom:150px;z-index:4;pointer-events:none;}
}