@font-face{font-family:"Playfair Display";src:url("/assets/fonts/playfair-display.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Prata;src:url("/assets/fonts/prata.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url("/assets/fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Literata;src:url("/assets/fonts/literata.woff2") format("woff2");font-style:normal;font-weight:350 600;font-display:swap}
@font-face{font-family:Literata;src:url("/assets/fonts/literata-black.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap}

@font-face{font-family:Manrope;src:url("/assets/fonts/manrope.woff2") format("woff2");font-style:normal;font-weight:400 600;font-display:swap}

@font-face{font-family:EB Garamond;src:url("/assets/fonts/eb-garamond.woff2") format("woff2");font-style:normal;font-weight:400 600;font-display:swap}

:root {
  /* The grain (23.10): the soft film noise of the dark theme Daniel liked on the home prototype (22.10). */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper:#f1f0ed;
  --beige:#ece8e1;
  --ink:#292824;
  --gold:#7a6138;
  --serif:Literata,Georgia,serif;
  --reading:"EB Garamond",Georgia,serif;
  --sans:Manrope,Arial,sans-serif;
  --ease:cubic-bezier(.22,.75,.22,1);
  --gutter:4.5vw;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

/* No browser scrollbar: the scroll line shows the way. */
html {
  scrollbar-width:none
}

html::-webkit-scrollbar {
  display:none
}

body {
  margin:0
}

body, button, input, textarea, select {
  font-family:var(--sans);
  font-weight:400
}

button, input, textarea, select {
  font-size:inherit;
  color:inherit
}

button, a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

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

button {
  border:0;
  background:none
}

img, video {
  display:block;
  width:100%;
  height:auto
}

figure, p, h1, h2, h3 {
  margin:0
}

h1, h2, h3 {
  font-family:var(--serif);
  font-weight:350;
  letter-spacing:-.065em;
  line-height:1.13
}

h1 {
  font-size:clamp(3.2rem,10vw,12rem)
}

h2 {
  font-size:clamp(2.6rem,6.5vw,8rem)
}

em {
  font-style:normal
}

small {
  font-weight:400
}

main {
  outline:none;
  min-height:100svh
}

::selection {
  background:#c6c0ad;
  color:#191916
}

:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px
}

button:disabled {
  cursor:default
}

a, button {
  touch-action:manipulation
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* After a change of page the focus is on the heading (or the main): a place to start from, not a control. */
main:focus, main h1[tabindex="-1"]:focus {
  outline:none
}

.skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:120;
  background:var(--paper);
  padding:16px
}

.skip:focus {
  top:15px
}

.header {
  height:90px;
  padding:0 var(--gutter);
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:30;
  pointer-events:none;
  transition:color .4s,opacity .4s;
  background:none
}

.header a {
  pointer-events:auto
}

.header nav {
  display:flex;
  gap:30px;
  font-size:15px
}

.header nav a {
  position:relative;
  padding:12px 0
}

.header nav a:after, .header nav .pause-switch:after {
  content:"";
  position:absolute;
  bottom:7px;
  left:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease)
}

.header nav a:hover:after, .header nav a[aria-current]:after, .header nav .pause-switch[aria-pressed=true]:after {
  transform:scaleX(1)
}

/* "Пауза" (WCAG 2.2.2; Daniel, 21.10): one word at the end of the navigation
   stops every clip on the site where it is and is remembered in the browser;
   underlined while the motion is stopped, as the current page's link. */
.header nav .pause-switch {
  position:relative;
  border:0;
  background:none;
  padding:12px 0;
  font:inherit;
  font-size:.8em;
  letter-spacing:.04em;
  color:inherit;
  opacity:.6;
  cursor:pointer;
  pointer-events:auto;
  transition:opacity .3s var(--ease)
}

.header nav .pause-switch:hover, .header nav .pause-switch:focus-visible, .header nav .pause-switch[aria-pressed=true] {
  opacity:1
}

html[data-paused] * {
  animation-play-state:paused !important
}

.header.light {
  color:white;
  text-shadow:0 1px 14px #0005
}

.header.immersed {
  opacity:0;
  pointer-events:none
}

.header.immersed a {
  pointer-events:none
}

.brand {
  display:grid;
  place-items:center;
  width:112px;
  height:54px;
  font-family:var(--serif);
  font-size:30px;
  font-weight:350;
  letter-spacing:-.08em
}

.brand-word, .brand-camera {
  grid-area:1/1;
  transition:opacity .6s var(--ease),transform .75s var(--ease)
}

.brand-camera {
  width:58px;
  opacity:0;
  transform:translateY(9px) scale(.83)
}

.brand-camera svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  width:100%
}

.brand-camera .camera-shell {
  stroke-dasharray:230;
  stroke-dashoffset:230;
  transition:stroke-dashoffset .85s var(--ease)
}

.brand-camera .camera-lens {
  transform-origin:40px 26px;
  transition:transform .85s var(--ease)
}

.brand:hover .brand-word, .brand:focus-visible .brand-word {
  opacity:0;
  transform:translateY(-7px) scale(.96)
}

.brand:hover .brand-camera, .brand:focus-visible .brand-camera {
  opacity:1;
  transform:none
}

.brand:hover .camera-shell, .brand:focus-visible .camera-shell {
  stroke-dashoffset:0
}

.brand:hover .camera-lens {
  transform:rotate(90deg)
}

.header .letter {
  display:inline-block
}

.text-link {
  position:relative;
  display:inline-block;
  padding-bottom:5px;
  font-size:15px;
  line-height:1.6
}

.text-link:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(.17);
  transform-origin:left;
  transition:transform .6s var(--ease)
}

.text-link:hover:after, .text-link:focus-visible:after {
  transform:scaleX(1)
}

.back-link {
  margin-bottom:25px
}

.eyebrow {
  font-size:12px;
  letter-spacing:.06em
}

.photo {
  position:relative;
  overflow:hidden
}

.photo img {
  object-fit:cover;
  transition:transform 1s var(--ease),filter .8s var(--ease)
}

.photo a {
  display:block;
  overflow:hidden
}

.monochrome img {
  filter:grayscale(1) contrast(1.03)
}

.image-invite {
  position:absolute;
  left:20px;
  bottom:20px;
  color:#fff;
  background:#252521a6;
  padding:11px 18px;
  border-radius:30px;
  font-size:15px;
  opacity:0;
  transform:translateY(8px);
  transition:transform .5s var(--ease),opacity .5s;
  pointer-events:none
}

.photo a:hover img, [data-expand]:hover img {
  transform:scale(1.035)
}

.photo a:hover .image-invite, [data-expand]:hover .image-invite, .photo a:focus-visible .image-invite, [data-expand]:focus-visible .image-invite {
  opacity:1;
  transform:none
}

.film {
  position:relative;
  overflow:hidden;
  background:var(--beige)
}

.film video {
  transition:transform 1.1s var(--ease),filter .8s
}

.film:hover video {
  transform:scale(1.025);
  filter:contrast(1.04)
}

.editorial-scene {
  position:relative;
  height:166svh;
  isolation:isolate;
  view-timeline-name:--scene;
  view-timeline-axis:block
}

.scene-2 {
  background:var(--beige)
}

.scene-title {
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:0;
  pointer-events:none;
  padding:60px 2vw
}

.scene-title h1, .scene-title h2 {
  font-size:clamp(3.4rem,9.1vw,12rem);
  line-height:1.15;
  letter-spacing:-.075em
}

.scene-number {
  font-size:11px;
  margin-bottom:15px;
  letter-spacing:.05em
}

.scene-photographs {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none
}

.scene-image {
  position:absolute;
  pointer-events:auto;
  overflow:hidden;
  display:block
}

.scene-image .photo {
  width:100%
}

.scene-image .photo img {
  width:100%;
  height:auto
}

.scene-image.image-1 {
  left:4.5%;
  top:16svh;
  width:24%
}

.scene-image.image-2 {
  right:3.5%;
  top:27svh;
  width:29%
}

.scene-image.image-3 {
  left:32%;
  top:88svh;
  width:27%
}

.scene-2 .image-1 {
  left:6%;
  top:12svh;
  width:30%
}

.scene-2 .image-2 {
  right:5%;
  top:46svh;
  width:24%
}

.scene-2 .image-3 {
  left:36%;
  top:93svh;
  width:25%
}

.scene-3 .image-1 {
  left:5%;
  top:16svh;
  width:25%
}

.scene-3 .image-2 {
  right:4%;
  top:22svh;
  width:31%
}

.scene-3 .image-3 {
  left:31%;
  top:86svh;
  width:28%
}

.story-dock {
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  padding:7px;
  border-radius:50px;
  background:#292824f2;
  color:var(--paper);
  z-index:25;
  gap:3px;
  box-shadow:0 6px 25px #0000000b;
  max-width:96vw
}

.story-dock a {
  white-space:nowrap;
  padding:13px 15px;
  border-radius:30px;
  font-size:12px;
  display:flex;
  gap:10px;
  align-items:center;
  transition:background .4s
}

.story-dock a.active {
  background:#fff2
}

.story-dock [data-story]:not(.active) .dock-label {
  display:none
}

.story-dock .dock-gallery {
  border-left:1px solid #ffffff35;
  border-radius:0;
  padding:4px 15px
}

.story-dock a:hover {
  background:#ffffff1c
}

.gallery-intro {
  padding:120px var(--gutter) 50px
}

.gallery-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  margin-bottom:30px
}

.gallery-selector {
  display:grid;
  grid-template-columns:1fr 45%;
  gap:6vw;
  align-items:start
}

.category-list {
  display:flex;
  flex-direction:column;
  /* Each name takes the pointer over its own text only (decision 18.10). */
  align-items:flex-start;
  padding-bottom:35px
}

.category-choice {
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(2rem,3.8vw,5rem);
  letter-spacing:-.05em;
  line-height:1.12;
  display:flex;
  align-items:start;
  gap:16px;
  padding:9px 0;
  transition:color .4s,transform .5s var(--ease);
  color:#77736c
}

.category-choice small {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0;
  line-height:2.5
}

.category-choice.active, .category-choice:hover {
  color:var(--ink);
  transform:translateX(12px)
}

.category-previews {
  position:sticky;
  top:110px;
  height:calc(100svh - 160px);
  min-height:500px
}

.category-preview {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(22px) scale(.97);
  transition:opacity .65s var(--ease),transform .9s var(--ease),visibility .65s;
  overflow:hidden
}

.category-preview.active {
  opacity:1;
  visibility:visible;
  transform:none
}

.category-preview .photo, .category-preview img {
  height:100%;
  width:100%;
  object-fit:cover
}

.preview-invitation {
  position:absolute;
  bottom:20px;
  left:20px;
  border-radius:50px;
  background:#f1f0edef;
  padding:14px 20px;
  font-size:15px
}

.index-heading, .page-intro {
  padding:150px var(--gutter) 65px
}

.index-heading h1 {
  margin:0 0 30px;
  max-width:92vw;
  font-size:clamp(3rem,8vw,10rem)
}

.index-heading>span, .index-heading>p {
  font-size:14px
}

.index-heading .project-description {
  margin-top:20px;
  max-width:450px;
  line-height:1.8
}

.collection-index {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:65px 22px;
  padding:0 var(--gutter) 65px
}

.collection-card>a {
  position:relative;
  display:block;
  overflow:hidden
}

.collection-card .photo {
  aspect-ratio:3/4
}

.collection-card img {
  height:100%;
  object-fit:cover
}

.collection-label {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:14px;
  padding:17px 0
}

.collection-name {
  font-family:var(--reading);
  font-size:25px;
  line-height:1.05
}

.collection-label>span {
  font-size:10px;
  text-align:right;
  min-width:55px;
  padding-top:6px
}

.session-photos {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6vw 3vw;
  padding:7vw var(--gutter)
}

.session-frame:nth-child(3n/**/+1) {
  grid-column:1/-1;
  width:72%;
  justify-self:center
}

.session-frame.wide {
  grid-column:1/-1;
  width:100%
}

.session-frame .photo img {
  width:100%;
  height:auto
}

.session-dock {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  background:#292824ee;
  color:var(--paper);
  border-radius:50px;
  padding:6px;
  z-index:22;
  box-shadow:0 5px 20px #0001
}

.session-dock a {
  font-size:12px;
  padding:12px 18px;
  white-space:nowrap;
  border-radius:40px
}

.session-dock a:hover {
  background:#fff2
}

.backstage {
  padding:8vw var(--gutter);
  background:var(--beige);
  scroll-margin-top:70px
}

.backstage-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:60px;
  gap:40px
}

.backstage-heading>span {
  font-size:12px;
  max-width:180px;
  padding-top:20px
}

.backstage-films {
  display:flex;
  gap:3vw;
  justify-content:center
}

.backstage-films .film {
  max-width:600px;
  width:47%
}

.backstage-films .film:only-child {
  width:58%;
  max-width:720px
}

.backstage video {
  max-height:110svh;
  object-fit:contain
}

.next-collection {
  padding:8vw var(--gutter);
  text-align:center
}

.next-collection>span {
  display:block;
  font-size:12px;
  margin-bottom:22px
}

.next-title {
  display:block;
  font-family:var(--serif);
  font-size:clamp(2.5rem,6vw,7rem);
  font-weight:350;
  letter-spacing:-.06em;
  line-height:1.2
}

.next-title:hover {
  color:var(--gold)
}

.socials {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:24px
}

.socials a, .socials button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:8px
}

.socials svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  width:28px;
  height:28px;
  transition:transform .85s var(--ease)
}

.socials a:hover svg, .socials button:hover svg, .socials a:focus-visible svg {
  transform:rotate(360deg)
}

/* The question in "Въпроси преди сесията": the reading face, heavier (EB Garamond has no italic here). */

.in-action {
  height:100svh;
  position:relative;
  overflow:hidden;
  background:#171715
}

.action-film {
  height:100%;
  width:100%;
  background:#171715
}

.action-film video {
  height:100%;
  width:100%;
  object-fit:cover
}

.action-copy {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:6vw;
  color:white;
  background:linear-gradient(transparent 60%,#0007);
  transition:opacity 1s
}

.action-copy h2 {
  font-size:clamp(4rem,12vw,15rem)
}

.action-copy p {
  font-size:19px;
  margin-top:15px
}

.in-action.is-immersed .action-copy {
  opacity:0
}

.video-gallery {
  padding:0 var(--gutter) 80px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:35px
}

.video-gallery .film {
  align-self:start
}

.related-link {
  margin:0 var(--gutter) 70px
}

.page-intro h1 {
  font-size:clamp(3rem,7vw,9rem);
  margin-bottom:30px
}

.page-intro>p {
  max-width:600px;
  line-height:1.7
}

.category-jumps {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin-top:30px
}

.contact-portrait {
  position:relative;
  height:max(190svh,150vw);
  isolation:isolate;
  color:#fff;
  view-timeline-name:--contact-scene;
  view-timeline-axis:block;
  background:#005b43;
  overflow:clip
}

.portrait-colour {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(105deg,#003523 0%,#007c54 48%,#00ae80 100%)
}

.contact-source {
  height:100%;
  width:100%;
  mix-blend-mode:luminosity;
  opacity:.9
}

.contact-source img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 25%;
  filter:grayscale(1) contrast(1.22) brightness(.8);
  transition:none
}

.portrait-colour:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,#002818b3,transparent 58%,#00a57a33);
  mix-blend-mode:multiply;
  pointer-events:none
}

.contact-opening {
  position:absolute;
  top:18svh;
  left:var(--gutter);
  width:47%;
  z-index:1
}

.contact-opening>span {
  font-size:12px
}

.contact-opening h1 {
  font-size:clamp(4.6rem,10.3vw,14rem);
  letter-spacing:-.065em;
  margin:23px 0 25px;
  line-height:1.05
}

.contact-opening>p {
  font-family:var(--reading);
  font-size:clamp(1.5rem,2.6vw,3.3rem)
}

.scroll-invitation {
  position:absolute;
  top:81svh;
  left:var(--gutter);
  display:flex;
  flex-direction:column;
  gap:9px;
  padding-right:55px
}

.scroll-word {
  font-family:var(--reading);
  font-size:30px
}

.scroll-instruction {
  font-size:15px
}

.scroll-pulse {
  position:absolute;
  right:0;
  top:15px;
  border:1px solid #ffffff80;
  width:28px;
  height:40px;
  border-radius:30px
}

.scroll-pulse:after {
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  background:currentColor;
  top:9px;
  left:11px;
  border-radius:50%;
  animation:scroll-dot 2.2s infinite var(--ease)
}

@keyframes scroll-dot{0%,100%{transform:translateY(0);opacity:.3}65%{transform:translateY(15px);opacity:1}}

.portrait-last {
  position:absolute;
  right:var(--gutter);
  bottom:12%;
  max-width:53%;
  font-family:var(--reading);
  font-size:clamp(2.5rem,5.6vw,7rem);
  line-height:1.08;
  letter-spacing:-.035em
}

.inquiry-section {
  padding:130px var(--gutter) 100px;
  background:var(--beige);
  display:grid;
  grid-template-columns:43% 48%;
  gap:9%;
  scroll-margin-top:80px
}

.inquiry-intro>span {
  font-size:12px
}

.inquiry-intro h2 {
  font-size:clamp(2.8rem,5.3vw,6.7rem);
  margin:25px 0 40px
}

.inquiry-intro>p {
  font-family:var(--reading);
  font-size:25px;
  line-height:1.4;
  max-width:410px
}

form label {
  display:block;
  font-size:15px;
  margin-bottom:28px
}

form small {
  margin-left:8px;
  font-size:12px;
  color:#69665e
}

/* "How to reply": a pair of radios on one row (review 19.10, 9.4). */
.form-reply {
  border:0;
  padding:0;
  margin:0 0 28px;
  min-width:0
}

.form-reply legend {
  padding:0;
  font-size:15px;
  margin-bottom:14px
}

.form-reply label {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 28px 0 0;
  font-size:15px
}

.form-reply input[type="radio"] {
  display:inline-block;
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  border:0;
  accent-color:var(--ink)
}

input, select, textarea {
  display:block;
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid #a19b8e;
  border-radius:0;
  padding:15px 0;
  font-size:18px;
  line-height:1.6;
  outline-offset:5px;
  box-shadow:none
}

input::placeholder, textarea::placeholder {
  color:#716d65
}

textarea {
  resize:vertical
}

.form-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}

.form-note {
  font-size:14px;
  line-height:1.7;
  max-width:500px;
  margin:30px 0;
  color:#69665e
}

.form-submit {
  background:var(--ink);
  color:var(--paper);
  padding:19px 28px;
  border-radius:50px;
  font-size:15px;
  transition:background .4s,transform .4s var(--ease)
}

.form-submit:hover {
  background:#4a463e;
  transform:translateY(-2px)
}

.form-status {
  font-size:15px;
  line-height:1.7;
  margin-top:25px
}

/* A field that needs attention (review 19.10, 9.6): the message sits under
   the field, in words, and the line under the field thickens; the message
   leaves the moment the input becomes valid. */
.field-error {
  display:block;
  font-size:14px;
  line-height:1.5;
  margin-top:8px;
  color:var(--ink)
}

form [aria-invalid="true"] {
  border-bottom-width:2px;
  border-bottom-color:var(--ink)
}

/* The line above the form that says which project or category the visitor
   came from (review 19.10, 10.3); "Махни" takes it away. */
.form-source {
  font-size:14px;
  line-height:1.6;
  margin:0 0 28px
}

.form-source button {
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px
}

.contact-details {
  background:var(--beige);
  padding:50px var(--gutter) 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px
}

.direct-contact>a {
  display:block;
  /* The box, and the line it carries, end with the text (review 02:23). */
  width:fit-content;
  max-width:100%;
  font-family:var(--reading);
  font-size:clamp(2rem,4vw,4.5rem)
}

.direct-contact>a.email {
  font-family:var(--sans);
  font-size:clamp(14px,1.5vw,19px);
  margin-top:20px;
  overflow-wrap:anywhere
}

.studio-address {
  font-family:var(--reading);
  font-size:clamp(1.7rem,2.9vw,3rem);
  line-height:1.3
}

.studio-address a>span:last-child {
  display:block;
  font-family:var(--sans);
  font-size:13px;
  margin-top:20px;
  text-decoration:underline;
  text-underline-offset:5px
}

.studio-address>p {
  font-family:var(--sans);
  font-size:12px;
  margin-top:25px
}

.legal-links {
  display:flex;
  gap:25px;
  font-size:12px;
  grid-column:1/-1;
  justify-content:center;
  padding-top:40px
}

.policy {
  padding:160px var(--gutter);
  max-width:1100px
}

.policy h1 {
  font-size:clamp(3rem,6vw,7rem);
  margin:30px 0
}

.policy>p {
  line-height:1.9;
  margin-bottom:35px
}

.route-curtain {
  position:fixed;
  inset:0;
  background:var(--paper);
  z-index:40;
  pointer-events:none;
  transform:translateY(100%)
}

.type-letter {
  display:inline-block;
  white-space:pre
}

.toast {
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translate(-50%,15px);
  background:var(--ink);
  color:var(--paper);
  padding:16px 24px;
  border-radius:8px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  max-width:90vw;
  font-size:13px;
  transition:opacity .3s,transform .3s
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

@supports (animation-timeline:view()) {
html:not([data-motion="reduce"]) .scene-image {
  animation:image-drift linear both;
  animation-timeline:--scene;
  animation-range:entry 0% exit 100%
}

html:not([data-motion="reduce"]) .scene-image.image-2 {
  animation-name:image-drift-reverse
}

html:not([data-motion="reduce"]) .contact-opening {
  animation:contact-type-travel linear both;
  animation-timeline:--contact-scene;
  animation-range:entry 100% exit 100%
}

html:not([data-motion="reduce"]) .contact-source {
  animation:portrait-travel linear both;
  animation-timeline:--contact-scene;
  animation-range:entry 100% exit 100%
}
}

@keyframes image-drift{from{transform:translateY(55px)}to{transform:translateY(-55px)}}

@keyframes image-drift-reverse{from{transform:translateY(-35px)}to{transform:translateY(55px)}}

@keyframes contact-type-travel{from{transform:translateY(0)}to{transform:translateY(20svh)}}

@keyframes portrait-travel{from{transform:translateY(0) scale(1.03)}to{transform:translateY(4svh) scale(1.03)}}

@media (min-width:1700px) {
.editorial-scene {
  height:190svh
}

.scene-image.image-3 {
  top:99svh
}

.contact-opening {
  width:45%
}
}

@media (max-width:1000px) {
.header {
  height:80px
}

.gallery-selector {
  gap:4vw;
  grid-template-columns:1fr 46%
}

.category-previews {
  min-height:440px
}

.collection-index {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.inquiry-section {
  gap:5%;
  grid-template-columns:42% 53%
}

.scene-title h1, .scene-title h2 {
  font-size:10vw
}

.video-gallery {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
}

@media (max-width:700px) {
:root {
  --gutter:6vw
}

.header {
  height:76px
}

.brand {
  font-size:27px;
  width:96px;
  justify-items:start
}

.brand-camera {
  margin-left:15px
}

.header nav {
  gap:18px;
  font-size:13px
}

.header nav a {
  padding:14px 0
}

.editorial-scene {
  height:145svh
}

.scene-title {
  height:100svh;
  padding:0 3vw;
  justify-content:center
}

.scene-title h1, .scene-title h2 {
  font-size:13.2vw;
  line-height:1.12;
  max-width:90vw
}

.scene-number {
  font-size:10px;
  max-width:120px;
  line-height:1.5
}

.scene-image.image-1 {
  width:42%;
  left:5%;
  top:14svh
}

.scene-image.image-2 {
  width:49%;
  right:3%;
  top:58svh
}

.scene-image.image-3 {
  width:43%;
  left:6%;
  top:94svh
}

.scene-2 .image-1 {
  left:4%;
  top:14svh;
  width:43%
}

.scene-2 .image-2 {
  right:3%;
  top:59svh;
  width:46%
}

.scene-2 .image-3 {
  left:7%;
  top:95svh;
  width:40%
}

.scene-3 .image-1 {
  left:4%;
  top:14svh;
  width:45%
}

.scene-3 .image-2 {
  right:3%;
  top:59svh;
  width:48%
}

.scene-3 .image-3 {
  left:5%;
  top:95svh;
  width:43%
}

.story-dock {
  bottom:18px;
  padding:5px
}

.story-dock a {
  font-size:11px;
  padding:12px 10px;
  gap:6px
}

.story-dock .dock-gallery {
  font-size:10px;
  padding:4px 10px
}

.dock-label {
  max-width:105px;
  overflow:hidden;
  text-overflow:ellipsis
}

.image-invite {
  display:none
}

.gallery-intro {
  padding-top:100px;
  padding-bottom:15px
}

.gallery-label {
  font-size:11px;
  margin-bottom:20px
}

.gallery-selector {
  display:flex;
  flex-direction:column;
  gap:20px
}

.category-list {
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px 18px;
  padding:0
}

.category-choice {
  font-size:22px;
  gap:5px;
  padding:3px 0;
  line-height:1.4
}

.category-choice small {
  font-size:11px
}

.category-choice.active, .category-choice:hover {
  transform:none
}

.category-choice.active {
  box-shadow:0 1px var(--ink)
}

.category-previews {
  position:relative;
  width:100%;
  height:65svh;
  min-height:430px;
  top:0
}

.preview-invitation {
  left:15px;
  bottom:15px;
  font-size:14px
}

.index-heading, .page-intro {
  padding:115px var(--gutter) 40px
}

.index-heading h1 {
  font-size:14vw
}

.collection-index {
  gap:35px 14px;
  padding-bottom:40px
}

.collection-label {
  flex-direction:column;
  gap:6px;
  padding-top:12px
}

.collection-name {
  font-size:22px
}

.collection-label>span {
  font-size:9px;
  text-align:left;
  padding:0
}

.collection-card .photo {
  aspect-ratio:2/3
}

.session-photos {
  gap:24px 12px;
  padding:35px 4vw
}

.session-frame:nth-child(3n/**/+1) {
  width:100%
}

.session-dock {
  bottom:15px
}

.backstage {
  padding:60px 6vw
}

.backstage-heading {
  display:block;
  margin-bottom:30px
}

.backstage-heading>span {
  display:block;
  max-width:none;
  padding:0;
  margin-bottom:20px
}

.backstage-heading h2 {
  font-size:15vw
}

.backstage-films {
  flex-direction:column;
  gap:25px
}

.backstage-films .film, .backstage-films .film:only-child {
  width:100%;
  max-width:none
}

.next-collection {
  padding:60px 6vw
}

.next-title {
  font-size:10vw
}

.socials {
  margin-top:15px;
  gap:15px
}

.action-copy {
  padding:8vw 6vw 13vw
}

.action-copy h2 {
  font-size:21vw
}

.action-copy p {
  font-size:17px;
  max-width:240px
}

.video-gallery {
  gap:15px;
  padding:0 4vw 50px
}

.video-gallery .film:only-child {
  grid-column:1/-1
}

.page-intro h1 {
  font-size:13vw
}

.category-jumps {
  gap:15px
}

.contact-portrait {
  height:177svh
}

.contact-source img {
  object-position:56% 20%;
  object-fit:cover
}

.contact-source {
  opacity:.85
}

.contact-opening {
  left:6vw;
  top:19svh;
  width:88%;
  text-shadow:0 1px 20px #00261866
}

.contact-opening>span {
  font-size:11px
}

.contact-opening h1 {
  font-size:18vw;
  max-width:78%;
  margin:17px 0 20px
}

.contact-opening>p {
  font-size:26px
}

.scroll-invitation {
  left:6vw;
  top:81svh
}

.scroll-word {
  font-size:27px
}

.scroll-instruction {
  font-size:14px
}

.portrait-last {
  left:6vw;
  right:6vw;
  bottom:10%;
  max-width:none;
  font-size:11vw
}

.inquiry-section {
  padding:70px 6vw 50px;
  display:block
}

.inquiry-intro {
  margin-bottom:50px
}

.inquiry-intro h2 {
  font-size:14vw;
  margin:20px 0 25px
}

.inquiry-intro>p {
  font-size:24px
}

.inquiry-intro>span {
  font-size:11px
}

.form-pair {
  grid-template-columns:1fr;
  gap:0
}

input, select, textarea {
  font-size:17px
}

.contact-details {
  display:flex;
  flex-direction:column;
  padding:25px 6vw 40px;
  gap:45px
}

.direct-contact>a {
  font-size:39px
}

.direct-contact>a.email {
  font-size:14px
}

.studio-address {
  font-size:30px
}

.legal-links {
  padding-top:0;
  gap:18px;
  font-size:10px;
  justify-content:flex-start
}

.policy {
  padding:120px 6vw 70px
}
}

.type-word {
  display:inline-block;
  white-space:nowrap
}

.header .light {
  color:white;
  text-shadow:0 1px 12px #0008
}

.scene-title h1, .scene-title h2 {
  line-height:1.04
}

.scene-2 .scene-title h2 {
  font-size:8vw
}

@media (max-width:700px) {
.scene-title h1, .scene-title h2, .scene-2 .scene-title h2 {
  font-size:14vw;
  line-height:1.06
}

.scene-number {
  margin-bottom:12px
}

.contact-opening {
  top:12svh
}

.contact-opening h1 {
  font-size:15.7vw;
  max-width:100%;
  line-height:1.06
}

.contact-source img {
  object-position:77% 20%
}

.contact-opening>p {
  font-size:24px
}
}

@media (prefers-reduced-motion:reduce) {
html:not([data-motion="full"]) *, html:not([data-motion="full"]) *:before, html:not([data-motion="full"]) *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
}

html[data-motion="reduce"] *, html[data-motion="reduce"] *:before, html[data-motion="reduce"] *:after {
  animation:none!important;
  transition:none!important
}

/* Without transitions a hover zoom would be a jump, so photographs keep still. */
html[data-motion="reduce"] .photo a:hover img, html[data-motion="reduce"] [data-expand]:hover img, html[data-motion="reduce"] .field-image:is(:hover,:focus-visible) .photo img, html[data-motion="reduce"] .film:hover video, html[data-motion="reduce"] .film-open:hover video {
  transform:none
}

.brand {
  width:auto;
  height:auto;
  letter-spacing:normal
}

.brand-word {
  width:auto;
  display:block;
  line-height:1
}

/* The logo written "byartph" (Daniel, 23.10, night, a trial). Pointed at, it wipes out to the right and writes
   itself in again from the left (almirakho.com, measured: out 0.21 s, a pause, in 0.2 s). */
.brand-text {
  display:inline-block;
  font:600 19px/1 var(--sans);
  letter-spacing:-.005em;
  clip-path:inset(-.3em 0 -.3em 0)
}

.brand:hover .brand-text, .brand:focus-visible .brand-text {
  animation:brand-wipe .52s both
}

@keyframes brand-wipe {
  0% { clip-path:inset(-.3em 0 -.3em 0); animation-timing-function:cubic-bezier(.7,0,.84,0) }
  42% { clip-path:inset(-.3em 0 -.3em 100%) }
  42.1% { clip-path:inset(-.3em 100% -.3em 0) }
  61% { clip-path:inset(-.3em 100% -.3em 0); animation-timing-function:cubic-bezier(.16,1,.3,1) }
  100% { clip-path:inset(-.3em 0 -.3em 0) }
}

html[data-motion="reduce"] .brand-text {
  animation:none!important
}

@media (max-width:700px) {
.brand-text {
  font-size:17px
}

.brand-camera {
  width:48px;
  margin-left:15px
}

}

.photographic-home {
  background:var(--paper)
}

.photo-field {
  padding:130px var(--gutter) 80px
}

.field-title {
  text-align:center;
  margin-bottom:45px
}

.field-title h2 {
  font-size:clamp(4rem,10.5vw,12rem);
  line-height:1.02
}

.field-title>span {
  font-size:12px;
  display:block;
  margin-top:18px
}

.field-images {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}

.field-image {
  position:relative;
  display:block;
  overflow:hidden
}

.field-image .photo, .field-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.field-image-cue {
  position:absolute;
  inset:auto 0 20px;
  text-align:center;
  color:#fff;
  font-size:15px;
  opacity:0;
  transform:translateY(7px);
  text-shadow:0 1px 12px #000;
  transition:opacity .5s,transform .65s var(--ease);
  pointer-events:none
}

.field-image:after {
  content:"";
  position:absolute;
  inset:0;
  border:10px solid #f1f0ed00;
  transition:border-color .7s var(--ease);
  pointer-events:none
}

.field-image:hover:after, .field-image:focus-visible:after {
  border-color:#f1f0ed26
}

.field-image:hover .field-image-cue, .field-image:focus-visible .field-image-cue {
  opacity:1;
  transform:none
}

.field-image .photo img {
  transition:transform 1.2s var(--ease)
}

.field-image:hover .photo img, .field-image:focus-visible .photo img {
  transform:scale(1.045)
}

.field-dock, .field-scroll-cue {
  display:none
}

html.home-field-mode {
  overflow:hidden
}

.home-field-mode body {
  overflow:hidden;
  overscroll-behavior:none
}

.home-field-mode main {
  height:100dvh;
  min-height:0;
  overflow:hidden
}

.home-field-mode .photographic-home {
  position:fixed;
  inset:0;
  overflow:hidden;
  isolation:isolate
}

.home-field-mode .photo-field {
  position:absolute;
  inset:0;
  padding:0;
  overflow:hidden
}

.home-field-mode .photo-field[hidden] {
  display:none
}

.home-field-mode .field-title {
  position:absolute;
  inset:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  pointer-events:none;
  z-index:0;
  text-align:center
}

.home-field-mode .field-title h2 {
  font-size:clamp(4.5rem,10.5vw,15rem);
  font-weight:350;
  letter-spacing:-.065em;
  line-height:1.04
}

.home-field-mode .field-title>span {
  align-self:center;
  margin:0 0 10vw;
  font-size:12px;
  letter-spacing:-.03em
}

.field-type-line {
  display:inline-block;
  overflow:hidden;
  /* The mask clips above and below the line only: the first letter travels
     sideways to the middle of the screen and back (transitions spec, 1, 5). */
  padding:.13em 50vw .2em;
  margin:-.13em -50vw -.2em;
  vertical-align:top;
  white-space:nowrap
}

.field-type-letter {
  display:inline-block;
  white-space:pre
}

.home-field-mode .field-images {
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
  z-index:1
}

.home-field-mode .field-image {
  position:absolute;
  left:0;
  top:0;
  pointer-events:auto;
  contain:layout style;
  touch-action:none
}

.home-field-mode .field-dock {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:32;
  display:flex;
  align-items:center;
  gap:6px;
  background:#292824f5;
  color:#f1f0ed;
  border-radius:40px;
  padding:6px;
  box-shadow:0 6px 35px #0000000a
}

.field-menu-toggle {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:15px;
  padding:0 12px 0 0;
  white-space:nowrap;
  border-radius:40px
}

.field-menu-toggle>img {
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(1)
}

.field-menu-icon {
  width:27px;
  height:27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:#ffffff12;
  margin-left:5px
}

.field-menu-icon i {
  display:block;
  position:absolute;
  width:9px;
  height:1px;
  background:currentColor;
  transition:transform .55s var(--ease)
}

.field-menu-icon i:last-child {
  transform:rotate(90deg)
}

.field-menu-toggle[aria-expanded=true] .field-menu-icon i {
  transform:rotate(180deg)
}

.field-menu-toggle[aria-expanded=true] .field-menu-icon i:last-child {
  transform:rotate(180deg)
}

.field-all {
  white-space:nowrap;
  font-size:12px;
  padding:13px 18px;
  background:#ffffff0f;
  border-radius:30px;
  transition:background .4s
}

.field-all:hover, .field-all:focus-visible {
  background:#ffffff23
}

.field-menu {
  position:absolute;
  bottom:64px;
  left:0;
  right:0;
  min-width:310px;
  padding:17px 14px 10px;
  background:#292824;
  color:var(--paper);
  border-radius:18px;
  transform-origin:center bottom;
  box-shadow:0 15px 40px #0002
}

.field-menu[hidden] {
  display:none
}

.field-menu>p {
  font-size:11px;
  opacity:.65;
  padding:4px 8px 15px
}

.field-menu>button {
  width:100%;
  display:flex;
  align-items:center;
  gap:15px;
  text-align:left;
  padding:10px 8px;
  border-radius:10px;
  font-size:15px;
  transition:background .4s
}

.field-menu>button:hover, .field-menu>button[aria-pressed=true] {
  background:#ffffff10
}

.field-menu>button>img {
  width:40px;
  height:48px;
  object-fit:cover;
  filter:grayscale(1)
}

.field-menu>button>small {
  margin-left:auto;
  font-size:11px;
  opacity:.65
}

.home-field-mode .field-scroll-cue {
  display:flex;
  position:fixed;
  left:var(--gutter);
  bottom:38px;
  align-items:center;
  gap:14px;
  font-size:11px;
  z-index:3;
  pointer-events:none;
  transition:opacity .7s
}

.field-scroll-cue>span {
  width:1px;
  height:25px;
  background:currentColor;
  opacity:.45;
  transform-origin:top;
  animation:field-cue 2.3s var(--ease) 3
}

.field-has-moved .field-scroll-cue {
  opacity:0
}

@keyframes field-cue{0%,100%{transform:scaleY(.3)}60%{transform:scaleY(1)}}

.home-field-mode .header .brand.light, .home-field-mode .header nav.light {
  color:#fff;
  text-shadow:0 1px 10px #0005
}

.home-entrance .header, .home-entrance .field-dock, .home-entrance .field-scroll-cue {
  opacity:0;
  pointer-events:none
}

.home-entrance .header a {
  pointer-events:none
}

.home-loader {
  position:fixed;
  inset:0;
  z-index:80;
  overflow:hidden;
  background:#1b1b19;
  color:#f1f0ed;
  isolation:isolate
}

.loader-photographs {
  position:absolute;
  inset:0
}

.loader-frame {
  position:absolute;
  inset:0;
  clip-path:polygon(26% 100%,74% 100%,74% 100%,26% 100%);
  overflow:hidden;
  background:#1b1b19
}

.loader-frame .photo, .loader-frame img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:var(--focus)
}

.loader-frame .photo {
  transform:translateY(35%)
}

.loader-frame:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 40%,#0003);
  pointer-events:none
}

.loader-word {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(7rem,22vw,30rem);
  letter-spacing:-.085em;
  line-height:1.2;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  transform:translateY(110%)
}

.loader-word>span {
  display:inline-block
}

.loader-bottom {
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:35px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  z-index:5
}

.loader-label {
  font-size:13px;
  line-height:1.5
}

.loader-progress {
  font-size:clamp(4rem,7vw,8rem);
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-.07em;
  min-width:1.5em;
  text-align:right
}

.loader-skip {
  position:absolute;
  right:var(--gutter);
  top:32px;
  font-size:12px;
  padding:12px;
  z-index:5
}

.loader-skip:hover {
  text-decoration:underline;
  text-underline-offset:6px
}

@media (max-width:700px) {
.field-images {
  grid-template-columns:repeat(2,1fr)
}

.home-field-mode .field-title h2 {
  font-size:17vw;
  letter-spacing:-.07em
}

.home-field-mode .field-title {
  gap:8px
}

.home-field-mode .field-title>span {
  font-size:11px;
  margin-bottom:22vw
}

.home-field-mode .field-dock {
  bottom:max(18px,env(safe-area-inset-bottom));
  width:max-content;
  max-width:94vw;
  gap:1px
}

.field-menu-toggle {
  font-size:14px;
  gap:8px;
  padding-right:5px
}

.field-menu-toggle>img {
  width:34px;
  height:34px
}

.field-menu-icon {
  width:23px;
  height:23px;
  margin:0
}

.field-all {
  font-size:10px;
  padding:12px
}

.field-menu {
  min-width:0
}

.home-field-mode .field-scroll-cue {
  bottom:90px;
  font-size:10px
}

.loader-word {
  font-size:26vw;
  line-height:1.35
}

.loader-label {
  font-size:11px
}

.loader-bottom {
  bottom:32px
}

.loader-progress {
  font-size:60px
}

.loader-frame img {
  object-position:50% 40%
}
}

@media (prefers-reduced-motion:reduce) {
html:not([data-motion=full]) .field-scroll-cue>span {
  animation:none
}
}

html[data-motion=reduce] .field-image img, html[data-motion=reduce] .field-menu-icon i {
  transition:none
}

.brand-word {
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
  transform-origin:50% 50%
}

.brand:hover .brand-word, .brand:focus-visible .brand-word {
  opacity:1
}

.home-loader .loader-photographs {
  z-index:2
}

.home-loader .loader-word {
  z-index:1
}

.header nav {
  gap:clamp(18px,2.2vw,34px)
}

.header .letter, .legal-links .letter {
  white-space:pre
}

.header>.brand, .header>nav {
  transition:opacity .18s ease,transform .4s var(--ease),color .4s,visibility 0s
}

.header>.copy-overlap {
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s ease,transform .4s var(--ease),visibility 0s .18s
}

.header>.copy-overlap a {
  pointer-events:none
}

.collection-index {
  gap:24px 20px
}

.collection-card>a {
  height:100%
}

.collection-label {
  display:none
}

.session-photos {
  gap:30px 2.5vw;
  padding:35px 3vw 45px;
  align-items:center
}

.session-frame, .session-frame:nth-child(3n/**/+1) {
  grid-column:auto;
  width:100%;
  height:76svh;
  min-height:400px;
  justify-self:stretch
}

.session-frame.wide, .session-frame.wide:nth-child(3n/**/+1) {
  grid-column:1/-1;
  width:100%;
  height:80svh
}

.session-frame .photo, .session-frame .photo a {
  height:100%;
  width:100%
}

.session-frame .photo img {
  width:100%;
  height:100%;
  object-fit:contain
}

.session-dock {
  transition:opacity .4s,transform .5s var(--ease)
}

.session-dock.over-film {
  opacity:0;
  transform:translate(-50%,25px);
  pointer-events:none
}

.backstage-scene {
  position:relative;
  height:185svh;
  background:#171715;
  color:#fff;
  isolation:isolate;
  view-timeline:--backstage block
}

.backstage-screen {
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden
}

.backstage-screen:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:34svh;
  background:linear-gradient(#0009,#0005 55%,transparent);
  pointer-events:none
}

.backstage-still {
  flex:1 1 0;
  min-width:0;
  height:100%
}

.backstage-still>a, .backstage-still img {
  height:100%;
  width:100%;
  object-fit:cover
}

.backstage-next {
  position:absolute;
  top:104svh;
  height:76svh;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:5vw;
  color:#fff;
  background:linear-gradient(transparent,#0008 25%,#0009 75%,transparent);
  pointer-events:none
}

.backstage-next>span {
  font-size:14px;
  margin-bottom:20px;
  text-shadow:0 1px 12px #0006
}

.backstage-next a {
  pointer-events:auto;
  text-shadow:0 2px 25px #0006
}

.backstage-next a:hover {
  color:#fff
}

.backstage-next .next-title {
  font-size:clamp(3rem,6.5vw,8rem);
  max-width:90vw
}

.next-title .type-letter {
  transition:transform .65s var(--ease)
}

.next-title:hover .type-letter:nth-child(2n) {
  transform:translateY(-.035em)
}

.next-title:hover .type-letter:nth-child(2n/**/+1) {
  transform:translateY(.035em)
}

.film-open {
  display:block;
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
  cursor:zoom-in
}

.film-invite {
  position:absolute;
  right:24px;
  bottom:25px;
  color:#fff;
  background:#1119;
  padding:12px 18px;
  font-size:15px;
  border-radius:30px;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .4s,transform .6s var(--ease);
  pointer-events:none
}

.film-open:hover .film-invite, .film-open:focus-visible .film-invite {
  opacity:1;
  transform:none
}

.film {
  background:#181816
}

.film:hover video {
  filter:none;
  transform:scale(1.025)
}

.business-films {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3vw;
  padding:0 3vw 60px;
  align-items:start
}

.business-films .film {
  height:auto;
  min-height:0
}

.business-films .film-open, .business-films .film video {
  height:auto
}

.business-films .film:nth-child(2n) {
  margin-top:15svh
}

.business-films .film:only-child {
  grid-column:1/-1;
  width:min(100%,900px);
  justify-self:center
}

.in-action.action-continuation {
  height:185svh;
  overflow:visible;
  view-timeline:--action-continuation block;
  isolation:isolate
}

.action-screen {
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden
}

.action-invitation {
  position:absolute;
  top:106svh;
  height:72svh;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vw;
  text-align:center;
  background:linear-gradient(transparent,#0009 30%,#0009 70%,transparent);
  color:white;
  gap:28px
}

.action-invitation>a:first-child {
  font-family:var(--serif);
  font-size:clamp(3rem,7vw,9rem);
  font-weight:350;
  letter-spacing:-.05em;
  line-height:1.15
}

.action-invitation>span {
  font-family:var(--reading);
  font-size:clamp(1.5rem,2.5vw,3rem)
}

.action-invitation .text-link {
  font-size:15px
}

.contact-world {
  position:relative;
  color:#fff;
  background:#004c37;
  isolation:isolate;
  view-timeline:--contact-world block
}

.contact-background {
  height:100svh;
  position:sticky;
  top:0;
  margin-bottom:-100svh;
  overflow:hidden;
  z-index:-1;
  pointer-events:none
}

.contact-background .portrait-colour {
  height:max(190svh,150vw);
  bottom:auto;
  overflow:hidden
}

.contact-background .contact-source {
  height:100%;
  animation:none!important
}

.contact-background .portrait-colour:after {
  background:linear-gradient(100deg,#002517b3,transparent 65%,#007e5d33)
}

.contact-world .contact-portrait {
  height:155svh;
  background:transparent;
  overflow:visible;
  isolation:auto
}

.contact-world .portrait-last {
  bottom:11%;
  font-size:clamp(2.5rem,5vw,6.5rem)
}

.contact-world .contact-opening {
  animation:none
}

.contact-world .contact-opening {
  top:max(105px,14svh)
}

.contact-world .inquiry-section {
  background:linear-gradient(#00291a00,#00291ae0 14%,#00291ae0);
  position:relative;
  padding-top:150px;
  padding-bottom:75px;
  scroll-margin-top:0
}

.contact-world .contact-details {
  background:#00291ae0;
  position:relative;
  padding-top:50px;
  padding-bottom:55px
}

.contact-world form small, .contact-world .form-note {
  color:#e1eee7
}

.contact-world .field-error {
  color:#fff
}

.contact-world form [aria-invalid="true"] {
  border-bottom-color:#fff
}

.contact-world input, .contact-world select, .contact-world textarea {
  color:#fff;
  border-color:#cfe6d9bf;
  caret-color:#fff
}

.contact-world .form-reply input[type="radio"] {
  accent-color:#fff
}

.contact-world input::placeholder, .contact-world textarea::placeholder {
  color:#d7e7df
}

.contact-world select option {
  background:#004733;
  color:#fff
}

.contact-world .form-submit {
  background:#f1f0ed;
  color:#173b2b
}

.contact-world .form-submit:hover {
  background:#fff
}

.contact-world .inquiry-intro>p {
  font-size:clamp(1.4rem,1.85vw,1.85rem)
}

/* Legal links: a line born in the middle of the word, the letters opening a
   little (contact hover spec, 4). No letter wave: that is the navigation's. */
.legal-links a {
  position:relative;
  display:inline-block;
  padding:8px 0;
  font-size:13px;
  transition:letter-spacing .35s var(--ease)
}

.legal-links a:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:50% 50%;
  transition:transform .35s var(--ease)
}

.legal-links a:hover, .legal-links a:focus-visible {
  letter-spacing:.03em;
  transition-duration:.45s
}

.legal-links a:hover:after, .legal-links a:focus-visible:after {
  transform:scaleX(1);
  transition-duration:.45s
}

html[data-motion="reduce"] .legal-links a:hover, html[data-motion="reduce"] .legal-links a:focus-visible {
  letter-spacing:0
}

@supports (animation-timeline:view()) {
html:not([data-motion="reduce"]) .contact-background .portrait-colour {
  animation:continuous-portrait linear both;
  animation-timeline:--contact-world;
  animation-range:entry 100% exit 100%
}

html:not([data-motion="reduce"]) .action-continuation .action-copy {
  animation:backstage-name-away linear both;
  animation-timeline:--action-continuation;
  animation-range:entry 100% exit 0%
}
}

@keyframes continuous-portrait{from{transform:translateY(0)}to{transform:translateY(calc(100svh - 100%))}}

@keyframes backstage-name-away{0%,30%{opacity:1;transform:translateY(0)}75%,100%{opacity:0;transform:translateY(-35px)}}

@media (min-width:1700px) {
.contact-world .contact-portrait {
  height:170svh
}
}

@media (max-width:700px) {
.header {
  padding-left:5vw;
  padding-right:5vw
}

.header nav {
  gap:clamp(10px,3.5vw,18px);
  font-size:13px
}

/* On a phone the four links fill the row: "Пауза" stands under them, right. */
.header nav .pause-switch {
  position:absolute;
  right:5vw;
  top:58px;
  padding:6px 0;
  font-size:11px
}

.brand, .brand-word {
  width:65px
}

.session-photos {
  grid-template-columns:1fr;
  gap:24px;
  padding:24px 4vw
}

.session-frame, .session-frame:nth-child(3n/**/+1) {
  grid-column:1;
  min-height:0;
  height:auto
}

.session-frame .photo, .session-frame .photo a {
  height:auto
}

.session-frame .photo img {
  height:auto;
  width:100%;
  max-height:89svh;
  object-fit:contain
}

.session-frame.wide, .session-frame.wide:nth-child(3n/**/+1) {
  height:auto;
  grid-column:1
}

.backstage-still {
  display:none
}

.mobile-backstage-frame .backstage-still {
  display:block
}

.backstage-next .next-title {
  font-size:11vw
}

.action-invitation>a:first-child {
  font-size:12vw
}

.backstage-next {
  padding:6vw
}

.film-invite {
  right:14px;
  bottom:16px;
  padding:10px 14px;
  font-size:14px;
  opacity:1;
  transform:none
}

.business-films {
  grid-template-columns:1fr;
  gap:22px;
  padding:0 4vw 40px
}

.business-films .film {
  height:auto;
  min-height:0
}

.business-films .film:nth-child(2n) {
  margin-top:0
}

.contact-world .contact-portrait {
  height:150svh
}

.contact-background .portrait-colour {
  height:185svh
}

.contact-world .inquiry-section {
  padding-top:100px;
  padding-bottom:50px
}

.contact-world .inquiry-intro {
  margin-bottom:40px
}

.contact-world .contact-details {
  padding-top:20px;
  padding-bottom:35px
}

.legal-links {
  flex-wrap:wrap;
  gap:18px
}

.legal-links a {
  font-size:12px
}
}

body[data-page="collection"] .header {
  mix-blend-mode:difference
}

body[data-page="collection"] .header>.brand, body[data-page="collection"] .header>nav {
  color:white;
  text-shadow:none
}

.field-type-letter {
  will-change:auto
}

/* The Videos film (Daniel, 27.10; src/motion-film.mjs, tools/make_film.py): the page opens on it full screen, above the
   fan and under the header, which loses its band while the film is on (Daniel, 27.10: "не трябва да има такава черна лента
   горе"); the header reads white over it. It leaves only by scrolling, rising 25vh under a veil of the page's colour. */
.motion-film {
  position:fixed;
  inset:0;
  z-index:28;
  overflow:hidden;
  background:#0b0b0b;
  will-change:transform,opacity
}

.motion-film[hidden] {
  display:none
}

.motion-film-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.motion-film-veil {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none
}

html.motion-film-on .header {
  color:#fff;
  background:none
}

/* Videos: the wall (Daniel, 27.10, after vigilante.group/films; src/motion-wall.mjs). From their main.css: the stage is
   the screen, in a perspective of 2400 px; the tiles stand edge to edge, each its clip covering it; the title in the
   middle of the tile, sized by the tile (their heading 11.2 % of its width, long ones 8.96 %; ours larger, Daniel: "с
   по-голям шрифт"), the client line above it; under the pointer a veil of rgba(12,10,9,.35) in 0.4 s and the ellipse
   (1.5 px, white at 90 %). Their FILM / STILLS switch is a word on a coloured ground: ours Филми / Reels on the bronze.
   The header loses its band and reads white over the films. */
html.motion-wall-mode {
  overflow:hidden
}

.motion-wall-mode body {
  overflow:hidden;
  overscroll-behavior:none
}

.motion-wall-mode main {
  height:100dvh;
  overflow:hidden;
  min-height:0
}

html.motion-wall-mode body .header {
  background:none;
  color:#fff;
  text-shadow:0 1px 14px #0006
}

.motion-wall {
  position:fixed;
  inset:0;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  touch-action:none;
  background:var(--paper)
}

.wall-heading {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.wall-views {
  position:absolute;
  z-index:6;
  top:96px;
  left:var(--gutter);
  display:flex;
  gap:4px
}

.wall-views button {
  padding:7px 11px 8px;
  font:500 15px/1 var(--sans);
  color:#fff;
  text-shadow:0 1px 12px #0007;
  background:none;
  transition:background-color .3s,color .3s
}

.wall-views button[aria-pressed=true] {
  background:var(--gold);
  color:var(--paper);
  text-shadow:none
}

.wall-views button:focus-visible {
  outline:1px solid #fff;
  outline-offset:2px
}

.wall-stage {
  position:absolute;
  inset:0;
  perspective:2400px;
  overflow:hidden
}

.wall {
  position:absolute;
  inset:0;
  transform-origin:50% 50vh;
  will-change:transform
}

.wall[hidden] {
  display:none
}

.wall-column {
  display:contents
}

.wall-item {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  container-type:inline-size;
  background:#000;
  will-change:transform
}

/* the tiles take their places only when the wall lays them out (src/motion-wall.mjs, in the same frame as
   .motion-wall-mode); shown before at no size in the corner, they moved there in view: a layout shift of 0.28 */
html:not(.motion-wall-mode) .wall-item {
  display:none
}

.wall-item .film-open {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%
}

.wall-item video {
  position:absolute;
  inset:-1px;
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  object-fit:cover;
  display:block
}

.wall-scrim {
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(12, 10, 9, .35);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none
}

.wall-item:hover .wall-scrim {
  opacity:1
}

.wall-circle {
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible
}

.wall-circle path {
  fill:none;
  stroke:rgba(255, 255, 255, .9);
  stroke-width:1.5;
  stroke-linecap:round
}

.wall-title {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 28px rgba(0, 0, 0, .35);
  pointer-events:none
}

.wall-kind {
  font-family:var(--sans);
  font-weight:500;
  font-size:max(11px, 2.2cqw);
  line-height:1.2;
  letter-spacing:.02em;
  margin-bottom:.9em;
  opacity:.88
}

.wall-name {
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--serif);
  font-weight:350;
  font-size:13cqw;
  line-height:.92;
  letter-spacing:-.05em;
  white-space:nowrap
}

.wall-name.long {
  font-size:9.6cqw
}

.wall[data-view="reels"] .wall-name {
  font-size:19cqw
}

.wall[data-view="reels"] .wall-name.long {
  font-size:14cqw
}

.wall[data-view="reels"] .wall-kind {
  font-size:max(11px, 4.2cqw)
}

.wall-label {
  position:absolute;
  top:3.4cqw;
  font-family:var(--sans);
  font-size:max(11px, 1.5cqw);
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  opacity:.85;
  white-space:nowrap
}

.wall-label-l {
  left:3.4cqw
}

.wall-label-r {
  right:3.4cqw
}

.wall[data-view="reels"] .wall-label {
  top:5cqw;
  font-size:max(11px, 3.2cqw)
}

.wall[data-view="reels"] .wall-label-l {
  left:5cqw
}

.wall[data-view="reels"] .wall-label-r {
  right:5cqw
}

/* The words' choreography (Daniel, 27.10; createWords in src/motion-wall.mjs): each letter its own box; in "masks"
   the line is its own mask (room above for accents, below for descenders); the film's ✳ beside the first line. */
.motion-wall .wm {
  display:inline-block;
  white-space:pre
}

.motion-wall .wc {
  display:inline-block
}

.motion-wall[data-words="masks"] .wm {
  clip-path:inset(-.35em -.3em -.24em -.3em)
}

.window-asterisk {
  display:inline-block;
  width:.5em;
  height:.5em;
  margin-left:.25em;
  vertical-align:.22em;
  overflow:visible;
  stroke:currentColor;
  stroke-width:2.2;
  fill:currentColor
}

.window-asterisk-spin {
  transform-origin:0 0;
  animation:window-spin 1s linear infinite
}

@keyframes window-spin {
  to {
    transform:rotate(360deg)
  }
}

@media (max-width:800px) {
  .wall-views {
    top:84px
  }
}

html[data-motion="reduce"] .window-asterisk-spin {
  animation:none
}

.home-field-mode .field-title h2 {
  font-size:clamp(4.5rem,11.5vw,16rem);
  white-space:nowrap
}

.home-field-mode .field-title>span {
  margin-bottom:13vw
}

.home-field-mode .field-image {
  will-change:transform
}

.home-field-mode .field-image .photo {
  height:100%;
  overflow:hidden
}

.home-field-mode .field-image img {
  transform-origin:50% 45%
}

.home-field-mode .field-dock {
  bottom:26px
}

.field-menu-toggle {
  min-width:180px
}

.home-field-mode .header {
  mix-blend-mode:normal
}

.home-field-mode .header>.brand, .home-field-mode .header>nav {
  color:var(--ink);
  text-shadow:none
}

.home-field-mode .header>.brand.light, .home-field-mode .header>nav.light {
  color:#fff;
  text-shadow:0 1px 8px #0004
}

body[data-page=collection] .header {
  mix-blend-mode:normal
}

body[data-page=collection] .header>.brand, body[data-page=collection] .header>nav {
  color:var(--ink);
  text-shadow:none
}

body[data-page=collection] .header>.brand.light, body[data-page=collection] .header>nav.light {
  color:white;
  text-shadow:0 1px 10px #0004
}

/* A collection's photographs after a project page of almirakho.com (Daniel, 23.10, night: 03 "Голям кадър, после
   две колони"): at the left a short note that stays where it is while they pass (Almira: the project's few lines,
   sticky near the foot of the screen, from a fifth of the width); the photographs one under another in the right
   half, whole and edge to edge (Almira: 720 px of 1440). A phone: the note first, then the photographs. */
.session-note-meta {
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:0 0 14px;
  font:600 11px/1.3 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase
}

.session-note-meta a {
  color:inherit;
  padding-block:5px;
  margin-block:-5px
}

.session-note-title {
  margin:0 0 18px;
  font:400 clamp(28px, 2.6vw, 46px)/1.04 var(--serif);
  letter-spacing:-.02em
}

.session-note-ask {
  font:500 14px/1.4 var(--sans);
  color:inherit
}

.session-note-ask em {
  font-style:normal;
  text-decoration:underline;
  text-underline-offset:4px
}

@media (min-width:701px) {
.session-photos {
  padding:0;
  gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.session-note {
  grid-column:1;
  grid-row:1 / span 200;
  align-self:stretch;
  position:relative
}

.session-note-in {
  position:sticky;
  top:calc(100svh - 250px);
  max-width:34vw;
  padding:0 0 0 21%
}

.session-frame, .session-frame:nth-child(3n/**/+1), .session-frame.wide, .session-frame.wide:nth-child(3n/**/+1), .session-frame:nth-child(4n/**/+2) {
  grid-column:2;
  height:auto;
  min-height:0;
  padding:0
}

.session-frame .photo, .session-frame .photo a {
  height:auto
}

.session-frame .photo img {
  width:100%;
  height:auto;
  max-height:none;
  object-fit:cover
}
}

@media (max-width:700px) {
.session-note-in {
  padding:30px 0 6px
}
}

.backstage-screen:after {
  height:20svh;
  background:linear-gradient(#0005,transparent)
}

.contact-world form input:focus-visible, .contact-world form textarea:focus-visible, .contact-world form select:focus-visible {
  outline:none;
  border-bottom-color:#fff;
  box-shadow:0 1px 0 #fff
}

.contact-world form input, .contact-world form textarea, .contact-world form select {
  transition:border-color .3s,box-shadow .3s;
  background:transparent
}

/* The address: the lines step in like on an envelope (contact hover spec,
   3); the second line and the map label move, the first stays. */
.studio-address a {
  display:inline-block
}

.studio-address .line {
  display:inline-block;
  transition:transform .65s var(--ease)
}

.studio-address a:hover .line-2, .studio-address a:focus-visible .line-2 {
  transform:translateX(.6em)
}

.studio-address a>span:last-child {
  position:relative;
  width:max-content;
  transition:transform .65s var(--ease) 80ms
}

.studio-address a:hover>span:last-child, .studio-address a:focus-visible>span:last-child {
  transform:translateX(1.2em)
}

html[data-motion="reduce"] .studio-address a:hover .line-2, html[data-motion="reduce"] .studio-address a:hover>span:last-child, html[data-motion="reduce"] .studio-address a:focus-visible .line-2, html[data-motion="reduce"] .studio-address a:focus-visible>span:last-child {
  transform:none
}

.studio-address a>span:last-child:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:currentColor;
  transform:scaleX(.15);
  transform-origin:left;
  transition:transform .8s var(--ease)
}

.studio-address a:hover>span:last-child:after, .studio-address a:focus-visible>span:last-child:after {
  transform:scaleX(1)
}

/* The phone: every digit in a mask of its own ink rolls up like a drum, one
   after another (contact hover spec, 1). The mask is measured in site.mjs. */
.direct-contact .dial .digit {
  display:inline-block;
  position:relative;
  vertical-align:baseline;
  clip-path:inset(var(--top,0) 0 var(--bottom,0))
}

.direct-contact .dial .digit>i {
  display:inline-block;
  font-style:normal
}

.direct-contact .dial .digit>b {
  display:inline-block;
  width:0;
  height:0;
  vertical-align:baseline
}

.direct-contact .dial .digit>i+i {
  position:absolute;
  left:0;
  top:var(--roll,100%)
}

.direct-contact .dial.dialing .digit>i {
  animation:dial-roll .42s var(--ease) both;
  animation-delay:calc(var(--n) * 45ms)
}

@keyframes dial-roll {
  to {
    transform:translateY(calc(-1 * var(--roll,100%)))
  }
}

.direct-contact .dial {
  position:relative
}

.direct-contact .dial:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:currentColor;
  opacity:0
}

html[data-motion="reduce"] .dial:hover:after, html[data-motion="reduce"] .dial:focus-visible:after {
  opacity:1
}

/* The email: a line born where the pointer came in, growing both ways, and
   leaving towards where it went out (contact hover spec, 2). */
.direct-contact>a.email {
  position:relative
}

.direct-contact>a.email:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:var(--x,0) 50%;
  transition:transform .45s var(--ease)
}

.direct-contact>a.email:hover:after, .direct-contact>a.email:focus-visible:after {
  transform:scaleX(1);
  transition-duration:.55s
}

@keyframes next-cover-expand{from{transform:scale(.88)}to{transform:scale(1)}}

@keyframes next-cover-type{from{opacity:0;transform:translateY(8svh)}to{opacity:1;transform:none}}

@media (max-width:700px) {
.home-field-mode .field-title h2 {
  font-size:15vw
}

.home-field-mode .field-title>span {
  margin-bottom:20vw
}

.field-menu-toggle {
  min-width:150px
}

.session-photos {
  grid-template-columns:1fr;
  padding:5vw;
  gap:5vw
}

.session-frame, .session-frame:nth-child(3n/**/+1), .session-frame.wide, .session-frame.wide:nth-child(3n/**/+1) {
  height:auto;
  padding:0
}
}
/* Each photograph owns its crop. The title is inside the same scene. */
.collection-opening, .collection-next-photo {
  position: relative;
  height: 100svh;
  min-height: 0;
  overflow: clip;
  color: white;
  background: var(--ink);
  isolation: isolate;
}
.collection-cover, .collection-cover > a, .collection-cover img,
.next-photo-screen, .next-photo-screen > .photo, .next-photo-screen .photo img {
  width: 100%; height: 100%; margin: 0;
}
.collection-cover img, .next-photo-screen .photo img {
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  transform: none; transition: none;
}
/* The cover is a large frame that goes on below the screen (Daniel, 23.10, night: 03; Almira: 1800 px of 900). */
@media (min-width:701px) {
.collection-opening {
  height: 125svh;
}
}
/* The cover fills the screen and does not zoom on hover. Same specificity as
   `.photo a:hover img`, so it wins by coming later. */
.collection-cover a:hover img { transform: none; }
.next-photo-screen { position: relative; overflow: clip; }
.collection-opening::after, .next-photo-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0005, transparent 30%, transparent 65%, #0005);
}
/* With the script, a cover's title waits for its corner (compose in src/site.mjs): shown before in the stylesheet's
   corner, it moved to the chosen one in view (a layout shift of 0.08 on a cold load, 27.10). Without the script it
   stands where the stylesheet puts it. */
html[data-js] .collection-opening .collection-heading:not(.is-placed) { visibility: hidden; }
.collection-heading, .next-photo-copy {
  position: absolute; z-index: 2; inset: max(110px, 16svh) auto auto 4vw;
  width: 41vw; max-width: 820px; margin: 0; padding: 0;
  color: white; pointer-events: none; mix-blend-mode: normal;
  text-shadow: 0 2px 25px #0004;
}
.collection-heading h1, .next-photo-copy .next-title {
  font-family: var(--serif); font-weight: 350;
  font-size: clamp(2.5rem, 4.5vw, 6rem); line-height: 1.08;
  max-width: 100%; margin: 0; text-wrap: balance;
}
.collection-heading .back-link, .next-photo-copy > span {
  display: block; margin-bottom: 20px; font-size: 14px;
}
.collection-heading a, .next-photo-copy a { pointer-events: auto; }
.collection-heading > span { display: none; }
.collection-heading .back-link::after { display: none; }
[data-heading-side='right'] > .collection-heading,
.next-photo-screen[data-heading-side='right'] > .next-photo-copy {
  left: auto; right: 4vw;
}
.next-photo-copy { top: auto; bottom: 9svh; }
.next-photo-copy .next-title:hover { color: white; }
.next-photo-copy .next-title { font-size: clamp(2.6rem, 5.6vw, 7rem); }
.header .over-photograph { color: white !important; text-shadow: 0 1px 12px #0008; }
.header .over-photograph .brand-mark { filter: drop-shadow(0 1px 4px #0005); }
.route-image { position: fixed; pointer-events: none; margin: 0; max-width: none; }
.route-image-mask { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 45; }
body[data-navigating='true'] .header nav a[aria-current]::after { opacity: .5; }

/* The one visible film fills the scene and remains live through expansion. */
.backstage-media { position: absolute; inset: 0; display: block; }
.backstage-media .backstage-film { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.backstage-media .backstage-film[hidden] { display: none; }
.backstage-media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--video-focus, 50% 35%); }
.backstage-name { position: absolute; left: 4vw; bottom: 8svh; top: auto; color: white; z-index: 3; text-shadow: 0 1px 12px #0005; }
.backstage-name h2 { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 7rem); }
.backstage-next { z-index: 4; }
.backstage-next .next-title { max-width: 65vw; }
.action-screen .film, .action-screen video { width: 100%; height: 100%; }
.action-screen video { object-fit: cover; object-position: var(--video-focus, 50% 35%); }

/* No zoom controls: the photograph is immediately as large as the viewport allows. */
.viewer {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none;
  max-height: none; margin: 0; padding: 0; border: 0;
  color: white; background: #121210; overflow: hidden;
}
.viewer::backdrop { background: #121210; }
.viewer-stage { position: absolute; inset: 0; padding: 0; display: block; overflow: hidden; }
.viewer-stage > img, .viewer-stage > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; max-width: none; max-height: none; }
.viewer-stage > img { object-fit: contain; }
.viewer-monochrome { filter: grayscale(1); }
.viewer-close {
  position: absolute; z-index: 5; right: 24px; top: 18px; display: flex;
  align-items: center; gap: 12px; padding: 12px 18px; min-height: 44px;
  color: white; background: #14141175; border-radius: 25px;
}
.viewer-navigation { position: absolute; z-index: 4; left: 3vw; right: 3vw; bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.viewer-navigation button { min-height: 44px; padding: 12px 18px; border-radius: 25px; background: #14141175; }
.viewer-navigation [data-count] { font-size: 13px; text-shadow: 0 1px 6px #000; }
.viewer.single .viewer-navigation, .viewer.video-viewer .viewer-navigation { display: none; }
.viewer.video-viewer video { width: 100%; height: 100%; object-fit: cover; object-position: var(--video-focus, 50% 35%); }
.viewer .viewer-sound { position: absolute; right: 24px; bottom: 24px; z-index: 5; min-height: 44px; padding: 12px 18px; border-radius: 25px; background: #14141175; }
.viewer-film-caption { position: absolute; left: 4vw; bottom: 8vh; max-width: min(560px,65vw); z-index: 3; pointer-events: none; text-shadow: 0 2px 20px #0008; }
.viewer-film-caption h2 { font-family: var(--serif); font-weight: 350; font-size: clamp(2.5rem,5vw,6rem); line-height: 1.1; margin: 0 0 18px; }
.viewer-film-caption p { font-size: clamp(14px,1.2vw,19px); max-width: 38ch; line-height: 1.6; }
.viewer.video-viewer .viewer-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,#0008,transparent 45%); z-index: 1; }
.loader-skip { position: absolute; z-index: 100; top: 28px; right: 4vw; padding: 12px 18px; min-height: 44px; font-size: 14px; border-bottom: 1px solid currentColor; }
.field-menu-toggle, .field-choice, .viewer-close, .reel-controls button { min-height: 44px; }
.home-field-mode .field-image { will-change: auto; }
.home-field-mode .field-type-letter { will-change: transform, opacity; }
.home-field-mode .field-title h2 { user-select: none; }

/* A video viewer unfolds from its card, so the page stays visible around it,
   and folds back the same way. A photograph (viewer-kononenko spec, 26.10):
   the dialog is transparent while it opens and closes (its dark is animated
   from site.mjs: no CSS transition here, it would override that animation),
   the stage carries its own dark so the wipe reveals the photograph on it,
   and the controls go first when it closes. */
.viewer.video-viewer::backdrop, .viewer.closing::backdrop, .viewer.opening::backdrop { background: transparent; }
.viewer.closing:not(.video-viewer), .viewer.opening:not(.video-viewer) { background: transparent; }
.viewer:not(.video-viewer) .viewer-stage { background: #121210; }
.viewer-navigation.rising { overflow: clip; }
.viewer.closing:not(.video-viewer) :is(.viewer-close, .viewer-navigation) { opacity: 0; transition: opacity .15s; }
.viewer-film-caption h2 { overflow: clip; padding-bottom: .1em; }
.viewer-film-caption h2 > span { display: block; }
.viewer-film-kind { font-size: 14px; line-height: 1.4; margin-bottom: 14px; opacity: .75; }
.viewer-film-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; }
.viewer-film-project, .viewer-film-ask { display: inline-block; font-size: 15px; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 4px; pointer-events: auto; }
.viewer-film-ask { border-bottom-color: rgb(255 255 255 / .45); }
.viewer-film-ask:hover, .viewer-film-ask:focus-visible { border-bottom-color: currentColor; }
/* A scroll on goes into the project (Daniel, 23.10): the viewer is drawn up and the line under "Към проекта" fills. */
.viewer.video-viewer .viewer-stage { transform: translateY(calc(var(--pull, 0) * -72px)); transition: transform .35s var(--ease); }
.viewer-film-project { position: relative; }
.viewer-film-project::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: currentColor; transform: scaleX(var(--pull, 0)); transform-origin: 0 50%; transition: transform .2s linear; }
/* Vertical film on a wide screen: an editorial spread on paper (decision
   15.10, prototype A). The clip is a full-height column, the free width is
   the page for its title and description. */
@media (min-aspect-ratio: 1/1) {
  .viewer.editorial-film { color: var(--ink); background: var(--paper); }
  .viewer.editorial-film .viewer-stage::after { display: none; }
  .viewer.editorial-film .viewer-stage > video { left: 9vw; right: auto; width: calc(100dvh * 9 / 16); height: 100dvh; object-fit: cover; object-position: 50% 50%; background: #171715; }
  .viewer.editorial-film .viewer-film-caption { left: calc(9vw + 100dvh * 9 / 16 + 5.5vw); right: 6vw; bottom: 9dvh; max-width: 56rem; text-shadow: none; pointer-events: auto; }
  .viewer.editorial-film .viewer-film-kind { font-weight: 500; color: var(--gold); opacity: 1; margin-bottom: 2.2dvh; }
  .viewer.editorial-film .viewer-film-caption h2 { font-size: clamp(4rem, 9.5vw, 12.5rem); line-height: .92; letter-spacing: -.055em; margin: 0 0 0 -.06em; }
  .viewer.editorial-film .viewer-film-caption p:not(.viewer-film-kind) { font-family: var(--reading); font-size: clamp(1.25rem, 1.55vw, 1.6rem); line-height: 1.45; max-width: 30ch; margin-top: 4dvh; }
  .viewer.editorial-film .viewer-film-project { margin-top: 3.5dvh; font-weight: 500; }
  .viewer.editorial-film .viewer-close, .viewer.editorial-film .viewer-sound { color: var(--ink); background: none; border-radius: 0; border-bottom: 1px solid currentColor; padding: 12px 0 6px; min-height: 44px; }
  .viewer.editorial-film .viewer-close { right: 4.5vw; top: 30px; }
  .viewer.editorial-film .viewer-sound { right: 4.5vw; bottom: 28px; }
}

/* Backstage with a low-resolution vertical clip: the same editorial spread. */
@media (min-aspect-ratio: 1/1) {
  .backstage-scene.editorial { background: var(--paper); color: var(--ink); }
  .backstage-scene.editorial .backstage-screen:after { display: none; }
  /* The column starts after the logo, which stays on paper. */
  .backstage-scene.editorial .backstage-media .backstage-film { left: 14vw; right: auto; width: calc(100svh * 9 / 16); }
  .backstage-scene.editorial .backstage-media video { object-position: 50% 50%; }
  .backstage-scene.editorial .backstage-name { left: calc(14vw + 100svh * 9 / 16 + 5.5vw); bottom: 9svh; color: var(--ink); text-shadow: none; }
  .backstage-scene.editorial .backstage-name h2 { font-size: clamp(4rem, 8.5vw, 12rem); line-height: .92; letter-spacing: -.055em; }
  .backstage-scene.editorial .backstage-next { color: var(--ink); }
}

/* Reel geometry is laid out once, then composed using transforms only. */
/* The WebGL reel (reel-spec.md, variant A): the fan is drawn on a canvas
   under the titles; the DOM track stands unseen over the active panel as
   its hit area, with the clip's own video, which is also the texture. */
/* A thumbnail the cover is folding back into holds still under the pointer. */
[data-folding] img, [data-folding] .photo { transform: none !important; transition: none !important; }
.legal-links a, .header nav a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 700px) {
  .collection-heading, .next-photo-copy { left: 6vw; right: auto; width: 85vw; top: auto; bottom: 11svh; }
  [data-heading-side='right'] > .collection-heading, .next-photo-screen[data-heading-side='right'] > .next-photo-copy { left: 6vw; right: auto; }
  .collection-heading h1, .next-photo-copy .next-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .collection-opening::after, .next-photo-screen::after { background: linear-gradient(#0004,transparent 25%,transparent 55%,#0008); }
  .viewer-close { right: 10px; top: 10px; }
  .viewer-navigation { bottom: 16px; }
  .viewer.video-viewer video { object-position: 50% 50%; }
  .backstage-next .next-title { max-width: 90vw; }
  .legal-links { gap: 14px; flex-wrap: wrap; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='full']) .collection-cover img { animation: none; }
}

/* The scroll line: one 1 px line at the right edge of the window, where the
   scrollbar was (Daniel, 16.10: 8 px; aligned with the navigation it met the
   text), shows how far the visitor is, whatever moves the page: Lenis, the
   home field or the reel (docs/motion/scroll-line-spec.md, variant A). The
   fill follows the engine's own eased position; the line has no motion of
   its own and takes no input. */
.scroll-line {
  position: fixed; z-index: 31; right: 8px; top: 110px; bottom: 110px; width: 1px;
  background: #2928241f; pointer-events: none; transition: opacity .4s;
}
.scroll-line::before {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  transform-origin: 50% 0; transform: scaleY(var(--scroll-progress, 0));
}
/* Nothing to scroll, or the opening still playing: no line. */
html[data-scroll-line='off'] .scroll-line, html.home-entrance .scroll-line { opacity: 0; }
@media (max-width: 700px) {
  .scroll-line { right: 12px; }
}
/* A title over a light corner of the photograph is set in ink, without the
   shadow and the dark veil; compose() reads the pixels under it (covers
   review, rule 5). */
.collection-opening[data-title-tone="ink"] .collection-heading, .next-photo-screen[data-title-tone="ink"] .next-photo-copy { color: var(--ink); text-shadow: none; }
.collection-opening[data-title-tone="ink"]::after, .next-photo-screen[data-title-tone="ink"]::after { background: none; }
/* A business page's ending (decision 18.10, 18а): its last film continues at
   full screen with the invitation of IN ACTION. A vertical film stands as a
   column on the dark ground, never stretched (group C, variant A). */
.business-end .action-film { background: #171715; }
.business-end.action-column .action-screen .action-film { display: flex; justify-content: center; }
.business-end.action-column .action-screen video { width: auto; height: 100%; aspect-ratio: 9 / 16; }

/* Типографските нива (прегледът 19.10, 1.1, 1.3, 1.4, 5.3). Три нива за
   дребния текст: функционално (навигация, подкани, бутони, връзки, докът):
   Manrope 500, 15 px на десктоп / 14 на телефон, пълно мастило; средно (кратки
   описания): EB Garamond 19 / 17 px; декоративно (етикети над заглавия,
   броячи): Manrope 12 / 11 px на 70 % от цвета. Размерите стоят в правилата
   на всеки елемент; тук е само това, което те нямаха. */
.header nav a, .text-link, .back-link, .form-submit, .image-invite, .field-image-cue, .preview-invitation, .film-invite, .reel-project, .reel-controls, .reel-controls button, .scroll-instruction, .field-menu-toggle {
  font-family:var(--sans);
  font-weight:500
}

.reel-count, .index-heading>p:not(.project-description) {
  font-weight:400;
  font-size:12px
}

.collection-heading .back-link {
  font-size:15px
}

.reel-description, .index-heading .project-description, .action-copy p {
  font-family:var(--reading);
  font-weight:400;
  line-height:1.45
}

.index-heading .project-description {
  font-size:19px
}

.gallery-label, .category-choice small, .field-title>span, .reel-kind, .reel-count, .index-heading>p:not(.project-description) {
  color:rgb(41 40 36 / .7)
}

.contact-opening>span, .inquiry-intro>span {
  color:rgb(255 255 255 / .7)
}

/* The invitation on the "next collection" screen (review 19.10, 10.1;
   decision 8): a smaller line under the next collection's name, carrying the
   kind of session and the category into the inquiry form. */
.next-inquiry {
  display:block;
  width:fit-content;
  margin-top:28px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1.5
}

.next-inquiry em {
  font-style:normal;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  margin-left:4px
}

.next-inquiry:hover em, .next-inquiry:focus-visible em {
  text-decoration-thickness:2px
}

@media (max-width:700px) {
  .next-inquiry {
    margin-top:20px;
    font-size:14px
  }
}

/* The four directions (structure, part 2, 20.10). The Gallery: under the
   list, the chosen direction's occasions or projects as small links; the
   row keeps its height, so choosing never moves the names. */
.category-occasions {
  min-height:30px;
  margin-top:26px
}

.category-occasions p {
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0
}

.category-occasions p[hidden] {
  display:none
}

.category-occasions a {
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  text-decoration-color:rgb(41 40 36 / .35);
  transition:text-decoration-color .3s
}

.category-occasions a:hover, .category-occasions a:focus-visible {
  text-decoration-color:currentColor
}

/* A direction's page: every occasion with its heading over its cards. */
.occasion-group + .occasion-group {
  margin-top:72px
}

.occasion-heading {
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:0 var(--gutter);
  margin-bottom:22px
}

.occasion-heading .text-link {
  font-family:var(--serif);
  font-size:clamp(1.8rem,2.6vw,2.8rem);
  font-weight:350;
  letter-spacing:-.03em;
  line-height:1.15
}

.occasion-heading small {
  font-family:var(--sans);
  font-size:12px;
  color:rgb(41 40 36 / .7)
}

/* Where it was shot, as a filter (structure, part 5): under the count,
   functional buttons, the chosen one underlined; the numbers decorative. */
.place-filter {
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin-top:26px
}

.place-filter button {
  padding:4px 0;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
  text-decoration-color:transparent;
  transition:text-decoration-color .3s
}

.place-filter button:hover, .place-filter button:focus-visible {
  text-decoration-color:rgb(41 40 36 / .4)
}

.place-filter button[aria-pressed="true"] {
  text-decoration-color:currentColor
}

.place-filter small {
  margin-left:6px;
  font-size:12px;
  font-weight:400;
  color:rgb(41 40 36 / .7)
}

.collection-card[hidden], .occasion-group[hidden] {
  display:none
}

@media (max-width:700px) {
  .place-filter {
    gap:8px 20px;
    margin-top:18px
  }

  .place-filter button {
    font-size:14px
  }
}

/* A collection's place (structure, part 3): beside the link back to the
   occasion, at the decorative level, in the title's colour. */
.collection-heading .back-link {
  display:inline-block
}

.collection-place {
  display:inline-block;
  margin:0 0 20px 12px;
  font-family:var(--sans);
  font-size:12px;
  opacity:.75
}

.collection-place:before {
  content:"·";
  margin-right:12px
}

/* A project's photographs (Loretti, structure part 4): the collection's cover
   across the page, the title over it, between the films and the ending. */
.project-photos {
  padding:0 var(--gutter) 90px
}

.project-photos-card {
  position:relative;
  display:block;
  overflow:hidden
}

.project-photos-card .photo {
  aspect-ratio:16/9;
  margin:0
}

.project-photos-card .photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%
}

.project-photos-title {
  position:absolute;
  left:4vw;
  bottom:7%;
  color:#fff;
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,6rem);
  font-weight:350;
  letter-spacing:-.05em;
  line-height:1.05;
  text-shadow:0 2px 25px #0005;
  pointer-events:none
}

.project-photos-title small {
  display:block;
  margin-top:10px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0;
  color:rgb(255 255 255 / .8)
}

@media (max-width:700px) {
  .project-photos {
    padding:0 0 60px
  }

  .project-photos-card .photo {
    aspect-ratio:4/5
  }
}

/* The projects on /brands/: the name and the kind over the poster. */
.brand-card a {
  position:relative;
  display:block
}

.brand-card-name {
  position:absolute;
  left:22px;
  bottom:20px;
  right:22px;
  color:#fff;
  font-family:var(--serif);
  font-size:clamp(1.8rem,2.6vw,2.8rem);
  font-weight:350;
  letter-spacing:-.03em;
  line-height:1.1;
  text-shadow:0 1px 14px #0006;
  pointer-events:none
}

.brand-card-name small {
  display:block;
  margin-top:6px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0;
  color:rgb(255 255 255 / .8)
}

@media (max-width:700px) {
  .category-occasions {
    flex-basis:100%;
    margin-top:6px
  }

  .category-occasions a {
    font-size:14px
  }

  .occasion-group + .occasion-group {
    margin-top:48px
  }

  .occasion-heading {
    padding:0 5vw
  }
}

/* Videos: the index of every clip (review 19.10, 5.5): the names on the
   paper, over the fan, under the header. */
.reel-index-open {
  display:block;
  margin-top:16px;
  padding:0 0 5px;
  color:inherit
}

.reel-index-close {
  padding:0 0 5px;
  color:inherit
}

.reel-index {
  position:fixed;
  inset:0;
  z-index:6;
  background:var(--paper);
  color:var(--ink);
  overflow:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:140px 4vw 90px
}

.reel-index[hidden] {
  display:none
}

.reel-index-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:56px
}

.reel-index-head h2 {
  font-family:var(--serif);
  font-size:clamp(2.6rem,5vw,5.5rem);
  font-weight:350;
  letter-spacing:-.05em;
  line-height:1
}

.reel-index-head h2 small {
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0;
  color:rgb(41 40 36 / .7);
  margin-left:10px;
  vertical-align:top
}

.reel-index-groups {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px 4vw;
  align-items:start
}

.reel-index h3 {
  font-family:var(--sans);
  font-size:12px;
  font-weight:400;
  color:rgb(41 40 36 / .7);
  margin:0 0 18px
}

.reel-index ul {
  list-style:none;
  margin:0;
  padding:0
}

.reel-index-entry {
  display:block;
  width:100%;
  text-align:left;
  padding:5px 0;
  color:var(--ink)
}

.reel-index-line {
  display:block;
  overflow:hidden;
  padding-bottom:.08em
}

.reel-index-name {
  display:inline-block;
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.1vw,2.2rem);
  font-weight:350;
  letter-spacing:-.03em;
  line-height:1.2;
  transition:color .35s
}

.reel-index-entry small {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  color:rgb(41 40 36 / .7);
  margin-top:2px
}

.reel-index-entry:hover .reel-index-name, .reel-index-entry:focus-visible .reel-index-name {
  color:var(--gold)
}

@media (max-width:700px) {
  .reel-index {
    padding:110px 6vw 60px
  }

  .reel-index-head {
    margin-bottom:36px
  }

  .reel-index-groups {
    grid-template-columns:1fr;
    gap:36px
  }

  .reel-index-name {
    font-size:1.6rem
  }

  .reel-index-entry small {
    font-size:11px
  }
}

/* The dock is the name that is always readable (review 19.10, 2, decision Г):
   the active category at 16 px with its count. */
.field-menu-label {
  font-size:16px
}

.field-menu-count {
  font-size:12px;
  color:#f1f0edb3;
  margin-left:-6px
}

/* The dock's link to Contact (3.в): a real link beside the category menu. */
.field-dock-contact {
  display:inline-flex;
  align-items:center;
  align-self:stretch;
  margin-left:4px;
  padding:0 16px 0 14px;
  border-left:1px solid #f1f0ed40;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  border-radius:0 40px 40px 0;
  transition:background .3s
}

.field-dock-contact:hover, .field-dock-contact:focus-visible {
  background:#f1f0ed1f
}

@media (max-width:700px) {
  .field-dock-contact {
    font-size:14px;
    padding:0 12px 0 10px
  }

  .field-menu-label {
    font-size:15px
  }

  .field-menu-count {
    font-size:11px
  }
}

@media (max-width:700px) {
  .image-invite, .text-link, .collection-heading .back-link {
    font-size:14px
  }

  .index-heading .project-description {
    font-size:17px
  }

.index-heading>p:not(.project-description), .reel-count {
    font-size:11px
  }
}
/* ===== The home page after almirakho.com (Daniel, 23.10: "борислава снимка отляво и после отдясно се скролва всичко
   останало"; src/home-split.mjs; measured: docs/research/research_notes/almira_kho.md) ===============================
   On the left Borislava (P02), still, as tall as the screen less the sentence at its foot; on the right the
   column of the eight sections, each a photograph as tall as the portrait with its name on it. The page's
   colours are set on the body, so the header and the corner read them too. */
body[data-page="home"] {
  --home-paper:#060606;
  --home-ink:#fff;
  --home-gold:#b8975f;
  --home-light:#f1f0ed;
  background:var(--home-paper)
}

html[data-theme="light"] body[data-page="home"] {
  --home-paper:#f1f0ed;
  --home-ink:#292824;
  --home-gold:#7a6138
}

html.theme-changing body[data-page="home"] {
  transition:background-color 1s linear(0, .214 5%, .382 10%, .515 15%, .619 20%, .702 25%, .767 30%, .818 35%, .858 40%, .915 50%, .951 60%, .973 70%, .986 80%, .995 90%, 1)
}

html.home-split-mode, html.home-split-mode body {
  height:100%;
  overflow:hidden;
  overscroll-behavior:none
}

.home-split {
  position:fixed;
  inset:0;
  z-index:1;
  overflow:clip;
  color:var(--home-ink);
  touch-action:none
}

/* The header on the home page over her photograph (Daniel, 23.10, night: "направи бутони контакт и тн да са над
   нейната снимка както е в сайта"; Almira: the name at the left, the pages from about a fifth of the width). The
   home has its own "Пауза" in the corner. */
body[data-page="home"] .header {
  color:#fff;
  text-shadow:0 1px 14px rgb(0 0 0 / .35)
}

body[data-page="home"] .header nav {
  position:absolute;
  left:21%;
  top:0;
  bottom:0;
  align-items:center
}

body[data-page="home"] .header nav .pause-switch {
  display:none
}

html:has(.home-split.hs-loading) .header {
  opacity:0
}

.home-split.hs-pre :is(.hs-column, .hs-line, .home-aside) {
  visibility:hidden
}

/* The left: the portrait, on black (tools/black_backdrop.py), the whole height (Almira: 60 % of the width). */
.hs-left {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:60%;
  will-change:transform
}

.hs-portrait {
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  background:#060606
}

.hs-portrait img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 22%
}

/* The entrance: the black of the loading page in ten bands over the portrait. */
.hs-blinds {
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-rows:repeat(10, 1fr);
  pointer-events:none
}

.hs-blinds i {
  margin-bottom:-1px;
  background:#060606;
  transform-origin:50% 100%
}

/* One sentence at the foot (Daniel, 23.10, night: "по-скоро да напишем нещо което и референтния сайт са написали",
   "нещо по-хубаво и ефектно", "дори да ходи както при Алмира в секциите в дясно"): who, where, what. White, over
   the whole page; where it crosses a photograph the difference blend turns it (Almira). Three proposals:
   a: Almira's: our sans in capitals, three lines, the long one across the column;
   b: one large line in Literata across both halves, the rest small in capitals under it;
   c: quiet: Literata, three lines, on the portrait. */
.hs-line {
  position:absolute;
  z-index:4;
  left:var(--gutter);
  right:var(--gutter);
  bottom:clamp(18px, 3vh, 34px);
  margin:0;
  color:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  will-change:transform
}

.hs-line-row {
  display:block;
  overflow:clip;
  padding-bottom:.08em;
  margin-bottom:-.08em
}

.hs-line-row > span {
  display:inline-block
}

.home-split[data-line="a"] .hs-line {
  font:500 clamp(24px, 2.85vw, 54px)/1.02 var(--sans);
  letter-spacing:-.012em;
  text-transform:uppercase
}

.home-split[data-line="b"] .hs-line-row:first-child {
  font:400 clamp(52px, 7.4vw, 140px)/.98 var(--serif);
  letter-spacing:-.035em;
  padding-bottom:.12em
}

.home-split[data-line="b"] .hs-line-row:not(:first-child) {
  display:inline-block;
  margin-top:12px;
  font:500 12px/1.2 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase
}

.home-split[data-line="c"] .hs-line {
  right:auto;
  max-width:calc(60% - var(--gutter) * 2);
  font:400 clamp(26px, 2.6vw, 48px)/1.12 var(--serif);
  letter-spacing:-.015em;
  mix-blend-mode:normal
}

/* d (24.10, the default after Daniel's review: "по-голяма, четлива, премиум, красива"): her words large in Literata
   over the photograph, no blending; the second line small in capitals under them. e, f, g: the same lines in
   three open serifs with Cyrillic (Playfair Display, Prata, Cormorant) for Daniel to compare by the link; a bought
   typeface only with his word. */
.home-split[data-line="d"] .hs-line, .home-split[data-line="e"] .hs-line, .home-split[data-line="f"] .hs-line, .home-split[data-line="g"] .hs-line {
  right:auto;
  max-width:calc(60% - var(--gutter) * 1.2);
  mix-blend-mode:normal;
  text-shadow:0 1px 28px rgb(0 0 0 / .45)
}

.home-split[data-line="d"] .hs-line-row:first-child, .home-split[data-line="e"] .hs-line-row:first-child, .home-split[data-line="f"] .hs-line-row:first-child, .home-split[data-line="g"] .hs-line-row:first-child {
  font:400 clamp(36px, 4.6vw, 72px)/1 var(--serif);
  letter-spacing:-.025em;
  padding-bottom:.1em
}

.home-split[data-line="e"] .hs-line-row:first-child {
  font-family:"Playfair Display", var(--serif);
  font-weight:450
}

.home-split[data-line="f"] .hs-line-row:first-child {
  font-family:Prata, var(--serif)
}

.home-split[data-line="g"] .hs-line-row:first-child {
  font-family:Cormorant, var(--serif);
  font-weight:500;
  font-size:clamp(40px, 5.2vw, 82px)
}

.home-split[data-line="d"] .hs-line-row:not(:first-child), .home-split[data-line="e"] .hs-line-row:not(:first-child), .home-split[data-line="f"] .hs-line-row:not(:first-child), .home-split[data-line="g"] .hs-line-row:not(:first-child) {
  display:inline-block;
  margin-top:14px;
  font:600 12px/1.2 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.8
}

/* The right: the column; every frame is placed by the script (endless on a computer). */
.hs-column {
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:40%;
  overflow:clip;
  background:#121110
}

/* A little shade at the top of the column, under the corner, so its words read over any photograph. */
.hs-column::after {
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:0;
  height:190px;
  pointer-events:none;
  background:linear-gradient(180deg, rgb(0 0 0 / .34), rgb(0 0 0 / .12) 55%, transparent)
}

.hs-card {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:var(--hs-card, 78vh);
  display:block;
  overflow:hidden;
  color:#f1f0ed;
  will-change:transform;
  -webkit-tap-highlight-color:transparent
}

.hs-media {
  position:absolute;
  inset:0;
  transform:scale(1.16);
  will-change:transform
}

.hs-media :is(img, video) {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

.hs-media video {
  object-position:var(--video-focus, 50% 35%)
}

/* Pointed at: the section's second photograph in nine strips, each showing its own slice of it. */
.hs-strips, .hv-strips {
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  pointer-events:none
}

.hs-strips > span, .hv-strips > span {
  position:relative;
  flex:1 1 0;
  overflow:hidden;
  transform:scaleX(0);
  transform-origin:0 50%
}

.hs-strips img, .hv-strips img {
  position:absolute;
  top:0;
  left:calc(var(--i) * -100%);
  width:900%;
  height:100%;
  max-width:none;
  object-fit:cover
}

/* The name on the photograph, in the middle of the frame. */
.hs-name {
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:50%;
  overflow:clip;
  padding:0 16px .14em;
  text-align:center;
  font:400 clamp(34px, 3.75vw, 68px)/1 var(--serif);
  letter-spacing:-.02em;
  text-shadow:0 1px 26px rgb(0 0 0 / .32);
  transform:translateY(-50%)
}

.hs-name > span {
  display:inline-block
}

.hs-card:focus-visible {
  outline:none
}

.hs-card:focus-visible .hs-name > span {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em
}

/* "View" follows the pointer over the column (Daniel, 23.10, night: "искам същото!"; Almira: a small black box,
   white capitals, opening from the left). Not on touch. */
.hs-view {
  position:fixed;
  left:0;
  top:0;
  z-index:32;
  padding:7px 11px 6px;
  background:#060606;
  color:#fff;
  font:600 11px/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  will-change:transform
}

@media (hover:none), (pointer:coarse) {
.hs-view {
  display:none
}
}

.home-split.hs-entering .home-aside {
  opacity:0;
  transition:opacity .3s linear
}

/* A phone (Almira on a phone): the portrait is the first screen with the sentence on it, the sections follow,
   one screen each; a finger moves the whole page. */
@media (max-width:760px) {
.hs-left {
  right:0;
  bottom:auto;
  width:100%;
  height:100%;
  grid-template-rows:minmax(0, 1fr)
}

.hs-portrait img {
  object-position:50% 20%
}

.hs-line {
  left:20px;
  right:20px;
  bottom:calc(26px + env(safe-area-inset-bottom))
}

.home-split[data-line="a"] .hs-line {
  font-size:clamp(22px, 6.6vw, 30px)
}

.home-split[data-line="b"] .hs-line-row:first-child {
  font-size:clamp(40px, 12.4vw, 60px)
}

.home-split[data-line="b"] .hs-line-row:not(:first-child) {
  display:block;
  margin-top:8px
}

.home-split[data-line="c"] .hs-line {
  max-width:none;
  font-size:clamp(24px, 7vw, 32px)
}

.hs-column {
  inset:0;
  width:100%;
  background:none;
  pointer-events:none
}

.hs-card {
  pointer-events:auto
}

.hs-name {
  font-size:clamp(40px, 11vw, 52px)
}
}

/* The corner (approved with the home, 21.10; moved 23.10, night): the socials in the header's row over her
   photograph, after the pages (Daniel: "Соц мрежите също"); "Пауза" and the theme at the far right. */
.home-aside {
  position:absolute;
  z-index:31;
  top:22px;
  left:43%;
  right:var(--gutter);
  height:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#fff;
  text-shadow:0 1px 14px rgb(0 0 0 / .35);
  transition:color .45s var(--ease)
}

.home-aside > * {
  margin:0
}

.home-pause, .home-theme {
  border:0;
  background:none;
  padding:0;
  color:inherit;
  cursor:pointer;
  text-shadow:inherit
}

.home-socials {
  display:flex;
  align-items:center;
  gap:26px;
  font:500 15px/1.2 var(--sans);
  letter-spacing:.01em
}

/* Instagram and Facebook with their signs (Daniel, 23.10: "сложи и техните иконки и да имат хореография при
   хувър"). Pointed at, the sign draws itself again along its line; Instagram's lens focuses (it closes a little
   and opens) and its flash blinks; Facebook's "f" writes itself from the foot; the name rolls up into itself,
   as the theme switch does. */
.home-social {
  display:inline-flex;
  align-items:center;
  gap:9px
}

.home-social svg {
  width:17px;
  height:17px;
  flex:none;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

.home-social svg .flash {
  fill:currentColor;
  stroke:none;
  transform-box:fill-box;
  transform-origin:50% 50%
}

.home-social svg .lens {
  transform-box:fill-box;
  transform-origin:50% 50%
}

.home-social svg :is(.frame, .lens, .f) {
  stroke-dasharray:1;
  stroke-dashoffset:0
}

.home-social-name {
  display:block;
  height:1.2em;
  overflow:hidden;
  line-height:1.2em
}

.home-social-name span {
  display:block;
  transition:transform .5s cubic-bezier(.65,0,.35,1)
}

.home-social:is(:hover, :focus-visible) .home-social-name span {
  transform:translateY(-100%)
}

.home-social:is(:hover, :focus-visible) .frame, .home-social:is(:hover, :focus-visible) .f {
  animation:social-draw .7s cubic-bezier(.65,0,.35,1) both
}

.home-social:is(:hover, :focus-visible) .lens {
  animation:social-draw .55s cubic-bezier(.65,0,.35,1) .12s both, social-focus .7s cubic-bezier(.22,.75,.22,1) .12s both
}

.home-social:is(:hover, :focus-visible) .flash {
  animation:social-flash .45s cubic-bezier(.22,.75,.22,1) .42s both
}

@keyframes social-draw {
  from { stroke-dashoffset:1 }
  to { stroke-dashoffset:0 }
}

@keyframes social-focus {
  0% { transform:scale(1) rotate(0deg) }
  45% { transform:scale(.62) rotate(-35deg) }
  100% { transform:scale(1) rotate(0deg) }
}

@keyframes social-flash {
  0% { transform:scale(1); opacity:1 }
  35% { transform:scale(2.2); opacity:.35 }
  100% { transform:scale(1); opacity:1 }
}

.home-switches {
  display:flex;
  align-items:center;
  gap:18px
}

.home-pause {
  position:relative;
  font:400 13px var(--sans);
  letter-spacing:.04em;
  opacity:.7;
  transition:opacity .3s var(--ease)
}

.home-pause::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease)
}

.home-pause:hover, .home-pause:focus-visible, .home-pause[aria-pressed="true"] {
  opacity:1
}

.home-pause[aria-pressed="true"]::after {
  transform:scaleX(1)
}

.home-theme {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:400 13px var(--sans);
  letter-spacing:.04em
}

.home-theme .roll {
  display:block;
  height:1.3em;
  overflow:hidden;
  line-height:1.3em;
  text-align:right
}

.home-theme .roll i {
  display:block;
  font-style:normal
}

html[data-theme="dark"] .home-theme .roll i {
  transform:translateY(-100%)
}

html.theme-changing .home-theme .roll i {
  transition:transform .47s cubic-bezier(.65,0,.35,1) .04s
}

.home-theme .dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--home-paper);
  box-shadow:inset 0 0 0 1px currentColor
}

.home-pause:focus-visible, .home-theme:focus-visible {
  outline:1px solid var(--home-gold);
  outline-offset:4px
}

.home-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.home-chips button {
  border:0;
  border-radius:999px;
  padding:9px 15px;
  background:none;
  color:inherit;
  font:500 13px var(--sans);
  box-shadow:inset 0 0 0 1px rgb(127 120 110 / .45);
  cursor:pointer;
  transition:box-shadow .25s var(--ease)
}

.home-chips button[aria-pressed="true"] {
  box-shadow:inset 0 0 0 1.5px var(--home-gold)
}

.home-chips button:focus-visible {
  outline:1px solid var(--home-gold);
  outline-offset:3px
}

/* The loading page: always black with white type (Daniel, 23.10), with the same grain. */
.wl-loader {
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  background:#060606;
  color:#f1f0ed
}

.wl-loader::after {
  content:"";
  position:absolute;
  inset:-50%;
  pointer-events:none;
  background:var(--grain) 0 0 / 180px 180px repeat;
  opacity:.12;
  mix-blend-mode:screen;
  animation:grain-shift 1.5s steps(6) infinite
}

.wl-loader p {
  margin:0
}

.wl-label {
  position:absolute;
  z-index:1;
  left:4.5vw;
  bottom:35px;
  font-size:13px;
  line-height:1.5
}

.wl-count {
  position:absolute;
  z-index:1;
  right:4.5vw;
  bottom:35px;
  min-width:1.5em;
  font:400 clamp(4rem, 7vw, 8rem)/1 var(--serif);
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  text-align:right
}

.wl-word {
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  text-align:center;
  font:350 clamp(7rem, 22vw, 30rem)/1.2 var(--serif);
  letter-spacing:-.085em;
  pointer-events:none
}

.wl-word:not(.up) {
  visibility:hidden
}

.wl-word span {
  display:inline-block
}

.home-split .loader-skip {
  position:absolute;
  z-index:7;
  top:26px;
  right:4.5vw;
  min-height:44px;
  padding:12px;
  border:0;
  background:none;
  color:#f1f0ed;
  font:500 13px var(--sans);
  cursor:pointer
}

.home-split .loader-skip:hover, .home-split .loader-skip:focus-visible {
  text-decoration:underline;
  text-underline-offset:6px
}

@media (max-width:700px) {

/* A phone: the pages stay in the header's row at the right (as on every page); the socials and the switches
   take the row under it. */
body[data-page="home"] .header nav {
  position:static
}

.home-aside {
  top:68px;
  left:20px;
  right:20px;
  height:auto;
  gap:10px
}

.home-socials {
  font-size:13px;
  gap:18px
}

.home-theme .roll {
  display:none
}

.wl-word {
  font-size:26vw;
  line-height:1.35
}

.wl-label {
  font-size:11px
}

.wl-count {
  font-size:60px
}
}

/* ===== The grain (Daniel, 23.10: "черна с noise/groins както е същата на promodex.ua") =====================
   The soft film noise of the home prototype's dark theme (22.10), at 12 % screened onto the black, stepping
   6 times in 1.5 s. It lies under the pictures, never over them (the research of 21.10: grain must not change
   the photographer's colours); still in reduced motion and while "Пауза". Only a faint warm light (below);
   promodex's new strong ambient lights are "не е това идеята за нашия сайт" (Daniel, 23.10). */
.site-grain {
  position:fixed;
  inset:0;
  z-index:-1;
  display:none;
  overflow:hidden;
  pointer-events:none
}

html.grain-on .site-grain {
  display:block
}

.site-grain::after {
  content:"";
  position:absolute;
  inset:-50%;
  background:var(--grain) 0 0 / 180px 180px repeat;
  opacity:.12;
  mix-blend-mode:screen;
  animation:grain-shift 1.5s steps(6) infinite
}

html.grain-light .site-grain::after {
  opacity:.05;
  mix-blend-mode:multiply
}

/* A faint warm light behind the dark pages (Daniel, 23.10: "сложи амбиент но нека да не е толкова силно а просто
   леко да добавя към красотата"): the bronze low in one corner, a breath of warm white in the opposite one,
   slowly breathing (12 s); under the pictures like the grain. */
html.grain-glow .site-grain::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(44vw 48vh at 3% 102%, rgb(184 151 95 / .1), transparent 72%), radial-gradient(36vw 38vh at 100% -2%, rgb(237 235 230 / .04), transparent 70%);
  animation:glow-breathe 12s ease-in-out infinite alternate
}

@keyframes glow-breathe {
  from { opacity:.65 }
  to { opacity:1 }
}

@keyframes grain-shift {
  0% { transform:translate(0, 0) }
  17% { transform:translate(-4%, -7%) }
  33% { transform:translate(5%, -11%) }
  50% { transform:translate(-9%, 6%) }
  67% { transform:translate(7%, 3%) }
  83% { transform:translate(-2%, 9%) }
  100% { transform:translate(0, 0) }
}

/* ===== The end of a collection after kaiblamey.com (Daniel, 23.10, night: 14; site.mjs bindNextMore) ==========
   The next collection on the whole screen comes slowly closer, like a film; under its name the three after it, in
   small capitals; the name pointed at puts its picture there. */
.collection-next-photo .next-photo-screen .photo img {
  animation:next-film 16s cubic-bezier(.45,0,.55,1) infinite alternate
}

@keyframes next-film {
  from { transform:scale(1) }
  to { transform:scale(1.08) }
}

html[data-paused] .collection-next-photo .next-photo-screen .photo img {
  animation-play-state:paused
}

html[data-motion="reduce"] .collection-next-photo .next-photo-screen .photo img {
  animation:none
}

.next-more {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:18px 0 16px
}

.next-more a {
  width:max-content;
  max-width:100%;
  font:600 12px/1.3 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:inherit;
  opacity:.62;
  pointer-events:auto;
  transition:opacity .3s, transform .45s cubic-bezier(.22,.75,.22,1)
}

.next-photo-screen .next-title {
  transition:opacity .4s var(--ease)
}

.next-photo-screen.next-other .next-title {
  opacity:.32
}

.next-more a:hover, .next-more a:focus-visible, .next-more a.on {
  opacity:1;
  transform:translateX(10px)
}

/* Into a section: the frame grows to the whole screen and stays until the next page is there (the home's own way
   out; back on 24.10). */
.hs-handoff {
  position:fixed;
  z-index:40;
  overflow:hidden;
  pointer-events:none
}

.hs-handoff-media {
  position:absolute;
  inset:0
}

.hs-handoff-media > * {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

/* ===== Page changes: the blinds (Daniel, 23.10, night: 01; almirakho.com, measured; site.mjs closeBlinds) =====
   Ten bands of the site's black over everything, the header too; hidden between page changes. */
.route-blinds {
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  grid-template-rows:repeat(10, 1fr);
  pointer-events:none;
  visibility:hidden
}

.route-blinds.on {
  visibility:visible
}

.route-blinds i {
  margin-bottom:-1px;
  background:#060606;
  transform:scaleY(0)
}

/* The viewer says it is loading only after 2 s (premium report, Г5); before that the thumbnail stands in. */
.viewer-stage.waiting::after {
  content:"Зарежда се";
  position:fixed;
  left:50%;
  bottom:5vh;
  transform:translateX(-50%);
  color:#fff;
  font:600 11px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.7;
  pointer-events:none
}

/* ===== Videos after kaiblamey.com (Daniel, 23.10, night: 14; tools/make_videos.py, src/video-list.mjs) ========
   Every clip on the whole screen, one over another; a quiet list in the middle; the clip of the line pointed at
   shows, the last one stays; its few words at the foot. A clip without a sharp export stands as a column. */
body[data-page="motion"] {
  background:#060606
}

body[data-page="motion"] .header {
  color:#fff;
  text-shadow:0 1px 14px rgb(0 0 0 / .4)
}

.vl {
  position:relative;
  min-height:100vh;
  padding:24vh 0 28vh;
  color:#fff
}

.vl-films {
  position:fixed;
  inset:0;
  z-index:0;
  background:#060606
}

.vl-films video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--video-focus, 50% 35%);
  opacity:0;
  transition:opacity .35s linear
}

.vl-films video.column {
  object-fit:contain
}

.vl-films video.on {
  opacity:1
}

.vl-films::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 46% 70% at 50% 50%, rgb(6 6 6 / .5), rgb(6 6 6 / .28))
}

.vl-list {
  position:relative;
  z-index:1;
  width:min(620px, 88vw);
  margin:0 auto;
  display:flex;
  flex-direction:column
}

.vl-row {
  display:grid;
  grid-template-columns:2.6em minmax(0, 1fr) auto;
  gap:16px;
  padding:5px 0;
  color:#fff;
  font:500 12px/1.35 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.48;
  text-shadow:0 1px 12px rgb(0 0 0 / .45);
  transition:opacity .25s linear
}

.vl-row.on, .vl-row:hover, .vl-row:focus-visible {
  opacity:1
}

.vl-row:focus-visible {
  outline:none;
  text-decoration:underline;
  text-underline-offset:4px
}

.vl-n {
  font-variant-numeric:tabular-nums
}

.vl-k {
  text-align:right;
  opacity:.75
}

.vl-about {
  position:fixed;
  z-index:1;
  left:var(--gutter);
  bottom:5vh;
  max-width:30vw;
  margin:0;
  color:#fff;
  font:400 16px/1.45 var(--reading);
  text-shadow:0 1px 14px rgb(0 0 0 / .45)
}

@media (max-width:700px) {
.vl {
  padding:110px 0 14vh
}

.vl-k, .vl-about {
  display:none
}

.vl-row {
  grid-template-columns:2.4em minmax(0, 1fr)
}
}

/* ===== "За мен" after siena.film/about (Daniel, 23.10, night; tools/make_about.py, site.mjs bindAboutSiena;
   measured in docs/research/research_notes/siena.md) ==================================================================
   Black; two arches with her portraits around the statement; the type composition whose words slide into place with
   the scroll; the wall of 36 frames that gathers from a dome into a grid; the cards and the brands with dashed
   outlines, the ticket labels; the end on the continuing film with the invitation rising through the lines. Every
   rule here is the rest state: the script moves things, reduced motion leaves them as they are. */
body[data-page="about"] .header {
  color:#fff;
  text-shadow:0 1px 14px rgb(0 0 0 / .4)
}

.as {
  --as-ink:#f1f0ed;
  --as-dim:rgb(241 240 237 / .62);
  --as-x:34px;
  color:var(--as-ink);
  overflow:clip
}

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

.as-line {
  display:block;
  height:1px;
  background:var(--as-ink);
  opacity:.5;
  transform-origin:0 50%
}

.as-line:nth-child(even) {
  transform-origin:100% 50%
}

.as-eyebrow {
  margin:0 0 1.3rem;
  font:600 10px/1.3 var(--sans);
  letter-spacing:.3em;
  text-transform:uppercase
}

/* The ticket: a white label with two notches, the heading of the cards and the brands. */
.as-ticket {
  display:flex;
  justify-content:center;
  margin:0 0 3rem;
  font:600 13px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase
}

.as-ticket span {
  position:relative;
  padding:.8rem 1.1rem .65rem;
  border-radius:6px;
  background:var(--as-ink);
  color:#060606
}

.as-ticket span:before, .as-ticket span:after {
  content:"";
  position:absolute;
  top:50%;
  width:7px;
  height:7px;
  margin-top:-3.5px;
  border-radius:50%;
  background:#060606
}

.as-ticket span:before {
  left:-3.5px
}

.as-ticket span:after {
  right:-3.5px
}

/* 1. The opening (Daniel, 27.10, after rejecting the plain zoom: "лицето на цял екран … хореография … да промениш
   бекграунда, да и направиш някакви надписи по нея, да изглежда АРТ … разкриване на типография със скрол"): her face on
   the whole screen in the Videos film's red light, "photographic studio · byartph · Plovdiv" thrown on her as light
   (WebGL, src/about-opening.mjs); the stage stands while the section passes three screens and the page's words are
   uncovered line by line (src/site.mjs bindAboutSiena). Without WebGL or motion the still of the same scene stands. */
.as-hero {
  position:relative;
  height:300svh
}

.as-hero-stage {
  position:sticky;
  top:0;
  height:100svh;
  overflow:clip;
  background:#2a0303
}

.as-hero-pic {
  position:absolute;
  inset:0;
  margin:0
}

.as-hero-pic img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 45%
}

.as-hero-gl {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block
}

/* the still waits for the scene from the first paint (else: the whole still, then the pixel cut over it); it comes
   back without WebGL or when the scene is slow (.as-hero-still, src/about-opening.mjs) */
html:not([data-motion="reduce"]) .as-hero:not(.as-hero-still) .as-hero-pic img[data-gl-photo] {
  opacity:0
}

/* the first words wait for the scene from the first paint too (their entrance in src/site.mjs takes them over) */
html:not([data-motion="reduce"]) .as-hero-intro .as-hero-line > span {
  transform:translateY(110%)
}

/* the words' side darker, for the reading; the foot melts into the next section's dark paper */
.as-hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgb(12 1 1 / .62), rgb(12 1 1 / .28) 38%, rgb(12 1 1 / 0) 60%);
  pointer-events:none
}

.as-hero-stage::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:22%;
  background:linear-gradient(to bottom, rgb(6 6 6 / 0), #060606);
  pointer-events:none
}

.as-hero-words {
  position:absolute;
  inset:0;
  z-index:2;
  color:#f1f0ed;
  text-shadow:0 1px 24px rgb(0 0 0 / .35);
  pointer-events:none
}

.as-hero-line {
  display:block;
  overflow:hidden;
  padding:.06em 0 .12em
}

.as-hero-line > span {
  display:block
}

.as-hero-intro, .as-hero-end {
  position:absolute;
  left:var(--as-x);
  width:min(44vw, 640px);
  margin:0;
  font-family:var(--reading);
  font-size:clamp(22px, 2.1vw, 36px);
  line-height:1.28
}

.as-hero-intro {
  top:19svh
}

.as-hero-big {
  position:absolute;
  left:var(--as-x);
  bottom:calc(9svh + 7rem);
  margin:0;
  font-family:var(--serif);
  font-weight:350;
  font-size:clamp(54px, 7.6vw, 150px);
  line-height:.95;
  letter-spacing:-.045em
}

.as-hero-end {
  bottom:9svh
}

/* without motion: the still of the scene (P08-red-*), a screen tall; every line stands, one under another (all of
   them on one screen ran the first words into the statement); the still's dark is the stage's own red-black, so the
   stage runs on under it without an edge */
html[data-motion="reduce"] .as-hero {
  height:auto
}

html[data-motion="reduce"] .as-hero-stage {
  position:relative;
  height:auto;
  min-height:100svh;
  padding:19svh var(--as-x) 9svh
}

html[data-motion="reduce"] .as-hero-pic img {
  bottom:auto;
  height:100svh
}

html[data-motion="reduce"] .as-hero-words {
  position:relative;
  inset:auto
}

html[data-motion="reduce"] :is(.as-hero-intro, .as-hero-big, .as-hero-end) {
  position:relative;
  inset:auto;
  margin:0 0 1.4rem
}

@media (max-width:700px) {
  .as-hero-pic img {
    object-position:50% 34%
  }

  .as-hero-shade {
    background:linear-gradient(to top, rgb(12 1 1 / .7), rgb(12 1 1 / 0) 55%)
  }

  .as-hero-intro {
    top:auto;
    bottom:7svh
  }

  .as-hero-big {
    bottom:calc(7svh + 3.4em);
    font-size:clamp(44px, 13vw, 64px)
  }

  .as-hero-intro, .as-hero-end {
    width:auto;
    right:var(--as-x);
    font-size:19px
  }

  .as-hero-end {
    bottom:7svh
  }

  /* without motion on a phone the words begin at the still's foot */
  html[data-motion="reduce"] .as-hero-stage {
    padding-top:62svh
  }
}

/* 2. The type composition: the words start outside and slide into place as the section passes. */
.as-type {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  padding:12rem 0 4rem;
  overflow:clip
}

.as-titles {
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0 0 0 5%;
  list-style:none;
  font:500 14px/1.65 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase
}

.as-title {
  align-self:flex-start;
  white-space:nowrap
}

.as-titles-l ._2 {
  margin-left:4.5em
}

.as-titles-l ._3 {
  margin-left:7.5em
}

.as-titles-l ._4 {
  margin-left:3.5em
}

.as-titles-r ._2 {
  margin-left:1.4em
}

.as-titles-r ._3 {
  margin-left:-.6em
}

.as-par {
  width:min(100%, 76ch);
  margin:0 0 0 26%;
  color:var(--as-ink);
  font:400 clamp(16px, 1.32vw, 19px)/1.45 var(--reading);
  opacity:.6
}

.as-par-line {
  display:flex;
  justify-content:space-between;
  gap:1.5em;
  margin:0;
  white-space:nowrap
}

.as-par-line:nth-child(5) {
  margin-top:1.3em
}

.as-md {
  display:flex;
  flex-direction:column;
  gap:.1em;
  font:400 clamp(34px, 5.4vw, 78px)/1 var(--serif);
  letter-spacing:-.03em;
  text-transform:uppercase
}

.as-md-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 5%
}

.as-word {
  white-space:nowrap
}

.as-bar {
  display:block;
  width:10%;
  height:5px;
  background:var(--as-ink);
  transform-origin:0 50%
}

.as-xl {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding-right:5%
}

.as-giant {
  margin:0 0 0 -.03em;
  font:400 12.4vw/.9 var(--serif);
  letter-spacing:-.05em;
  text-transform:uppercase
}

.as-titles-r {
  padding:0
}

.as-small {
  position:absolute;
  right:5%;
  top:0;
  display:flex;
  flex-direction:column;
  margin:0;
  font:500 11px/1.4 var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
  /* .5: a contrast of 4.8:1 on the dark paper (at .4 it was 3.4:1; WCAG AA, Daniel, 27.10) */
  opacity:.5
}

/* 3. The wall: 4 × 9 frames on a sticky screen scaled to 85 %, in a box of 180svh. */
.as-wall-wrap {
  min-height:180svh;
  margin:9rem 0 3rem;
  overflow:clip;
  contain:layout paint
}

.as-wall {
  position:sticky;
  top:0;
  height:100svh;
  transform:scale(.85)
}

.as-grid {
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap:6px;
  height:100%;
  margin:0;
  padding:0;
  list-style:none;
  perspective:600px
}

.as-cell {
  position:relative;
  overflow:clip;
  border-radius:2px;
  backface-visibility:hidden;
  will-change:transform, opacity
}

.as-cell a, .as-cell img {
  display:block;
  width:100%;
  height:100%
}

.as-cell img {
  object-fit:cover
}

/* Pointing (Daniel, 24.10: "никъде по страницата няма никакви ефекти на хувър"; then: the wipe "изчезва и се появява,
   отвратително", the titles "изядени"): the letters of every word roll (site.mjs rollText, the .rl rules); the small
   titles and the contact row also get the line from the middle and a little spacing (Contact's legal links, 16.10);
   a card's picture steps closer and its outline turns solid; a frame of the wall steps closer, and "View" follows
   the pointer over the wall, as on the home. */
.as-title a, .as-end-contact a, .as-end-sub a {
  position:relative;
  display:inline-block;
  transition:letter-spacing .45s var(--ease)
}

.as-title a:after, .as-end-contact a:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:50% 50%;
  transition:transform .45s var(--ease)
}

.as-title a:hover, .as-title a:focus-visible, .as-end-contact a:hover, .as-end-contact a:focus-visible {
  letter-spacing:.16em
}

.as-end-sub a:hover, .as-end-sub a:focus-visible {
  letter-spacing:.2em
}

.as-title a:hover:after, .as-title a:focus-visible:after, .as-end-contact a:hover:after, .as-end-contact a:focus-visible:after {
  transform:scaleX(1)
}

.as-card {
  transition:outline-color .5s
}

.as-card:hover {
  outline-style:solid
}

.as-card-img img {
  transition:transform 1.4s var(--ease)
}

.as-cell img {
  transition:transform .8s var(--ease)
}

.as-cell a:hover img, .as-cell a:focus-visible img {
  transform:scale(1.06)
}

.as-view {
  position:fixed;
  left:0;
  top:0;
  z-index:32;
  padding:7px 11px 6px;
  background:#060606;
  color:#fff;
  font:600 11px/1 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), clip-path .3s var(--ease);
  will-change:transform
}

.as-view.on {
  clip-path:inset(0)
}

html[data-motion="reduce"] :is(.as-title a, .as-end-contact a, .as-end-sub a):hover {
  letter-spacing:inherit
}

@media (hover:none) {
.as-view {
  display:none
}
}

/* 4. The cards: a dashed outline, the picture in black and white on the left, the words on the right. */
.as-cards, .as-brands {
  padding:3rem var(--as-x);
  content-visibility:auto;
  contain-intrinsic-size:auto 900px
}

.as-card-list, .as-brand-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none
}

.as-card, .as-brand a {
  display:flex;
  overflow:clip;
  border-radius:12px;
  outline:1px dashed rgb(241 240 237 / .85);
  outline-offset:-1px
}

.as-card-img {
  flex:none;
  width:50%;
  border-right:1px dashed rgb(241 240 237 / .85)
}

.as-card-img img {
  display:block;
  width:100%;
  height:100%;
  min-height:495px;
  object-fit:cover;
  object-position:50% 20%
}

.as-card-text {
  padding:2.1rem
}

.as-card-he {
  max-width:9ch;
  margin:1.4rem 0 2rem;
  font:400 clamp(26px, 2.9vw, 42px)/.98 var(--serif);
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-wrap:balance
}

.as-card-bio {
  margin:0;
  font:400 18px/1.32 var(--reading);
  opacity:.6
}

/* 5. The brands: the same outline, the kind above the name. */
.as-brand a {
  flex-direction:column;
  align-items:center;
  gap:2.6rem;
  padding:1.6rem 2rem 2.4rem;
  text-align:center;
  transition:outline-color .4s, transform .6s var(--ease)
}

.as-brand a:hover, .as-brand a:focus-visible {
  outline-style:solid;
  transform:translateY(-3px)
}

.as-brand .as-eyebrow {
  margin:0
}

.as-brand-he {
  margin:0;
  font:400 clamp(30px, 4.4vw, 64px)/.9 var(--serif);
  letter-spacing:-.02em;
  text-transform:uppercase
}

/* 6. The end: the continuing film, the invitation rising through the lines, the ways to reach her. */
.as-end {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.2rem;
  height:100svh;
  margin-top:5rem;
  padding:0 var(--as-x);
  overflow:clip;
  text-align:center
}

.as-end-film {
  position:absolute;
  inset:0;
  margin:0;
  background:#060606
}

.as-end-film:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgb(6 6 6 / .3), rgb(6 6 6 / .55) 50%, rgb(6 6 6 / .7))
}

.as-end-film video {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--video-focus, 50% 35%);
  transform:translateZ(0)
}

.as-end-words {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  font:400 clamp(44px, 7vw, 100px)/.92 var(--serif);
  letter-spacing:-.03em;
  text-transform:uppercase
}

.as-end-lines {
  position:absolute;
  inset:-.08em 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none
}

.as-of {
  display:block;
  height:1em;
  padding:.04em 0;
  overflow:clip
}

.as-end-word {
  display:block;
  transition:opacity .4s
}

.as-end-word:hover, .as-end-word:focus-visible {
  opacity:.75
}

.as-end-sub {
  position:relative;
  margin:0;
  font:400 clamp(20px, 2vw, 28px)/1.3 var(--reading)
}

.as-end-sub a {
  margin-left:.6em;
  font:600 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:3px
}

.as-end-contact {
  position:absolute;
  left:var(--as-x);
  right:var(--as-x);
  bottom:4svh;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8em 2.4em;
  margin:0;
  padding:0;
  list-style:none;
  font:600 11px/1.6 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85
}

@media (max-width:700px) {
.as {
  --as-x:20px
}

.as-type {
  gap:1.8rem;
  padding:6rem 0 3rem
}

.as-titles {
  font-size:12px
}

.as-par {
  width:auto;
  margin:0 var(--as-x);
  font-size:15px
}

.as-par-line {
  gap:.8em;
  white-space:normal
}

.as-md {
  font-size:9.6vw
}

.as-xl {
  flex-direction:column;
  align-items:flex-start;
  gap:1.2rem;
  padding:0 var(--as-x)
}

.as-giant {
  font-size:24vw
}

.as-small {
  position:static;
  margin-top:.5rem
}

.as-wall-wrap {
  min-height:150svh;
  margin-top:5rem
}

.as-grid {
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows:repeat(6, 1fr);
  gap:3px;
  height:72svh;
  margin-top:14svh
}

.as-card-list, .as-brand-list {
  grid-template-columns:1fr
}

.as-card {
  flex-direction:column
}

.as-card-img {
  width:100%;
  height:18rem;
  border-right:0;
  border-bottom:1px dashed rgb(241 240 237 / .85)
}

.as-card-img img {
  min-height:0
}

.as-card-text {
  padding:1.6rem
}

.as-card-he {
  max-width:none
}

.as-card-bio {
  font-size:16px
}

.as-end-words {
  font-size:14vw
}

.as-end-contact {
  flex-direction:column;
  align-items:center;
  gap:.3em;
  bottom:3svh
}
}

/* ===== Letters that roll when pointed at (Daniel, 24.10: "истинска хореография на типографията при хувър") =====
   site.mjs rollText cuts each word into letters with a twin below; the host (the link, the card) pointed at sends the
   letters up out of the word, one 16 ms after the other, while the twins come up into their place; 0.55 s on the
   fold curve. Reduced motion: no movement. */
.rl {
  position:relative;
  display:inline-block;
  padding:.04em 0;
  margin:-.04em 0;
  overflow:clip;
  vertical-align:bottom;
  white-space:nowrap
}

.rl-a, .rl-b {
  display:block
}

.rl-b {
  position:absolute;
  left:0;
  top:0;
  padding:.04em 0;
  transform:translateY(100%)
}

.rl .l {
  display:inline-block;
  white-space:pre;
  transition:transform .55s cubic-bezier(.76,0,.24,1);
  transition-delay:calc(var(--i) * 16ms)
}

.rl-b .l::before {
  content:attr(data-ch)
}

[data-roll-host]:hover .rl .l, [data-roll-host]:focus-visible .rl .l {
  transform:translateY(-100%)
}

html[data-motion="reduce"] .rl .l {
  transition:none;
  transform:none!important
}

/* ===== 404 (premium report, 12; 24.10): one unique full-screen frame, the title on it, real links; part of the
   world, not a system page. The frame settles from 1.06 to 1, the words rise through their clips, the rest fades;
   reduced motion shows the rest state. */
body[data-page="notfound"] .header {
  color:#fff;
  text-shadow:0 1px 14px rgb(0 0 0 / .4)
}

.nf {
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:100svh;
  padding:120px var(--gutter) 9svh;
  background:#060606;
  color:#f1f0ed;
  overflow:clip
}

.nf-pic {
  position:absolute;
  inset:0;
  margin:0
}

.nf-pic img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 40%;
  animation:nf-settle 1.8s var(--ease) both
}

.nf-pic:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgb(6 6 6 / .25), rgb(6 6 6 / .1) 35%, rgb(6 6 6 / .72) 100%)
}

.nf-copy {
  position:relative;
  display:grid;
  gap:1.4rem;
  max-width:980px
}

.nf .nf-eyebrow {
  max-width:none;
  margin:0;
  font:600 11px/1 var(--sans);
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.75;
  animation:nf-fade 1.2s .1s both
}

.nf h1 {
  margin:0;
  font:400 clamp(42px, 7vw, 112px)/.96 var(--serif);
  letter-spacing:-.025em;
  text-wrap:balance
}

.nf-clip {
  display:block;
  overflow:clip
}

.nf-move {
  display:block;
  padding-top:.06em;
  animation:nf-rise 1.2s cubic-bezier(.25,.1,.25,1) both
}

.nf-clip:nth-child(2) .nf-move {
  animation-delay:.06s
}

.nf p {
  max-width:46ch;
  margin:0;
  font:400 clamp(18px, 1.6vw, 24px)/1.4 var(--reading);
  opacity:.85;
  animation:nf-fade 1.2s .4s both
}

.nf-links {
  display:flex;
  flex-wrap:wrap;
  gap:.4em 2.2em;
  margin:.4rem 0 0;
  padding:0;
  list-style:none;
  font:600 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  animation:nf-fade 1.2s .6s both
}

.nf-links a {
  position:relative;
  display:inline-block;
  padding:10px 0;
  color:inherit;
  text-decoration:none
}

.nf-links a:after {
  content:"";
  position:absolute;
  left:0;
  bottom:5px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease)
}

.nf-links a:hover:after, .nf-links a:focus-visible:after {
  transform:scaleX(1)
}

@keyframes nf-settle {
from {
  transform:scale(1.06)
}

to {
  transform:none
}
}

@keyframes nf-rise {
from {
  transform:translateY(110%)
}

to {
  transform:none
}
}

@keyframes nf-fade {
from {
  opacity:0
}
}

html[data-motion="reduce"] .nf :is(img, .nf-eyebrow, .nf-move, p, .nf-links) {
  animation:none
}

@media (max-width:700px) {
.nf {
  padding:100px 20px 7svh
}

.nf-pic img {
  object-position:58% 30%
}

.nf-copy {
  gap:1rem
}

.nf-links {
  gap:.2em 1.4em
}
}

/* ===== WORK after Almira Kho's WORKS menu (Daniel, 23.10, night; tools/make_work.py, src/work.mjs) =========
   One column of names in capitals from a fifth of the width (Almira: 40 px at 1440, one under another), over the
   cover of the name last pointed at, soft and dimmed on the whole screen; it stays when the pointer leaves the
   names. The name pointed at steps to the right; "Selected" at the left follows it. Dark in both themes: the
   picture behind decides the light. */
body[data-page="gallery"] {
  --gi-paper:#060606;
  --gi-ink:#fff;
  background:var(--gi-paper)
}

body[data-page="gallery"] .header {
  color:#fff;
  text-shadow:0 1px 14px rgb(0 0 0 / .35)
}

.work {
  position:relative;
  min-height:100vh;
  padding:112px 0 16vh;
  color:#fff
}

.work-image {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#060606
}

.work-image img {
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  max-width:none;
  display:block;
  object-fit:cover;
  filter:blur(16px) brightness(.66);
  transition:filter .55s var(--ease)
}

.work-image img.bw {
  filter:grayscale(1) blur(16px) brightness(.66)
}

/* A little more dark behind the names, at the left. */
.work-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgb(6 6 6 / .5), rgb(6 6 6 / .12) 72%);
  transition:opacity .55s var(--ease)
}

/* Into a collection: the picture comes sharp and full before the collection opens on it. */
.work-going .work-image img {
  filter:none
}

.work-going .work-image img.bw {
  filter:grayscale(1)
}

.work-going .work-image::after, .work-going .work-list, .work-going .work-selected {
  opacity:0;
  transition:opacity .3s linear
}

.work-list {
  position:relative;
  z-index:1;
  margin:0 0 0 21%;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.work-list[hidden] {
  display:none
}

.work-list a, .work-toggle {
  display:block;
  overflow:clip;
  margin:0;
  padding:0 0 .05em;
  border:0;
  background:none;
  color:inherit;
  font:500 clamp(28px, 2.8vw, 52px)/1.03 var(--sans);
  letter-spacing:-.012em;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  transition:transform .45s cubic-bezier(.22,.75,.22,1)
}

.work-list a > span, .work-toggle > span {
  display:inline-block
}

.work-list a.on, .work-toggle:hover, .work-toggle:focus-visible {
  transform:translateX(26px)
}

.work-list a:focus-visible, .work-toggle:focus-visible {
  outline:none
}

.work-list a:focus-visible > span, .work-toggle:focus-visible > span {
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.14em
}

.work-toggle sup {
  margin-left:.35em;
  font-size:.3em;
  letter-spacing:.06em;
  vertical-align:top
}

.work-selected {
  position:absolute;
  z-index:1;
  left:var(--gutter);
  top:0;
  margin:0;
  font:600 11px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  clip-path:inset(0 100% 0 0);
  pointer-events:none;
  will-change:transform
}

@media (max-width:700px) {
.work {
  padding:96px 0 12vh
}

.work-list {
  margin:0 20px
}

.work-list a, .work-toggle {
  font-size:clamp(22px, 7.2vw, 30px)
}

.work-selected {
  display:none
}
}

/* ===== Contact after siena.film/contact (Daniel, 25.10: "харесвам Сиена!"; their code read and the page measured:
   docs/research/research_notes/siena.md, "Контакт"; src/contact-siena.mjs plays the arrival and keeps the form).
   One screen in a flat colour of palette A: a small eyebrow, the words in rows the height of the capitals with a
   line over every row and under the last, the facts along the bottom (label + value, a line over and under each),
   the legal links small at the foot. No hover of Siena's; the values roll their letters like every word of the
   site. The form, unchanged, is on a sheet that "Напиши ми" opens; the letter is the sheet over it. */
body:has(.contact-siena) {
  --cs-bg:#b8975f;
  --cs-ink:#292824;
  background:var(--cs-bg)
}

body:has(.contact-siena) .header {
  color:var(--cs-ink)
}

.contact-siena {
  --cs-fs:min(12vw, 20vh);
  --cs-cap:.75;
  --cs-cap-top:.085;
  --co-ink:#292824;
  --co-paper:#f1f0ed;
  --co-label:rgb(41 40 36 / .6);
  --co-line:rgb(41 40 36 / .3);
  --co-gold:#7a6138;
  --co-expo:cubic-bezier(.16,1,.3,1);
  position:relative;
  color:var(--cs-ink)
}

.contact-siena ::selection {
  background:var(--cs-ink);
  color:var(--cs-bg)
}

.contact-siena a {
  color:inherit;
  text-decoration:none
}

/* Until the arrival plays (the page's head sets co-pre before the first paint), everything waits unseen. */
html.co-pre .cs-eyebrow > span, html.co-pre .cs-value {
  transform:translateY(200%)
}

html.co-pre .cs-lines i, html.co-pre .cs-line {
  transform:scaleX(0)
}

html.co-pre .cs-label, html.co-pre .cs-small, html.co-pre .cs-legal {
  opacity:0
}

html.co-pre .cs-row, html.co-pre .cs-lw {
  visibility:hidden
}

.cs-screen {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:100svh;
  padding:90px 0 190px;
  overflow:clip
}

.cs-head {
  width:100%;
  text-align:center
}

.cs-eyebrow {
  margin:0 0 32px;
  overflow:clip;
  font:400 12px/1.1 var(--sans);
  letter-spacing:.3em;
  text-transform:uppercase
}

.cs-eyebrow > span {
  display:block
}

/* The words: Literata's capitals are .75em high and sit .085em under the top of a line box of .8em; the row is
   exactly the capitals, so they touch the lines over and under them (Siena's .7em rows of Neue Brucke). */
.cs-title {
  position:relative;
  margin:0;
  font:900 var(--cs-fs)/1 var(--serif);
  letter-spacing:-.045em;
  text-transform:uppercase
}

.cs-row {
  display:flex;
  justify-content:center;
  height:calc(var(--cs-cap) * 1em);
  overflow:clip
}

.cs-word {
  display:block;
  flex:none;
  margin-top:calc(var(--cs-cap-top) * -1em);
  line-height:.8;
  white-space:nowrap
}

.cs-char {
  position:relative;
  display:inline-block
}

.cs-roll {
  display:block
}

.cs-clone {
  position:absolute;
  left:0;
  top:115%;
  width:100%
}

.cs-lines {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none
}

.cs-lines i, .cs-line {
  display:block;
  height:1px;
  background:var(--cs-ink);
  transform-origin:100% 50%
}

.cs-lines i:nth-child(even) {
  transform-origin:0 50%
}

/* The facts along the bottom: label + value with a line over and under, two to a row, centred. */
.cs-foot {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  padding:0 var(--gutter) 24px
}

.cs-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px 32px;
  width:100%;
  margin:0;
  padding:0;
  list-style:none
}

.cs-item {
  position:relative;
  display:flex;
  justify-content:center;
  width:42vw;
  min-width:0;
  padding:6px 0 4px
}

.cs-link {
  display:flex;
  align-items:flex-end;
  gap:16px;
  max-width:100%
}

.cs-label, .cs-small {
  padding-bottom:3px;
  font:400 10px/1.3 var(--sans);
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap
}

.cs-of {
  display:flex;
  gap:.5em;
  min-width:0;
  overflow:clip
}

.cs-value {
  display:block;
  flex:none;
  border:0;
  margin:0;
  padding:0;
  background:none;
  color:inherit;
  font:400 clamp(22px, 2.36vw, 34px)/1.2 var(--serif);
  letter-spacing:-.02em;
  white-space:nowrap;
  cursor:pointer
}

.cs-line {
  position:absolute;
  left:0;
  right:0;
  top:0
}

.cs-line + .cs-line {
  top:auto;
  bottom:0;
  transform-origin:0 50%
}

.cs-legal {
  display:flex;
  gap:22px;
  font:400 10px/1.3 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase
}

.cs-legal a {
  opacity:.72
}

.cs-legal a:hover, .cs-legal a:focus-visible {
  opacity:1
}

.cs-value:focus-visible, .cs-small:focus-visible, .cs-legal a:focus-visible, .cs-open:focus-visible {
  outline:2px solid var(--cs-ink);
  outline-offset:4px
}

/* The sheet with the form: the site's paper rising over the colour from below; the letter's beige sheet over it. */
.co-form-sheet {
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  justify-items:center;
  align-content:start;
  overflow:auto;
  padding:96px 24px 48px;
  color:var(--co-ink);
  background:var(--co-paper);
  clip-path:inset(100% 0 0 0);
  visibility:hidden;
  transition:clip-path .8s cubic-bezier(.76,0,.24,1), visibility 0s .8s;
  outline:none
}

.co-form-sheet.on {
  clip-path:inset(0);
  visibility:visible;
  transition:clip-path .8s cubic-bezier(.76,0,.24,1)
}

.co-sheet-form {
  width:min(760px, 100%)
}

.co-sheet-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px
}

.co-label {
  display:block;
  font:400 11px/1 var(--sans);
  letter-spacing:.14em;
  color:var(--co-label)
}

.co-close {
  position:relative;
  border:0;
  background:none;
  padding:0 0 6px;
  color:var(--co-ink);
  font:600 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer
}

.co-close span {
  margin-left:.5em;
  opacity:.55
}

.co-close::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--co-ink);
  opacity:.5;
  transition:opacity .3s
}

.co-close:hover::after {
  opacity:1
}

.co-line {
  display:block;
  overflow:clip;
  padding-bottom:.12em;
  margin-bottom:-.12em
}

.co-line > span {
  display:block
}

.co-intro {
  margin:22px 0 0;
  max-width:62ch;
  font:400 18px/1.5 var(--serif)
}

.co-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 32px;
  align-items:start;
  margin-top:26px
}

.co-ask {
  grid-column:1 / -1;
  margin-top:4px
}

.co-ask p {
  margin:4px 0 0;
  font:400 15px/1.45 var(--serif);
  color:rgb(41 40 36 / .8)
}

.co-kinds {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:2px 22px;
  margin-top:-4px;
  font:400 18px/1.5 var(--serif)
}

.co-kinds button, .co-reply button {
  position:relative;
  border:0;
  background:none;
  padding:0;
  color:var(--co-label);
  font:inherit;
  cursor:pointer;
  transition:color .35s var(--ease)
}

.co-kinds button::before, .co-reply button::before {
  content:"";
  position:absolute;
  left:-11px;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--co-gold);
  transform:scale(0);
  transition:transform .35s var(--ease)
}

.co-kinds button:hover, .co-reply button:hover, .co-kinds button[aria-checked="true"], .co-reply button[aria-checked="true"] {
  color:var(--co-ink)
}

.co-kinds button[aria-checked="true"]::before, .co-reply button[aria-checked="true"]::before {
  transform:scale(1)
}

.co-kinds button:focus-visible, .co-reply button:focus-visible, .co-send:focus-visible, .co-close:focus-visible, .co-do :focus-visible {
  outline:2px solid var(--co-gold);
  outline-offset:4px
}

.co-field {
  position:relative;
  min-width:0
}

.co-wide {
  grid-column:1 / -1
}

.co-lab {
  display:block;
  color:var(--co-label);
  font:400 11px/1 var(--sans);
  letter-spacing:.14em;
  transition:color .35s
}

.co-lab small {
  font-size:inherit;
  letter-spacing:inherit;
  opacity:.8
}

.co-field:focus-within .co-lab {
  color:var(--co-ink)
}

.co-box {
  position:relative;
  margin-top:4px
}

.co-box::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--co-line);
  transform-origin:0 50%;
  transition:background .35s, transform .45s var(--co-expo);
  pointer-events:none
}

.co-form.drawing .co-box::after {
  transform:scaleX(0)
}

.co-field:focus-within .co-box::after {
  background:var(--co-ink)
}

.co-field.invalid .co-box::after {
  background:var(--co-gold)
}

.co-box input, .co-box textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:3px 0 8px;
  border:0;
  border-radius:0;
  background:none;
  color:var(--co-ink);
  font:400 18px/1.35 var(--serif);
  outline:none;
  resize:none;
  caret-color:var(--co-gold)
}

.co-box textarea {
  min-height:2.7em
}

.co-opts {
  display:flex;
  gap:0 26px;
  padding:3px 0 8px;
  font:400 18px/1.35 var(--serif)
}

.co-err {
  display:block;
  min-height:0;
  margin-top:4px;
  font:400 11px/1.4 var(--sans);
  color:var(--co-gold)
}

.co-foot {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:10px 24px;
  margin-top:4px
}

.co-status {
  margin:0;
  font:400 11px/1.5 var(--sans);
  color:var(--co-gold)
}

.co-send {
  position:relative;
  flex:none;
  margin-left:auto;
  border:0;
  background:none;
  padding:0 0 6px;
  color:var(--co-ink);
  font:600 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer
}

.co-send::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--co-ink);
  transform-origin:0 50%;
  transition:transform .45s var(--co-expo), background .35s
}

.co-send:hover::after {
  background:var(--co-gold)
}

.co-form.drawing .co-send::after {
  transform:scaleX(0)
}

/* The letter, on the beige of palette A, rising over the sheet; nothing is ever sent. */
.co-preview {
  position:fixed;
  inset:0;
  z-index:51;
  display:grid;
  place-items:center;
  padding:24px;
  color:#292824;
  background:#ece8e1;
  clip-path:inset(100% 0 0 0);
  visibility:hidden;
  transition:clip-path .8s cubic-bezier(.76,0,.24,1), visibility 0s .8s
}

.co-preview.on {
  clip-path:inset(0);
  visibility:visible;
  transition:clip-path .8s cubic-bezier(.76,0,.24,1)
}

.co-sheet {
  width:min(620px, 88vw)
}

.co-letter {
  margin-top:16px;
  font:400 22px/1.45 var(--serif)
}

.co-letter p {
  margin:0 0 .6em
}

.co-do {
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgb(41 40 36 / .35);
  font:600 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase
}

.co-do a, .co-do button {
  position:relative;
  border:0;
  background:none;
  padding:0 0 6px;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer
}

.co-do a::after, .co-do button::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  opacity:.5;
  transition:opacity .3s
}

.co-do a:hover::after, .co-do button:hover::after {
  opacity:1
}

/* a field only robots fill (worker/index.js drops what comes with it) */
.co-hp {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

.co-do [hidden] {
  display:none
}

.co-do button:disabled {
  opacity:.5;
  cursor:default
}

.co-note {
  margin:16px 0 0;
  font:italic 400 15px/1.45 var(--serif);
  color:rgb(41 40 36 / .75)
}

/* The looks for Daniel's choice (25.10, evening: "цвета е гаден ... нищо премиум"): ?look=gold (the flat gold),
   ?look=dark (the site's dark paper with the grain, the words in the ivory, the lines and the labels in gold),
   ?look=photo (her portrait P04 full screen in black and white, the words cut out of it by difference). The words
   are Literata Black 72pt in every look: Siena's power is the heavy, tight face. */
html[data-look="dark"] body:has(.contact-siena), html[data-look="photo"] body:has(.contact-siena) {
  --cs-bg:#060606;
  --cs-ink:#edebe6;
  --cs-gold:#b8975f
}

html[data-look="dark"] .cs-lines i, html[data-look="dark"] .cs-line, html[data-look="photo"] .cs-lines i, html[data-look="photo"] .cs-line {
  background:var(--cs-gold)
}

html[data-look="dark"] .cs-eyebrow, html[data-look="dark"] .cs-label, html[data-look="dark"] .cs-small, html[data-look="dark"] .cs-legal, html[data-look="photo"] .cs-eyebrow, html[data-look="photo"] .cs-label, html[data-look="photo"] .cs-small, html[data-look="photo"] .cs-legal {
  color:var(--cs-gold)
}

html[data-look="dark"] .contact-siena ::selection, html[data-look="photo"] .contact-siena ::selection {
  background:var(--cs-gold);
  color:#060606
}

.cs-pic {
  position:absolute;
  inset:0;
  margin:0;
  overflow:clip
}

.cs-pic img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 38%;
  filter:grayscale(1) contrast(1.06)
}

.cs-pic::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgb(6 6 6 / .35) 0%, rgb(6 6 6 / 0) 30%, rgb(6 6 6 / 0) 55%, rgb(6 6 6 / .82) 100%)
}

html[data-look="photo"] .cs-head {
  position:relative
}

html[data-look="photo"] .cs-head, html[data-look="photo"] .cs-foot {
  z-index:1
}

html[data-look="photo"] .cs-title {
  mix-blend-mode:difference;
  color:#fff
}

/* ?look=letter (25.10, late; Claude's own idea for Daniel's choice): Contact is the letter to Borislava itself, set in
   Literata Black on ruled lines, with the visitor's words in the blanks (the approved letter of 19.10, sentence by
   sentence) and the kind of session as a drum that turns at a click; the preview is the same sheet as always. */
.cs-letter {
  --cs-lh:1.2em;
  --cs-base:1.03em;
  width:min(1240px, 100%);
  padding:0 var(--gutter);
  text-align:left
}

html[data-look="letter"] .cs-head, html[data-look="letter"] .cs-item:first-child {
  display:none
}

html[data-look="letter"] .cs-letter {
  display:block
}

html[data-look="letter"] body:has(.contact-siena), html:not([data-look]) body:has(.cs-letter:not([hidden])) {
  --cs-bg:#060606;
  --cs-ink:#edebe6;
  --cs-gold:#b8975f
}

html[data-look="letter"] .cs-line, html[data-look="letter"] .cs-label, html[data-look="letter"] .cs-small, html[data-look="letter"] .cs-legal {
  color:var(--cs-gold)
}

html[data-look="letter"] .cs-line {
  background:var(--cs-gold)
}

.cs-letter .cs-eyebrow {
  text-align:left;
  color:var(--cs-gold);
  margin-bottom:26px
}

.cs-letter-text {
  margin:0;
  font:900 clamp(26px, 3.9vw, 56px)/var(--cs-lh) var(--serif);
  letter-spacing:-.02em;
  background-image:linear-gradient(transparent var(--cs-base), var(--cs-gold) var(--cs-base), var(--cs-gold) calc(var(--cs-base) + 1px), transparent calc(var(--cs-base) + 1px));
  background-size:100% var(--cs-lh);
  background-repeat:repeat-y
}

html.co-pre .cs-letter-text {
  background-size:0% var(--cs-lh)
}

.cs-lw {
  display:inline-block;
  height:var(--cs-lh);
  overflow:clip;
  vertical-align:top;
  padding-bottom:.3em;
  margin-bottom:-.3em
}

.cs-lw .cs-char {
  position:relative;
  display:inline-block
}

.cs-blank, .cs-pick {
  display:inline-block;
  vertical-align:top;
  min-width:6ch;
  margin:0;
  padding:0 .1em;
  border:0;
  border-bottom:2px solid var(--cs-gold);
  margin-bottom:-2px;
  background:none;
  color:var(--cs-gold);
  font:400 1em/var(--cs-lh) var(--serif);
  letter-spacing:0;
  white-space:pre-wrap;
  outline:none;
  caret-color:var(--cs-gold);
  cursor:text
}

.cs-blank:empty::before {
  content:attr(data-ph);
  opacity:.42
}

.cs-blank:focus {
  border-bottom-color:var(--cs-ink)
}

.cs-blank.invalid {
  border-bottom-color:#e0563a
}

.cs-blank-idea {
  min-width:min(60%, 24ch)
}

.cs-pick {
  cursor:pointer;
  height:var(--cs-lh);
  overflow:clip
}

.cs-pick-of {
  display:block;
  position:relative;
  height:var(--cs-lh)
}

.cs-pick-word {
  display:block;
  white-space:nowrap
}

.cs-pick:hover, .cs-pick:focus-visible {
  color:var(--cs-ink)
}

html.co-pre .cs-blank, html.co-pre .cs-pick, html.co-pre .cs-letter-foot {
  opacity:0
}

.cs-letter-foot {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:10px 24px;
  margin-top:22px
}

.cs-letter-status {
  margin:0;
  font:400 12px/1.5 var(--sans);
  letter-spacing:.04em;
  color:var(--cs-gold)
}

.cs-letter-send {
  position:relative;
  margin-left:auto;
  border:0;
  background:none;
  padding:0 0 6px;
  color:var(--cs-ink);
  font:600 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer
}

.cs-letter-send::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--cs-gold)
}

/* The phone (Siena's: the rows 24vw, the facts one under another, label over value, lines over and under). */
@media (max-width:767px) {
.contact-siena {
  --cs-fs:min(24vw, 14vh)
}

.cs-screen {
  justify-content:flex-start;
  padding:84px 0 0
}

.cs-head {
  margin:auto 0;
  padding:10svh 0
}

.cs-eyebrow {
  margin-bottom:22px
}

.cs-foot {
  position:relative;
  width:100%;
  gap:18px;
  padding:0 24px 24px
}

.cs-list {
  flex-direction:column;
  align-items:stretch;
  gap:14px
}

.cs-item {
  width:100%;
  padding:9px 0 7px
}

.cs-link {
  flex-direction:column;
  align-items:center;
  gap:5px
}

.cs-of {
  justify-content:center;
  max-width:100%
}

.cs-value {
  font-size:clamp(16px, 5.6vw, 24px)
}

.cs-legal {
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 18px
}

.cs-letter {
  padding:0 20px
}

.cs-letter-text {
  font-size:clamp(22px, 7vw, 30px)
}

.co-form-sheet {
  padding:84px 20px 40px
}

.co-form {
  grid-template-columns:1fr;
  gap:16px
}
}

@media (max-height:720px) and (min-width:768px) {
.cs-screen {
  padding-bottom:170px
}

.cs-foot {
  gap:14px
}

.cs-list {
  gap:12px 32px
}

.cs-value {
  font-size:clamp(20px, 2vw, 28px)
}
}

/* ===== The dark theme across the site (Daniel, 22.10: dark is the main colour; 23.10: "Не трябва да има бели
   секции когато сме в тъмен режим!") =========================================================================
   The black of the home prototype that Daniel liked (22.10): near black, a warm white, a warm grey for the
   second voice, the bronze only as a small accent, the film grain; no coloured light (promodex has changed its
   palette since: "новата им палитра не ми харесва", 23.10). The light theme keeps Palette A. */
html[data-theme="dark"] {
  --paper:#060606;
  --beige:#0e0e0d;
  --ink:#edebe6;
  --gold:#b8975f;
  --grey:#9b988f;
  color-scheme:dark
}

html[data-theme="dark"] body[data-page="home"] {
  --home-paper:#060606;
  --home-ink:#fff;
  --home-gold:#b8975f;
  --home-light:#f1f0ed
}

html[data-theme="dark"] body[data-page="gallery"] {
  --gi-ink:#edebe6;
  --gi-gold:#b8975f
}

/* Behind a cover the stage is black in both themes (it was the ink, which turns white in the dark). */
html[data-theme="dark"] .collection-opening, html[data-theme="dark"] .collection-next-photo {
  background:#060606
}

/* The second voice: the cool grey of promodex instead of the ink at 70 %. */
html[data-theme="dark"] :is(.gallery-label, .category-choice small, .field-title>span, .reel-kind, .reel-count, .index-heading>p:not(.project-description), .occasion-heading small, .place-filter small, form small, .form-note) {
  color:var(--grey)
}

html[data-theme="dark"] .co-lab small {
  color:inherit
}

/* The docks on a collection or a story: dark glass with a hairline and white type. */
html[data-theme="dark"] :is(.story-dock, .session-dock) {
  background:rgb(16 17 19 / .9);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1)
}

/* ===== The home as the strip after jasonbergh.com (Daniel, 26.10: "Лентата по Jason Bergh да е началната страница";
   docs/motion/home-jasonbergh-spec.md; src/home-strip.mjs; tools/make_home_strip.py). The sizes are theirs at
   1440 x 900 (their stylesheet and production/r15/reference/jasonbergh/measure/), in vw as theirs (1vw = 14.4 px).
   The names are in Literata until Daniel's trial of TT Ramillas is in (--hst-serif). =========================== */
@font-face{font-family:Literata;src:url("/assets/fonts/literata-italic.woff2") format("woff2");font-style:italic;font-weight:350 600;font-display:swap}

html.home-strip-mode, html.home-strip-mode body { height:100%; overflow:hidden; overscroll-behavior:none }
body[data-page="home"]:has(.home-strip) { background:#060606 }
body[data-page="home"]:has(.home-strip) .header { color:#edebe6; text-shadow:none; transition:opacity .6s }
body[data-page="home"]:has(.home-strip) .header nav { position:static }
html:has(.home-strip.hst-pre) .header, html:has(.home-strip.hst-arriving) .header { opacity:0 }

.home-strip {
  --hst-ink:#edebe6;
  --hst-dim:rgb(237 235 230 / .7);
  --hst-gold:#b8975f;
  --hst-serif:"TT Ramillas", Literata, Georgia, serif;
  --hst-ui:Manrope, system-ui, sans-serif;
  position:fixed; inset:0; z-index:1; overflow:clip;
  color:var(--hst-ink); background:#060606; touch-action:none;
}
.home-strip a { color:inherit }
.home-strip.hst-pre :is(.hst-frame, .hst-bar) { visibility:hidden }
.hst-frame { position:absolute; inset:0 }

/* The picture behind at 60 % (theirs: .background-project-video, brightness(60%)). */
.hst-backdrop { position:absolute; inset:0; z-index:0 }
.hst-layer { position:absolute; inset:0; overflow:hidden }
.hst-layer :is(img, video) { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; filter:brightness(.6) }
.hst-layer img.is-mono { filter:grayscale(1) brightness(.6) }

/* The rulers along the inner edges of the middle column: numbers every 10, 20 %. */
.hst-rulers { position:absolute; inset:0; z-index:1; pointer-events:none }
.hst-ruler {
  position:absolute; top:0; height:100%; overflow:hidden; writing-mode:vertical-rl; white-space:nowrap;
  font:400 max(7px, .5vw)/1 var(--hst-ui); letter-spacing:.04em; word-spacing:2.4em; color:rgb(237 235 230 / .2);
}
.hst-ruler.is-left { left:33.2vw; transform:rotate(180deg) }
.hst-ruler.is-right { left:66.3vw }

/* The name on both sides of the window, the window in the middle (theirs: .project-content, 1fr 34.3vw 1fr). */
.hst-stage {
  position:absolute; inset:0; z-index:2; display:grid; grid-template-columns:1fr 34.3vw 1fr; column-gap:.15vw;
  align-items:center; pointer-events:none;
}
.hst-name {
  display:grid; align-items:center; min-width:0;
  font-family:var(--hst-serif); font-weight:200; font-size:6.6vw; line-height:1.06; letter-spacing:-.02em;
}
.hst-name.is-left { justify-items:end; text-align:right; padding-left:3.5vw }
.hst-name.is-right { justify-items:start; text-align:left; padding-right:3.5vw }
.hst-name-set { grid-area:1/1; max-width:100% }
.hst-name-set.is-long { font-size:5.2vw }
.hst-line { display:block; clip-path:inset(0 -1em 0 -1em); padding:.06em 0 .12em; margin:-.06em 0 -.12em }
.hst-line-in { display:block }
.hst-word { display:inline-block }
.hst-name i, .hst-word i, .hst-half i { font-style:italic; font-weight:200 }

.hst-centre { position:relative; pointer-events:auto }
.hst-window {
  position:relative; display:block; width:34.3vw; height:21.5vw; border-radius:3px; overflow:hidden;
  cursor:pointer; isolation:isolate;
}
.hst-window:focus-visible { outline:1px solid var(--hst-ink); outline-offset:5px }
.hst-window-wrap { position:absolute; inset:0; scale:1.025 }
.hst-win-layer { position:absolute; inset:0; overflow:hidden }
.hst-win-layer :is(img, video) { position:absolute; max-width:none; object-fit:cover }
.hst-win-layer img.is-mono { filter:grayscale(1) }
.hst-corners {
  position:absolute; inset:7px; z-index:2; pointer-events:none; opacity:.8;
  --c:linear-gradient(var(--hst-ink), var(--hst-ink));
  background:var(--c) left top/9px 1px no-repeat, var(--c) left top/1px 9px no-repeat,
    var(--c) right top/9px 1px no-repeat, var(--c) right top/1px 9px no-repeat,
    var(--c) left bottom/9px 1px no-repeat, var(--c) left bottom/1px 9px no-repeat,
    var(--c) right bottom/9px 1px no-repeat, var(--c) right bottom/1px 9px no-repeat;
}
.hst-invite {
  position:absolute; left:50%; top:50%; z-index:3; translate:-50% -50%; display:flex; align-items:center; gap:8px;
  font:500 11px/1 var(--hst-ui); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transition:opacity .4s cubic-bezier(.215,.61,.355,1);
}
.hst-invite i { width:5px; height:5px; border-radius:50%; background:var(--hst-gold) }
.hst-window:is(:hover, :focus-visible) .hst-invite { opacity:1 }

/* The small labels over (26 px) and under (14 px) the window. */
.hst-labels {
  position:absolute; left:0; right:0; display:flex; justify-content:space-between; margin:0;
  font:500 max(10px, .76vw)/1.15 var(--hst-ui); letter-spacing:.06em; text-transform:uppercase; pointer-events:none;
}
.hst-labels.is-top { bottom:calc(100% + 11px) }
.hst-labels.is-bottom { top:calc(100% + 13px) }
.hst-label { display:grid; overflow:clip }
.hst-label-in { grid-area:1/1; display:block; white-space:nowrap }
.hst-label[data-part="count"] { color:var(--hst-dim) }

/* The previous and the next project, small, above and below (16vh, 16:9, 80 %). */
.hst-peek {
  position:absolute; left:50%; z-index:3; width:calc(16vh * 16 / 9); height:16vh; translate:-50% 0;
  padding:0; border:0; border-radius:3px; overflow:hidden; background:#111; cursor:pointer;
}
.hst-peek.is-prev { top:0 }
.hst-peek.is-next { bottom:0 }
.hst-peek-layer { position:absolute; inset:0 }
.hst-peek-layer img { width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition:scale .8s cubic-bezier(.215,.61,.355,1) }
.hst-peek-layer img.is-mono { filter:grayscale(1) brightness(.8) }
.hst-peek:is(:hover, :focus-visible) img { scale:1.05 }
.hst-peek:focus-visible { outline:1px solid var(--hst-ink); outline-offset:3px }

/* The bar at the foot: ©, the strip or the list, the directions, the time on the site. */
.hst-bar {
  position:absolute; left:0; right:0; bottom:0; height:0; z-index:4;
  font:500 11px/1.25 var(--hst-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--hst-dim);
  opacity:0; transition:opacity .6s cubic-bezier(.215,.61,.355,1);
}
.home-strip.hst-bars-in .hst-bar { opacity:1 }
.hst-bar > * { position:absolute; bottom:20px; margin:0 }
.hst-copy { left:1.4vw }
.hst-mode { left:18.6vw; display:flex; gap:7px }
.hst-mode .is-on { color:var(--hst-ink) }
.hst-mode a:is(:hover, :focus-visible) { color:var(--hst-ink) }
/* each direction a 24 px target (WCAG 2.5.8; Daniel, 27.10: "за малките промени ги направи"): the rows 24 px apart, not 17 */
.hst-filters { left:75.2vw; display:flex; flex-direction:column; align-items:flex-start; gap:0 }
.hst-filter {
  display:flex; align-items:center; gap:7px; min-height:24px; padding:0; border:0; background:none; cursor:pointer;
  color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit;
}
.hst-filter i { width:5px; height:5px; border-radius:50%; background:var(--hst-gold); opacity:0; transition:opacity .3s }
.hst-filter.is-on { color:var(--hst-ink) }
.hst-filter.is-on i { opacity:1 }
.hst-filter:is(:hover, :focus-visible) { color:var(--hst-ink) }
.hst-time { left:85.3vw; font-variant-numeric:tabular-nums }

/* The collections as links: for search engines, screen readers and without JavaScript (the noscript shows it). */
.hst-list { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* The arrival, once a session. */
.hst-arrival { position:absolute; inset:0; z-index:20; display:none; background:#060606; cursor:pointer }
.home-strip.hst-arriving .hst-arrival { display:block }
.hst-strip { position:absolute; top:0; width:8.5vw; display:flex; flex-direction:column; gap:2.4vw }
.hst-strip.is-left { left:4vw }
.hst-strip.is-right { right:4vw }
.hst-strip span { display:block; aspect-ratio:16/10; overflow:hidden; border-radius:2px }
.hst-strip img { width:100%; height:100%; object-fit:cover; filter:brightness(.8) }
.hst-strip img.is-mono { filter:grayscale(1) brightness(.8) }
.hst-counter {
  position:absolute; left:50%; top:50%; translate:-50% -50%; margin:0; height:1.1em; overflow:clip;
  font:200 3.3vw/1.1 var(--hst-serif); font-variant-numeric:tabular-nums;
}
.hst-counter-in { display:flex }
.hst-digit { display:block; height:1.1em; overflow:clip }
.hst-reel, .hst-reel span { display:block }
.hst-reel span { height:1.1em }
.hst-wordmark {
  position:absolute; inset:0; display:flex; justify-content:center; align-items:center; margin:0;
  font:200 3.3vw/1.1 var(--hst-serif); letter-spacing:-.02em; pointer-events:none;
}
.hst-half { display:block; overflow:clip; padding:.05em .06em .12em }
.hst-half > span { display:block }
.hst-skip {
  position:absolute; right:1.4vw; bottom:8px; z-index:21; display:none; min-height:44px; padding:12px 0;
  border:0; background:none; color:var(--hst-dim); cursor:pointer;
  font:500 11px/1 var(--hst-ui); letter-spacing:.06em; text-transform:uppercase;
}
.hst-skip:is(:hover, :focus-visible) { color:var(--hst-ink) }
.home-strip.hst-arriving .hst-skip { display:block }

/* The screensaver after 60 s (computer only). */
.hst-saver { position:fixed; inset:0; width:100%; height:100%; z-index:40; opacity:0; pointer-events:none; transition:opacity .6s }
.hst-saver.is-on { opacity:1; pointer-events:auto }

/* Into a collection: the window grows over everything but the header; the rest goes quietly. */
.hst-handoff { position:fixed; inset:0; z-index:25; pointer-events:none; overflow:hidden }
.hst-handoff :is(img, video) { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover }
.hst-handoff img.is-mono { filter:grayscale(1) }
.home-strip.hst-leaving :is(.hst-stage, .hst-peek, .hst-bar, .hst-rulers) { opacity:0; transition:opacity .3s }

/* A phone (theirs at 390 x 844): the name above and below the window, centred; the window the width less 40 px;
   the small frames peep in at the top and the foot; the rulers at the edges. */
@media (max-width:767px) {
  .hst-stage { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:34px }
  .hst-name { font-size:13.6vw; text-align:center; justify-items:center; padding:0 20px; width:100% }
  .hst-name.is-left, .hst-name.is-right { justify-items:center; text-align:center; padding:0 20px }
  .hst-name-set.is-long { font-size:11.8vw }
  .hst-centre { width:calc(100% - 40px) }
  .hst-window { width:100%; height:57vw }
  .hst-labels { font-size:10px }
  /* theirs peep in 240 x 135 at -8vh; here the header covers the top one and the bar meets the foot one: the
     previous goes (the swipe is the way back), the next is small enough to sit between the bar's words */
  .hst-peek.is-prev { display:none }
  .hst-peek.is-next { width:140px; height:79px; bottom:-3vh }
  .hst-ruler.is-left { left:4px }
  .hst-ruler.is-right { left:auto; right:4px }
  .hst-copy, .hst-filters { display:none }
  .hst-mode { left:20px }
  .hst-time { left:auto; right:20px }
  .hst-strip { width:22vw }
  .hst-strip.is-left { left:3vw }
  .hst-strip.is-right { right:3vw }
  .hst-counter, .hst-wordmark { font-size:9vw }
}
html[data-motion="reduce"] :is(.hst-invite, .hst-peek-layer img, .hst-bar, .hst-saver, .hst-filter i) { transition:none }

/* ===== Contact after studiodialect.com/contact (Daniel, 26.10; docs/motion/contact-dialect-spec.md;
   src/contact-dialect.mjs). Their sizes at 1440 (their stylesheet and production/r15/reference/peek/dialect-contact/):
   the email as the title (90 px, two rows, tight), a quiet grid of label and links on the left, the time and a
   picture at the foot on the right, the legal line at the bottom; the sight for a cursor. In the site's dark paper,
   ivory and gold, Manrope. The form sheet keeps its own look (the --co-* colours of 19.10). ===================== */
body:has(.contact-dialect) { background:#060606 }
body:has(.contact-dialect) .header { color:#edebe6 }
.contact-dialect {
  --cd-ink:#edebe6;
  --cd-dim:rgb(237 235 230 / .62);
  --cd-gold:#b8975f;
  --cd-email:6.25vw;
  --co-ink:#292824;
  --co-paper:#f1f0ed;
  --co-label:rgb(41 40 36 / .6);
  --co-line:rgb(41 40 36 / .3);
  --co-gold:#7a6138;
  --co-expo:cubic-bezier(.16,1,.3,1);
  position:relative; color:var(--cd-ink);
}
.contact-dialect ::selection { background:var(--cd-ink); color:#060606 }
.contact-dialect a { color:inherit; text-decoration:none }
html.co-pre .cd-screen { opacity:0 }

.cd-screen { position:relative; min-height:100dvh; padding:120px 1.67vw 0; overflow:clip }
.cd-email { position:relative; display:block; width:100%; outline-offset:6px }
.cd-email-text {
  display:block; width:max-content; max-width:100%;
  font:800 var(--cd-email)/.89 Manrope, system-ui, sans-serif; letter-spacing:-.06em; text-transform:uppercase;
}
.cd-email-row { display:block; white-space:nowrap }
.cd-email.cd-pixelating .cd-email-text { opacity:0 }
.cd-pixels { position:absolute; left:0; top:0; pointer-events:none; image-rendering:pixelated }
.cd-sub { margin:1.25vw 0 0 .3vw }
.cd-open {
  padding:0; border:0; background:none; color:inherit; cursor:pointer;
  font:700 15px/1 Manrope, system-ui, sans-serif; letter-spacing:.02em; text-transform:uppercase;
}
.cd-open:focus-visible, .cd-screen a:focus-visible { outline:1px solid var(--cd-gold); outline-offset:4px }

/* The grid: label | links (theirs FIND US / INTERNAL / EXTERNAL; label column 6.7vw, items in a column). */
.cd-grid { display:grid; grid-template-columns:8vw auto; row-gap:2.25vw; margin:6vw 0 0 .9vw; width:max-content }
.cd-group { display:contents }
.cd-title { margin:0; font:700 11px/1.2 Manrope, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase }
.cd-items { display:flex; flex-direction:column; align-items:flex-start; gap:.55vw; margin:0; font:500 12px/1.25 Manrope, system-ui, sans-serif; color:var(--cd-dim) }
.cd-items a { display:block; transition:color .2s }
.cd-items a:hover { color:var(--cd-ink) }
.cd-row { display:block }
.cd-line { display:block; transform-origin:50% 0 }

/* The side: the time and the film at the foot on the right (theirs: HQ, time, weather and the building). */
.cd-side { position:absolute; right:1.67vw; bottom:calc(1.25vw + 34px); display:flex; align-items:flex-end; gap:1.4vw }
.cd-hq { display:flex; flex-direction:column; align-items:flex-end; margin:0; font:600 11px/1.3 Manrope, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--cd-dim) }
.cd-hq time { color:var(--cd-ink); font-variant-numeric:tabular-nums }
.cd-film { width:25.3vw; height:26.9vw; overflow:hidden; background:#111 }
.cd-film video { width:100%; height:100%; object-fit:cover; display:block }

.cd-legal { position:absolute; left:2.5vw; bottom:16px; display:flex; gap:18px; font:500 11px/1 Manrope, system-ui, sans-serif; letter-spacing:.04em; color:var(--cd-dim) }
.cd-legal a { display:block }
.cd-legal a:hover { color:var(--cd-ink) }
.cd-xy { position:absolute; top:40px; left:50%; translate:-50% 0; display:none; gap:18px; margin:0; font:600 10px/1 Manrope, system-ui, sans-serif; letter-spacing:.06em; color:var(--cd-dim); font-variant-numeric:tabular-nums }
html.cd-sight .cd-xy { display:flex }
.cd-xy b { font-weight:600; color:var(--cd-ink) }

/* The sight: a small cross (1.3vw) and four hairlines across the screen; over a small link it takes the link's
   size with corner brackets and the link turns gold (theirs lemon). */
html.cd-sight .cd-screen, html.cd-sight .cd-screen :is(a, button) { cursor:none }
.cd-cursor {
  position:fixed; left:0; top:0; z-index:60; width:0; height:0; pointer-events:none; opacity:0;
  transition:opacity .4s; mix-blend-mode:difference;
}
.cd-cursor.on { opacity:1 }
.cd-cross { position:absolute; left:-.65vw; top:-.65vw; width:1.3vw; height:1.3vw; transition:opacity .2s }
.cd-cross::before, .cd-cross::after { content:""; position:absolute; background:var(--cd-ink) }
.cd-cross::before { left:0; right:0; top:50%; height:2px; margin-top:-1px }
.cd-cross::after { top:0; bottom:0; left:50%; width:2px; margin-left:-1px }
.cd-cursor.covering { mix-blend-mode:normal }
.cd-cursor.covering .cd-cross, .cd-cursor.labelled .cd-cross { opacity:0 }
.cd-bracket { position:absolute; left:0; top:0; width:var(--w, 0); height:var(--h, 0); translate:-50% -50%; opacity:0; transition:opacity .2s }
.cd-bracket::before {
  content:""; position:absolute; inset:-7px; --b:linear-gradient(var(--cd-gold), var(--cd-gold));
  background:var(--b) left top/8px 2px no-repeat, var(--b) left top/2px 8px no-repeat,
    var(--b) right top/8px 2px no-repeat, var(--b) right top/2px 8px no-repeat,
    var(--b) left bottom/8px 2px no-repeat, var(--b) left bottom/2px 8px no-repeat,
    var(--b) right bottom/8px 2px no-repeat, var(--b) right bottom/2px 8px no-repeat;
}
.cd-cursor.covering .cd-bracket { opacity:1 }
.cd-label {
  position:absolute; left:0; top:0; translate:-50% -50%; scale:0; opacity:0; padding:11px 16px; white-space:nowrap;
  background:var(--cd-gold); color:#060606; font:700 11px/1 Manrope, system-ui, sans-serif; letter-spacing:.06em;
  text-transform:uppercase; transition:scale .2s, opacity .2s;
}
.cd-cursor.labelled { mix-blend-mode:normal }
.cd-cursor.labelled .cd-label { scale:1; opacity:1 }
.cd-hair { position:fixed; z-index:59; background:var(--cd-ink); opacity:0; pointer-events:none; transition:opacity .2s }
.cd-hair.on { opacity:.33 }
.cd-hair.on.covering { opacity:1; background:var(--cd-gold) }
.cd-hair-top { top:0; width:1px; margin-left:-.5px }
.cd-hair-bottom { bottom:0; width:1px; margin-left:-.5px }
.cd-hair-left { left:0; height:1px; margin-top:-.5px }
.cd-hair-right { right:0; height:1px; margin-top:-.5px }
.cd-screen .cd-current { background:var(--cd-gold); color:#060606 !important }

/* A phone (theirs: the email 8.1vw, the groups one under another, the label column 46.8vw); no sight. */
@media (max-width:767px) {
  .contact-dialect { --cd-email:8.12vw }
  .cd-screen { padding:30.5vw 4.06vw 24px; overflow:visible }
  .cd-email-text { line-height:.88 }
  .cd-sub { margin:4vw 0 0 }
  .cd-grid { grid-template-columns:46.8vw 1fr; row-gap:8.12vw; margin:16vw 0 0; width:100% }
  .cd-title { font-size:12px }
  .cd-items { font-size:14px; gap:2vw }
  .cd-side { position:static; flex-direction:column; align-items:stretch; margin-top:12vw; gap:4vw }
  .cd-hq { align-items:flex-start }
  .cd-film { width:100%; height:auto; aspect-ratio:1 }
  .cd-legal { position:static; margin-top:8vw; flex-wrap:wrap }
}
html[data-motion="reduce"] :is(.cd-items a, .cd-legal a, .cd-cursor, .cd-hair, .cd-label, .cd-bracket, .cd-cross) { transition:none }

/* ===== Contact after thelinestudio.com/contact (Daniel, 26.10; docs/motion/contact-theline-spec.md;
   src/contact-line.mjs). Their sizes at 1440 (their contact stylesheet; 12 columns, .46vw gutters): the hero held for
   a screen with a light card (columns 2–9, from 11.17vw), the photograph in front (54.6vw × 48.7 %) and the acetate
   (32.7vw, from 45 % to 5rem below); the details with three square photographs; the coloured block (theirs red,
   ours the palette's accent gold); the last screen held with her film. Palette A, Manrope. ======================= */
body:has(.contact-line) { background:#f1f0ed }
body:has(.contact-line) .header { color:#edebe6; transition:color .4s }
html.cl-paper body:has(.contact-line) .header { color:#292824 }
.contact-line {
  --cl-ink:#292824;
  --cl-paper:#f1f0ed;
  --cl-gold:#7a6138;
  /* Daniel, 26.10: "бордо бяло и черно мисля, че е топ!" (variant C of the colour sheet): the dark parts are bordeaux */
  --cl-black:#4a1c22;
  --cl-end:#060606;
  --cl-ivory:#edebe6;
  --co-ink:#292824;
  --co-paper:#f1f0ed;
  --co-label:rgb(41 40 36 / .6);
  --co-line:rgb(41 40 36 / .3);
  --co-gold:#7a6138;
  --co-expo:cubic-bezier(.16,1,.3,1);
  position:relative; color:var(--cl-ink);
}
.contact-line a { color:inherit; text-decoration:none }
.contact-line ::selection { background:var(--cl-ink); color:var(--cl-paper) }
html.co-pre .contact-line :is(.cl-card, .cl-fg) { visibility:hidden }
.cl-sub { margin:0 0 .81vw; font:600 11px/1.2 Manrope, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase }
.cl-sub em { font-style:normal; opacity:.55; margin-right:.25em }
.cl-open { padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer }
.contact-line :is(a, button):focus-visible { outline:1px solid currentColor; outline-offset:4px }
/* links: a line drawn under them on hover (theirs: scaleX, .8s expo) */
.cl-big a, .cl-address a, .cl-item-list :is(a, button) { position:relative; width:max-content }
.cl-big a::after, .cl-address a::after, .cl-item-list :is(a, button)::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.cl-big a:hover::after, .cl-address a:hover::after, .cl-item-list :is(a, button):hover::after { transform:scaleX(1); transform-origin:left }

/* 1. The hero, held for a screen while the details slide over it. */
.cl-hero { position:relative; height:100svh; z-index:0 }
.cl-hero-scroller { position:absolute; top:0; left:0; right:0; bottom:-100lvh }
.cl-hero-sticky { position:sticky; top:0; height:100svh; overflow:hidden; display:grid; grid-template-columns:repeat(12, 1fr); column-gap:.92vw; padding:0 .46vw }
.cl-hero-bg { position:absolute; inset:0; margin:0 }
.cl-hero-bg img { width:100%; height:100%; object-fit:cover; display:block }
.cl-card { position:relative; grid-column:2 / span 8; margin-top:11.17vw; height:calc(100svh - 11.17vw); padding-left:.46vw }
.cl-card::before { content:""; position:absolute; inset:0 0 -10rem 0; background:rgb(241 240 237 / .95) }
.cl-card-inner { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:.46vw .46vw 2.1vw 0 }
.cl-title { margin:.2vw 0 0; font:600 10.8vw/.86 Manrope, system-ui, sans-serif; letter-spacing:-.055em; white-space:nowrap }
.cl-card-details { margin-top:auto; padding-top:.93vw }
.cl-big { display:flex; flex-direction:column; align-items:flex-start; margin:0 0 2.08vw; font:600 1.875vw/1.15 Manrope, system-ui, sans-serif; letter-spacing:-.01em }
.cl-big .cl-small { margin-top:.5vw; font-size:13px }
.cl-address { margin:0; font:600 13px/1.3 Manrope, system-ui, sans-serif }
.cl-address span { display:block }
.cl-fg { position:absolute; right:.46vw; bottom:0; width:54.63vw; height:48.7%; z-index:2 }
.cl-fg-fig { height:100%; margin:0; overflow:hidden }
.cl-fg-fig img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block }
.cl-acetate, .cl-acetate-text { position:absolute; right:0; top:45%; bottom:-5rem; width:32.7vw }
.cl-acetate { background:var(--cl-black); opacity:.82 }
.cl-acetate-text { display:flex; justify-content:space-between; align-items:flex-start; padding:.35vw .46vw; color:#f8f8f8; font:600 11px/1.2 Manrope, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase }
.cl-acetate-text p { margin:0 }
.cl-acetate-text time { font-variant-numeric:tabular-nums }
/* The studio clock (Daniel, 26.10: "искам такъв часовник"): the place and the time to the second, tracked wide, the numerals tabular. */
.cl-clock-line, .cl-foot-clock { letter-spacing:.12em; font-variant-numeric:tabular-nums }
.cl-foot-clock { position:relative; z-index:1; grid-column:1 / span 3; align-self:end; margin:0; padding:2.4em 0 .46vw 0; font:600 .78vw/1 Manrope, system-ui, sans-serif; text-transform:uppercase; white-space:nowrap }
.cl-foot-clock time { margin-left:.6em }

/* 2. The details: the approved sentence, then three columns with square photographs. */
.cl-details { position:relative; z-index:2; background:var(--cl-paper); padding:2.6vw .92vw 0 }
.cl-intro { margin:.35vw 0 0; max-width:80vw; font:600 3.2vw/1.08 Manrope, system-ui, sans-serif; letter-spacing:-.03em }
.cl-row { display:block; overflow:clip; padding-bottom:.08em; margin-bottom:-.08em }
.cl-row > span { display:block }
/* theirs: three columns of 3/12, the last quarter empty */
.cl-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:6.94vw .92vw; width:calc(75% - .23vw); margin:18.5vw 0 0; padding-bottom:17.8vw }
/* the photograph on the whole screen with the three columns on it (Daniel, 28.10: "описанията да са върху нея и тази
   бяла секция да се махне"): edge to edge, at least a screen tall (taller when the columns need it, on a phone), her face
   in the upper third, the words light at its foot over a dark fall-off; no paper under it. The picture is taller than
   its frame by 16 %, room for the scroll's slow drift (src/contact-line.mjs) */
.cl-details-stage { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:100svh; margin:2.6vw -.92vw 0; padding:0 .92vw 3.5vw; overflow:hidden; background:#1a1917; color:var(--cl-paper) }
.cl-details-stage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:62%; background:linear-gradient(to top, rgb(12 11 10 / .8), rgb(12 11 10 / 0)); pointer-events:none }
.cl-details-fig { position:absolute; inset:0; margin:0; overflow:hidden }
.cl-details-stage .cl-list { position:relative; z-index:2; margin:0; padding:0; text-shadow:0 1px 18px rgb(0 0 0 / .35) }
.cl-details-img { position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; object-position:50% 28%; display:block }
.cl-item .cl-row { display:block; overflow:clip; padding-bottom:.1em; margin-bottom:-.1em }
.cl-item .cl-row > span { display:block }
.cl-item-title .cl-ch { display:inline-block; white-space:pre }
.cl-item-title { margin:0 0 1.62vw; font:600 2.6vw/1 Manrope, system-ui, sans-serif; letter-spacing:-.03em; text-transform:uppercase }
.cl-item-list { list-style:none; margin:0; padding:0; display:grid; gap:1.4vw; justify-items:start; font:600 1.15vw/1.3 Manrope, system-ui, sans-serif }
.cl-item-list small { display:block; margin-bottom:.5vw; font:600 11px/1.2 Manrope, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase }
/* a line with a link is 24 px, so two links one under the other are 24 px apart (WCAG 2.5.8; Daniel, 27.10) */
.cl-item-list .cl-line { display:block }
.cl-item-list .cl-line:has(> a, > button) { min-height:24px }
.cl-item-list time { font-variant-numeric:tabular-nums; letter-spacing:.08em }

/* 3. The brands, in the accent colour (theirs: the red block, the illustration with multiply). */
.cl-brands { position:relative; z-index:2; min-height:100svh; overflow:clip; background:var(--cl-black); color:var(--cl-ivory); padding:2.6vw .92vw .93vw }
/* The grain of the site's dark pages (the rule of 23.10: under the pictures, never over them), on the black parts of this page. */
.cl-brands::before, .cl-foot-inner::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--grain) 0 0 / 180px 180px repeat; opacity:.12; mix-blend-mode:screen; animation:cl-grain 1.5s steps(6) infinite;
}
@keyframes cl-grain { to { background-position:180px 180px } }
.cl-brands-title { position:relative; z-index:1; margin:.35vw 0 21.6vw; font:600 10.8vw/.86 Manrope, system-ui, sans-serif; letter-spacing:-.055em }
.cl-brands-list { position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; row-gap:1.74vw; width:33vw; font:600 2.3vw/1.1 Manrope, system-ui, sans-serif; letter-spacing:-.02em }
.cl-brands-list a { display:block; padding-bottom:.69vw; border-bottom:1px solid currentColor; transition:opacity .3s }
.cl-brands-list a:hover { opacity:.7 }
.cl-brands-film { position:absolute; right:0; bottom:0; z-index:0; width:49.6vw; height:min(100%, 78vh); margin:0; mix-blend-mode:screen }
.cl-brands-film video { width:100%; height:100%; object-fit:cover; display:block }

/* The hero's arrow (theirs: 8.2vw × 9.4vw at the foot of the card, scrolls one screen down). */
.cl-hero-btn { display:flex; width:8.22vw; height:9.43vw; margin:3.3vw 0 .46vw; padding:0; border:0; background:none; color:inherit; cursor:pointer }
.cl-hero-arrow { width:100%; height:100%; transition:transform .8s cubic-bezier(.19,1,.22,1) }
.cl-hero-btn:hover .cl-hero-arrow { transform:translateY(8%) }

/* The coloured block's dot in the middle and line at the right (theirs: .contact-jobs__dot, __meta). */
.cl-dot { position:absolute; left:50%; top:.46vw; width:10px; height:10px; border-radius:50%; background:currentColor; translate:-50% 0; z-index:1 }
.cl-meta { position:absolute; right:.46vw; top:.46vw; margin:0; z-index:1; font:600 .81vw/1.2 Manrope, system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase }

/* 3b. The questions (theirs: .contact-faqs, the photograph of 3/12 held at the left, the accordion in 4–9). */
.cl-faqs { position:relative; z-index:2; background:var(--cl-end); color:var(--cl-ivory); padding:.46vw .92vw 0; margin-bottom:0 }
.cl-faqs-head { margin-bottom:18.5vw }
.cl-faqs-title { position:relative; display:inline-flex; align-items:center; margin:.35vw 0 0; font:600 10.8vw/.86 Manrope, system-ui, sans-serif; letter-spacing:-.055em; clip-path:inset(-.2em -1em -.2em 0) }
.cl-faqs-label { display:flex; white-space:nowrap }
.cl-faqs-title .cl-arrow--clone { width:9.5vw; height:7.97vw; left:0 }
.cl-faqs-title:hover .cl-arrow--clone { transform:translateY(-50%); transition-duration:.8s; transition-delay:.15s }
/* Daniel: "нещо по-арт, да е черно бяла … на цял екран": the photograph is held on the whole screen (as the hero's),
   darkened as the home's backgrounds, and the questions scroll over its right half. */
.cl-faqs-grid { position:relative; margin:0 -.92vw }
.cl-faqs-fig { position:sticky; top:0; height:100svh; margin:0 0 -100svh; overflow:hidden; background:#111 }
.cl-faqs-fig img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; filter:brightness(.55) }
.cl-faqs-list { position:relative; z-index:1; display:flex; flex-direction:column; row-gap:2.89vw; margin-left:50%; padding:14svh 2.5vw 22svh 0 }
.cl-faq-head { position:relative; display:flex; justify-content:space-between; align-items:center; padding-bottom:.69vw }
.cl-faq-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor }
.cl-faq-title { display:flex; align-items:flex-end; margin:0; padding-right:1.74vw; font:600 1.85vw/1.05 Manrope, system-ui, sans-serif; letter-spacing:-.02em }
.cl-faq-id { display:flex; padding:0 .93vw .17vw 0; font:600 11px/1 Manrope, system-ui, sans-serif; letter-spacing:.06em; transition:opacity .09s }
.cl-faq-btn { position:absolute; inset:0; padding:0; border:0; background:none; color:inherit; cursor:pointer }
.cl-faq-btn:focus-visible { outline:1px solid currentColor; outline-offset:4px }
.cl-faq-btn-in { position:absolute; right:0; bottom:.69vw; display:flex; align-items:center; justify-content:center; width:1.33vw; height:1.33vw }
.cl-faq-arrow { width:1.56vw; height:1.79vw; transition:transform .8s cubic-bezier(.19,1,.22,1) }
.cl-faq.is-open .cl-faq-arrow { transform:rotate(-180deg) }
.cl-faq-content { height:1px; overflow:hidden }
.cl-faq-inner { padding-top:.98vw }
.cl-faq-text { max-width:40vw; margin:0; padding:0 0 4vw 2.08vw; font:600 1.15vw/1.45 Manrope, system-ui, sans-serif }

/* 4. The end, theirs 1:1 but the colours and the newsletter: the call with its arrow, the wordmark that tilts −6°,
   the coloured panel held underneath (100dvh sticky), the facts rising 15 % → 0, Borislava with the camera in
   multiply, the line at the foot. The footer's padding is the panel's content height (set from site JS). */
.cl-foot { position:relative; overflow:clip; padding-bottom:var(--cl-foot-pad, 420px); z-index:3 }
.cl-foot-cta-wrap { position:relative; z-index:4; background:var(--cl-paper); padding:17.36vw .46vw 0 }
.cl-foot-cta {
  position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; padding:0; border:0;
  background:none; color:var(--cl-ink); cursor:pointer; font:600 var(--cl-cta, 12.15vw)/.92 Manrope, system-ui, sans-serif; letter-spacing:-.055em; text-align:left;
}
.cl-foot-label { position:relative; display:flex; white-space:nowrap }
.cl-foot-label::before {
  content:""; position:absolute; left:.072em; right:-.065em; bottom:-.87vw; height:1px; background:currentColor;
  transform-origin:left; transition:transform .8s cubic-bezier(.19,1,.22,1) .2s;
}
.cl-foot-cta:is(:hover, :focus-visible) .cl-foot-label::before { transform:scaleX(0); transform-origin:right; transition-delay:0s }
.cl-ch { position:relative; display:inline-block; white-space:pre }
.cl-arrow { position:relative; left:.58vw; flex:none; width:10.7vw; height:8.97vw; transition:transform .8s cubic-bezier(.19,1,.22,1) }
.cl-arrow--clone { position:absolute; left:0; top:50%; transform:translate(-100%, -50%); transition-duration:.4s; transition-delay:0s }
.cl-foot-cta:is(:hover, :focus-visible) .cl-arrow--main { transform:translate(100%) }
.cl-foot-cta:is(:hover, :focus-visible) .cl-arrow--clone { transform:translateY(-50%); transition-duration:.8s; transition-delay:.15s }
.cl-foot-logo-wrap { position:relative; z-index:3 }
.cl-foot-logo { background:var(--cl-paper); padding:17.36vw .46vw .46vw; margin-bottom:.46vw; transform-origin:top left; color:var(--cl-ink) }
/* Manrope: ascent 1.066, descent .3 (content 1.366 em); with line-height 1 the y and p reach .123 em under the box, so the box gets that much. */
.cl-foot-word { display:block; padding-bottom:.13em; font:800 var(--cl-word, 30vw)/1 Manrope, system-ui, sans-serif; letter-spacing:-.075em; white-space:nowrap }
.cl-foot-scroller { position:absolute; top:-50vh; right:0; bottom:0; left:0 }
.cl-foot-sticky { position:sticky; top:0; z-index:2; display:flex; height:100dvh }
.cl-foot-inner { position:absolute; inset:0; display:flex; align-items:flex-end; background:var(--cl-end) }
.cl-foot-inner::before { content:""; position:absolute; left:0; right:0; bottom:calc(100% - 1px); height:10vh; background:var(--cl-end) }
.cl-foot-content {
  position:relative; top:1px; display:grid; grid-template-columns:repeat(12, 1fr); column-gap:.92vw; width:100%;
  padding:0 .46vw; background:var(--cl-end); color:var(--cl-ivory);
}
.cl-foot-content .cl-sub { font-size:12px }
.cl-foot-content .cl-sub em { opacity:.6 }
.cl-foot-contact { position:relative; z-index:1; grid-column:1 / span 3 }
.cl-foot-big { display:flex; flex-direction:column; align-items:flex-start; margin:0; font:600 1.875vw/1.15 Manrope, system-ui, sans-serif; letter-spacing:-.01em }
.cl-foot-big em { font-style:normal; opacity:.6 }
.cl-foot-cols { position:relative; z-index:1; grid-column:8 / -1; display:flex; column-gap:4.5vw; padding-bottom:7.99vw }
.cl-foot-col { flex:none }
.cl-foot-col:first-child { max-width:16vw }
.cl-foot-col:last-child { padding-left:1.62vw }
.cl-foot-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-start }
.cl-foot-col :is(ul, .cl-foot-addr) { font:600 1.25vw/1.25 Manrope, system-ui, sans-serif }
.cl-foot-addr { display:flex; flex-direction:column; align-items:flex-start }
.cl-foot-col a, .cl-foot-big a, .cl-foot-addr span { position:relative }
.cl-foot-col li a::after, .cl-foot-big a::after, .cl-foot-addr span::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.cl-foot-col li a:hover::after, .cl-foot-big a:hover::after, .cl-foot-addr:hover span::after { transform:scaleX(1); transform-origin:left }
.cl-foot-addr span:nth-child(2)::after { transition-delay:.04s }
.cl-foot-col a[aria-current]::after { transform:scaleX(1) }
/* the site's author, quiet, under the columns at the right; a click copies his email (28.10) */
.cl-credit { position:relative; z-index:1; grid-column:8 / -1; margin:0 }
.cl-credit button { position:relative; padding:0 0 3px; border:0; background:none; color:inherit; font:600 .9vw/1.2 Manrope, system-ui, sans-serif; letter-spacing:.02em; opacity:.6; cursor:pointer; transition:opacity .3s }
.cl-credit button::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .8s cubic-bezier(.19,1,.22,1) }
.cl-credit button:is(:hover, :focus-visible) { opacity:1 }
.cl-credit button:is(:hover, :focus-visible)::after { transform:scaleX(1); transform-origin:left }
.cl-foot-bottom {
  position:relative; z-index:1; grid-column:6 / -1; display:flex; justify-content:flex-end; align-items:flex-end; gap:0;
  margin:0; padding:2.4em .46vw .46vw 0; font:600 .78vw/1 Manrope, system-ui, sans-serif; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.cl-foot-bottom i { font-style:normal; opacity:.6; white-space:pre }
.cl-foot-bottom i::before { content:"\00a0" } .cl-foot-bottom i::after { content:"\00a0" }
.cl-up { padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer }
.cl-foot-fig { position:absolute; bottom:0; left:29%; width:26.04vw; margin:0; mix-blend-mode:screen; filter:grayscale(1); opacity:.9; pointer-events:none }
.cl-foot-fig img { width:100%; height:auto; display:block }

@media (max-width:767px) {
  .cl-hero-sticky { padding:0 .8rem; column-gap:.8rem }
  .cl-card { grid-column:1 / -1; margin-top:28vw; height:auto; min-height:calc(100svh - 28vw) }
  .cl-title { font-size:17vw }
  .cl-big { font-size:5.4vw }
  .cl-fg { width:73vw; height:50.3vw }
  .cl-acetate, .cl-acetate-text { top:auto; bottom:0; width:57.7vw; height:37.7vw }
  .cl-intro { max-width:none; font-size:7vw }
  .cl-list { grid-template-columns:1fr; gap:14vw; margin-top:24vw }
  /* on a phone the columns stand one under another: the photograph shows her first (120vw), the words below on its
     darker foot */
  .cl-details-stage { margin:6vw -.92vw 0; padding:120vw .8rem 10vw }
  .cl-details-stage::after { height:78% }
  .cl-details-img { object-position:50% 18% }
  .cl-item-title { font-size:10vw }
  .cl-item-list { font-size:16px; gap:5vw }
  .cl-item-title { font-size:9vw }
  .cl-brands-title { font-size:16vw; margin-bottom:40vw }
  .cl-brands-list { width:100%; font-size:7vw; row-gap:3vw }
  .cl-brands-film { width:100%; height:70vw }
  .cl-hero-btn { width:7.9rem; height:9.1rem; margin-top:auto }
  .cl-dot, .cl-meta { display:none }
  .cl-faqs { margin-bottom:18rem }
  .cl-faqs-head { margin-bottom:15.8rem }
  .cl-faqs-title { font-size:16vw }
  .cl-faqs-grid { margin:0 -.92vw }
  .cl-faqs-fig { height:70svh; margin-bottom:-70svh }
  .cl-faqs-list { margin-left:0; padding:10svh 4.06vw 14svh }
  .cl-faqs-list { row-gap:3.2rem }
  .cl-faq-title { font-size:2rem; line-height:.95; padding-right:4rem }
  .cl-faq-id { display:none }
  .cl-faq-btn-in { width:2.3rem; height:2.3rem; bottom:.8rem }
  .cl-faq-arrow { width:1.8rem; height:2.1rem }
  .cl-faq-text { max-width:none; padding:0 0 3rem; font-size:1.5rem }
  .cl-foot-cols { column-gap:0 }
  .cl-foot-cta { font-size:var(--cl-cta, 15vw) }
  .cl-arrow { width:5.8rem; height:5rem; left:.3rem }
  .cl-foot-cta-wrap { padding-top:25rem }
  .cl-foot-logo { padding-top:25rem }
  .cl-foot-content { grid-template-columns:1fr; padding:0 .8rem }
  .cl-foot-contact, .cl-foot-cols, .cl-foot-bottom, .cl-credit { grid-column:1 / -1 }
  .cl-credit button { font-size:14px; margin-top:6vw }
  .cl-foot-contact { padding-bottom:3rem }
  .cl-foot-big { font-size:5.4vw }
  .cl-foot-cols { flex-direction:column; row-gap:2rem; padding-bottom:4.8rem }
  .cl-foot-col :is(ul, .cl-foot-addr) { font-size:1.6rem }
  .cl-foot-bottom { justify-content:flex-start; font-size:1.1rem; flex-wrap:wrap }
  .cl-foot-clock { grid-column:1 / -1; font-size:1.1rem; padding-bottom:0 }
  .cl-foot-fig { left:20.5vw; width:138vw; opacity:.2 }
}
html[data-motion="reduce"] .cl-brands::before, html[data-motion="reduce"] .cl-foot-inner::after { animation:none }
html[data-motion="reduce"] .cl-big a::after, html[data-motion="reduce"] .cl-address a::after, html[data-motion="reduce"] .cl-item-list a::after, html[data-motion="reduce"] .cl-item-list button::after, html[data-motion="reduce"] .cl-brands-list a, html[data-motion="reduce"] body:has(.contact-line) .header, html[data-motion="reduce"] .cl-foot-label::before, html[data-motion="reduce"] .cl-arrow, html[data-motion="reduce"] .cl-hero-arrow, html[data-motion="reduce"] .cl-foot-col a::after, html[data-motion="reduce"] .cl-foot-big a::after, html[data-motion="reduce"] .cl-foot-addr span::after { transition:none }