/* devices.css — the template's breakpoints. Desktop is every other sheet as written; this sheet holds each step away
   from it, one block per condition, and stops-guard refuses a condition on the screen's size anywhere else. */

@media not all and (min-width: 72rem) {
  /* the global styles */
  :root { --section: var(--s2); --head-gap: var(--s0); --stack-gap: var(--s-1); --field-gap: var(--s0); }
  h1 { font-size: var(--f4); }
  /* the elements */
  .el-section--bleed-72rem { padding-inline: 0; margin-inline: calc(var(--frame-gutter, 0px) * -1); } .el-section--bleed-72rem > .el-section__inner { --frame-gutter: 0px; }
  .el-split--box > .el-split__media > .el-image { max-height: var(--plate-h); }
}

@media not all and (min-width: 56rem) {
  /* the global styles */
  .choice__opt { min-height: var(--tap); }
  /* the elements */
  /* a lead row: the first button is the ask, filled and on its own line, the rest two across */
  .el-buttons--lead { display: grid; grid-template-columns: 1fr 1fr; }
  .el-buttons--lead > :first-child { grid-column: 1 / -1; --btn-bg: var(--action); --btn-fg: var(--action-text); --btn-bd: var(--action); --btn-bg-hover: color-mix(in srgb, var(--ink) var(--state-hover), var(--action)); --btn-fg-hover: var(--action-text); --btn-bd-hover: color-mix(in srgb, var(--ink) var(--state-hover), var(--action)); --btn-bg-press: color-mix(in srgb, var(--ink) var(--state-press), var(--action)); --btn-fg-press: var(--action-text); --btn-bd-press: color-mix(in srgb, var(--ink) var(--state-press), var(--action)); }
}

@media not all and (min-width: 30rem) {
  /* the global styles */
  :root { --gutter: var(--s1); --field-gap: calc(var(--head-gap) * var(--phi)); }
  /* the template's frames */
  .full-width__wrap { padding: 0; }
  .full-width__card { --frame-gutter: var(--gutter); width: 100%; padding: var(--section) var(--gutter) var(--gutter); }
  .popup__wrap  { padding: 0; align-items: stretch; }
  .popup__card  { width: 100%; min-height: 100dvh; border: 0; background: var(--paper); padding: var(--section) var(--gutter) var(--gutter); }
  .popup__label { display: none; }
  /* a centred head reaches the close control's corner at this width, so it starts below it */
  .popup__card:has([data-optin-beats]:not([hidden])) .request__beat { padding-block-start: var(--tap); }
  /* the elements */
  .el-section--bleed-30rem { padding-inline: 0; margin-inline: calc(var(--frame-gutter, 0px) * -1); } .el-section--bleed-30rem > .el-section__inner { --frame-gutter: 0px; }
  .el-buttons--stack-30rem { flex-direction: column; align-items: flex-start; }
  .el-buttons--stack-30rem.el-buttons--center { align-items: center; }
  .el-buttons--stack-30rem.el-buttons--end { align-items: flex-end; }
  .request__submit { justify-self: stretch; }
  /* an outline around the fields, so a long form reads as one panel and not as the whole screen */
  .full-width .request__form {
    padding: var(--gutter);
    border: 1px solid var(--hairline);
  }
}

@media (min-width: 30rem) {
  /* the global styles */
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields > .field-start { grid-column: 1; }
  /* the elements */
  .el-columns--stack-30rem.el-columns--gap-section { gap: var(--head-gap) var(--section); }
  .el-columns--stack-30rem.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-columns--stack-30rem.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-columns--stack-30rem.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .attendee:has(input + input) { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 56rem) {
  /* the template's frames */
  html { scroll-padding-top: calc(var(--nav-h) + var(--bar-h) + 1px); }
  .header__links { display: flex; }
  .bar { display: flex; }
  .footer__grid {
    grid-template-columns: 1.618fr 1fr 1fr;
    align-items: start; gap: var(--s2);
  }
  .footer__identity { border-top: 1px solid var(--hairline-ink); padding-top: var(--s0); }
  /* the elements */
  .el-columns--stack-56rem.el-columns--gap-section { gap: var(--head-gap) var(--section); }
  .el-columns--stack-56rem.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-columns--stack-56rem.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-columns--stack-56rem.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .el-split--stack-56rem { grid-template-columns: calc((100% - var(--s2)) / var(--phi2)) minmax(0, 1fr); column-gap: var(--s2); }
  .el-split--stack-56rem.el-split--gap-section { grid-template-columns: calc((100% - var(--section)) / var(--phi2)) minmax(0, 1fr); column-gap: var(--section); }
  .el-split--stack-56rem.el-split--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-split--stack-56rem.el-split--reverse > .el-split__media { order: 2; }
  .el-split--stack-56rem.el-split--reverse:not(.el-split--1-1) { grid-template-columns: minmax(0, 1fr) calc((100% - var(--s2)) / var(--phi2)); }
  .el-split--stack-56rem.el-split--reverse.el-split--gap-section:not(.el-split--1-1) { grid-template-columns: minmax(0, 1fr) calc((100% - var(--section)) / var(--phi2)); }
  /* a plate is one block and takes no column gap, whichever stop its stack names */
  .el-split--plate { column-gap: 0; }
  .el-video--line .video__frame { border: 1px solid var(--accent); }
  .el-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-list__link { grid-template-columns: max-content minmax(0, 1fr) calc(var(--measure) / var(--phi2)); column-gap: var(--s2); align-items: start; }
}

@media (min-width: 56rem) and (not (min-width: 72rem)) {
  /* the template's frames */
  .header__link--from-wide { display: none; }
  .header__drop--locations { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 72rem) {
  /* the global styles */
  :root { --crop: 0; }
  /* the video slot takes a phi share of the screen */
  .video { --media-w: calc(100vw / var(--phi)); }
  /* the elements */
  .el-columns--stack-72rem.el-columns--gap-section { gap: var(--head-gap) var(--section); }
  .el-columns--stack-72rem.el-columns--n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-columns--stack-72rem.el-columns--n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-columns--stack-72rem.el-columns--n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .el-text--floats > ul, .el-text--floats > ol { display: flow-root; clear: both; min-width: calc(var(--measure) / var(--sqphi)); }
  .el-split--stack-72rem { grid-template-columns: calc((100% - var(--s2)) / var(--phi2)) minmax(0, 1fr); column-gap: var(--s2); }
  .el-split--stack-72rem.el-split--gap-section { grid-template-columns: calc((100% - var(--section)) / var(--phi2)) minmax(0, 1fr); column-gap: var(--section); }
  .el-split--stack-72rem.el-split--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-split--stack-72rem.el-split--reverse > .el-split__media { order: 2; }
  .el-split--stack-72rem.el-split--reverse:not(.el-split--1-1) { grid-template-columns: minmax(0, 1fr) calc((100% - var(--s2)) / var(--phi2)); }
  .el-split--stack-72rem.el-split--reverse.el-split--gap-section:not(.el-split--1-1) { grid-template-columns: minmax(0, 1fr) calc((100% - var(--section)) / var(--phi2)); }
  .el-split--box { column-gap: 0; align-items: stretch; }
  .el-split--plate { column-gap: 0; }
  .el-split--box > .el-split__media { display: grid; }
  .el-split--box > .el-split__media > .el-image { width: 100%; height: 100%; max-height: none; min-height: calc(50vw / var(--ratio-card)); aspect-ratio: auto; }
  .el-split--plate { --media-w: calc(100% / var(--phi)); padding: var(--section) var(--gutter); }
  .el-split--plate > .el-split__media > .el-image { width: var(--media-w); }
  .el-split--plate > .el-split__body { width: var(--media-w); margin-block-start: var(--plate-lift); margin-inline-start: auto; }
  .el-split--plate.el-split--reverse > .el-split__media > .el-image { margin-inline-start: auto; }
  .el-split--plate.el-split--reverse > .el-split__body { margin-inline-start: 0; margin-inline-end: auto; }
  .el-hero { --plate-h: min(56.25vw, calc(100svh / var(--phi))); }
  .el-video--line-wide .video__frame { border: 1px solid var(--accent); }
  .el-figure--left, .el-figure--right { width: min(calc(var(--measure) / var(--phi2)), var(--fig-w, 100%)); margin-block: var(--stack-gap) var(--head-gap); }
  .el-figure--left { float: left; margin-inline: 0 var(--head-gap); }
  .el-figure--right { float: right; margin-inline: var(--head-gap) 0; }
  .el-roll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-height: 30rem) {
  /* the elements */
  /* a phone on its side: the film gives a √φ step more, so the call still clears the bottom edge */
  .el-section--place-golden .el-video--cap .video__frame { --film-h-golden: min(var(--film-h), calc(100svh / var(--phi) / var(--sqphi))); }
}