/* Photo Booths by Aly & Bry rebuild: shared styles. Geometry per page lives in css/<page>.css. */
@font-face { font-family: 'made mirage regular'; src: url('fonts/made_mirage_regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'mattone'; src: url('fonts/mattone-150.woff') format('woff'); font-display: swap; }
:root {
  --black: #000; --white: #fff; --cream: #f1f0ee; --charcoal: #2c2c2b; --stone: #beb6ac;
  --sand: #e3dfd4; --night: #0f1115; --linen: #f4f0ec;
  --font-display: 'made mirage regular', 'Instrument Serif', Georgia, serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-caps: 'mattone', 'Montserrat', Helvetica, Arial, sans-serif;
  --font-body: 'Poppins', 'Montserrat', Helvetica, Arial, sans-serif;
  --gutter: max(0px, calc((100vw - 1200px) / 2));
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--cream); color: var(--black); overflow-x: hidden; }
img { display: block; }
a { color: inherit; }

/* ---- blocks ------------------------------------------------------------ */
/* overflow-x: clip, at every width (2026-11-08): pieces that run past the 1200 canvas (the header's full-bleed lines, a photo
   hanging off the right edge) are cut at the screen edge the way the live Showit site cuts them, so the page can never sit
   shifted sideways. clip, not hidden: it leaves the vertical overlap between sections alone and keeps the pinned header sticky. */
.sec { position: relative; width: 100%; height: var(--h); overflow-x: clip; }
.sec[hidden] { display: none; }
.cv { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
.cv > *, .view > * { position: absolute; margin: 0; }
.view { position: absolute; inset: 0; display: none; pointer-events: none; }   /* a view spans its block; only its own elements take clicks, so controls under it (the testimonial arrows) stay clickable */
.view > *, .view .cform > * { pointer-events: auto; }
.view.on { display: block; }
.view.fading { display: block; animation: fadeOut .5s ease both; pointer-events: none; }
.view.on.entering { animation: fadeIn .5s ease both; }
.pinned { position: sticky; top: 0; }
.fixed-top { position: fixed; top: 0; left: 0; right: 0; }
.menu { position: fixed; top: 0; left: 0; right: 0; }

/* ---- text (the engine's base classes, values verbatim) --------------------- */
.t-title { color: var(--black); text-transform: uppercase; line-height: 1.01; letter-spacing: 0; font-size: 75px; text-align: left; font-family: var(--font-serif); font-weight: 400; font-style: normal; }
.t-heading { color: var(--black); line-height: 1.401; letter-spacing: 0; font-size: 28px; text-align: left; font-family: var(--font-serif); font-weight: 400; font-style: normal; }
.t-subheading { color: var(--black); text-transform: uppercase; line-height: 1.601; letter-spacing: 0.2em; font-size: 12px; text-align: left; font-family: var(--font-caps); font-weight: 400; font-style: normal; }
.t-paragraph { color: var(--black); line-height: 1.701; letter-spacing: 0; font-size: 16px; text-align: left; font-family: var(--font-body); font-weight: 400; font-style: normal; }
h1, h2, h3 { font-weight: 400; }
.tl { color: inherit; text-decoration: none; display: block; width: 100%; height: 100%; }
p .tl, h1 .tl, h2 .tl { transition: color .5s; }

/* ---- buttons (st-primary / st-secondary) --------------------------------- */
.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; font: inherit;
  border: 1px solid transparent; background: transparent; transition: border-color .5s, background-color .5s, color .5s; }
.btn span { font-family: var(--font-caps); font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.8; white-space: nowrap; color: inherit; transition: color .5s; }
.btn-primary { padding: 10px; border-color: var(--white); color: var(--white); }
.btn-primary:hover { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5); }
.btn-secondary { padding: 5px; border-color: var(--black); color: var(--black); }
.btn-secondary:hover { border-color: var(--white); background: var(--black); color: var(--white); }

/* ---- media ------------------------------------------------------------- */
.ph { background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; display: block; }
a.ph { text-decoration: none; }
.box { display: block; }
.ico { display: block; transition: color .5s, opacity .5s; }
.ico svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.ln { pointer-events: none; }
.vid { object-fit: cover; display: block; background: var(--black); }

/* crossfading slideshow (the engine's cycle-slide) */
.xfade { overflow: hidden; }
.xfade .xf-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.xfade .xf-slide.on { opacity: 1; }

/* contact form fields */
.field::placeholder { color: #757575; }
button.tl { background: transparent; border: 0; padding: 0; cursor: pointer; }

/* entrance animations (Showit trIn via animate.css) */
[data-fx] { visibility: hidden; }
[data-fx].in { visibility: visible; animation: fadeIn var(--d, .5s) ease-out var(--dl, 0s) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-fx].in, .view.fading, .view.on.entering { animation: none !important; }
  .xfade .xf-slide { transition: none; }
}

/* ---- mobile: the Showit phone layout (a 320px canvas, scaled to the phone's width) ----------
   Below 768px every length on the page is N * var(--k), --k = 100vw / 320, so the live site's mobile design
   renders at the same proportions on every phone. Elements Showit shows on one view only carry .only-m / .only-d. */
@media (min-width: 768px) { html .only-m { display: none; } }
@media (max-width: 767px) {
  :root { --k: calc(100vw / 320); }
  html .only-d { display: none; }
  .sec { height: calc(var(--hm, 0) * var(--k)); overflow-x: clip; }   /* Showit lets elements run past the 320 canvas and clips them at the screen edge */
  .cv { width: 100%; }
  .fixed-top { position: sticky; }
  .t-title { font-size: calc(40 * var(--k)); line-height: 1; }
  .t-heading { font-size: calc(24 * var(--k)); line-height: 1.2; }
  .t-subheading { font-size: calc(10 * var(--k)); line-height: 1.6; }
  .t-paragraph { font-size: calc(13 * var(--k)); line-height: 1.7; }
  .btn span { font-size: calc(8 * var(--k)); }
  .btn-primary { padding: calc(10 * var(--k)); }
  .btn-secondary { padding: calc(5 * var(--k)); }
}

/* ---- the inquiry form: FLOW, not a canvas (2026-11-04, for launch) -------------
   The rebuild pinned every box and every field with its own left/top, which the client's
   contact-form editor cannot work with: a question they added would land at the form's
   top left. Now the form is one grid, and adding, removing or reordering a question reflows it.
   The section grows with the form (height is only a minimum, the white card is anchored top
   AND bottom), and only the form's start and the space under it differ by page (--form-top,
   --form-pb, in css/<page>.css). A question left alone on the last row spans the row. */
.sec.sec-contact-form { height: auto; min-height: var(--h); }
.sec-contact-form > .cv { display: flow-root; height: auto; min-height: var(--h); padding-bottom: var(--form-pb); }
.sec-contact-form .view[data-view="view-1"] { position: relative; inset: auto; margin-top: var(--form-top); }
.view > .cform { position: relative; display: grid; grid-template-columns: 416px 416px; column-gap: 19px; row-gap: 20px; width: 851px; margin-left: 175px; }
.field { width: 100%; height: 50px; margin: 0; padding: 0 20px; background: var(--white); border: 1px solid var(--black); border-radius: 2px; outline: 0; resize: none; color: var(--black); font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-align: left; appearance: auto; }
.field:focus { box-shadow: inset 0 0 0 1px var(--black); }
.field::-webkit-date-and-time-value { text-align: left; }
/* appearance: none, or WebKit ignores the padding and radius above and the text starts left of the inputs' */
select.field { -webkit-appearance: none; appearance: none; padding-right: 32px; color: rgba(0,0,0,0.6); white-space: normal; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6 5 2.5 8.500 6M1.500 10 5 13.500 8.500 10' fill='none' stroke='%23000' stroke-opacity='.75' stroke-width='1.500' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 8px 13px; }
/* what the client can add from their portal: a long answer and a checkbox group take the whole row */
textarea.field { grid-column: 1 / -1; height: 130px; padding-top: 14px; padding-bottom: 14px; line-height: 1.5; }
.cform fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; color: var(--black); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
.cform fieldset legend { margin-bottom: 8px; padding: 0; }
.cform fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 8px 0; }
.cform :is(input, select).field:nth-child(odd of input.field, select.field):not(:has(~ input.field, ~ select.field)) { grid-column: 1 / -1; }
.cform button[type="submit"] { grid-column: 1 / -1; justify-self: center; width: 205px; height: 50px; margin-top: 39px; padding: 0; background: var(--black); border: 0; border-radius: 0; color: var(--white); font-size: 10px; line-height: 1; text-align: center; cursor: pointer; }
.cform button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.cform .form-note { grid-column: 1 / -1; margin: 0; color: var(--black); font-family: var(--font-sans); font-size: 14px; line-height: 1.4; text-align: center; }
@media (max-width: 767px) {
  .sec.sec-contact-form { min-height: calc(var(--hm) * var(--k)); }
  .sec-contact-form > .cv { min-height: calc(var(--hm) * var(--k)); padding-bottom: calc(79 * var(--k)); }
  .sec-contact-form .view[data-view="view-1"] { margin-top: calc(14 * var(--k)); }
  .view > .cform { grid-template-columns: 1fr; row-gap: calc(17.7 * var(--k)); width: calc(240 * var(--k)); margin-left: calc(41 * var(--k)); }
  .field { height: calc(41 * var(--k)); padding: 0 calc(20 * var(--k)); font-size: calc(11 * var(--k)); line-height: 1.5; }
  select.field { height: calc(52 * var(--k)); padding-right: calc(30 * var(--k)); background-position: right calc(12 * var(--k)) center; background-size: calc(7 * var(--k)) calc(11 * var(--k)); }   /* the long labels wrap to two lines here */
  textarea.field { height: calc(100 * var(--k)); padding-top: calc(11 * var(--k)); padding-bottom: calc(11 * var(--k)); }
  .cform fieldset { font-size: calc(11 * var(--k)); }
  .cform button[type="submit"] { justify-self: stretch; width: auto; height: calc(46 * var(--k)); margin-top: calc(11.3 * var(--k)); font-size: calc(10 * var(--k)); }
  .cform .form-note { font-size: calc(12 * var(--k)); }
}

/* ---- 768 to 1199 wide (tablets, a narrowed desktop window): the desktop canvas, scaled to fit -------------
   The live Showit site scales its 1200px desktop canvas to the window between the phone break and 1200 (measured
   2026-11-08: its home page is 7321px tall at 1200 wide, 6247 at 1024, 5003 at 820 and 4685 at 768, exactly width / 1200).
   The rebuild did not: the 1200px canvas sat unscaled and cut off on the right, so on an iPad the menu button was off the
   screen and the right column of the inquiry form could not be reached. zoom, not a transform: it scales layout as well
   (a transform leaves the page its full height) and the pinned header and the fixed menu keep working.
   The steps are the fallback for a browser that cannot divide one length by another (the canvas then sits centred, at
   most 14px narrower than the window); the last rule is the exact fit and wins wherever it parses.
   NEVER write the ratio as tan(atan2(100vw, 1200px)): WebKit 26 reads the angle in degrees and zooms the page to 260 percent. */
@media (max-width: 1199px) {
  @media (min-width: 768px) { html { zoom: 0.64; } } @media (min-width: 780px) { html { zoom: 0.65; } } @media (min-width: 792px) { html { zoom: 0.66; } }
  @media (min-width: 804px) { html { zoom: 0.67; } } @media (min-width: 810px) { html { zoom: 0.675; } } @media (min-width: 820px) { html { zoom: 0.6833; } }
  @media (min-width: 834px) { html { zoom: 0.6949; } } @media (min-width: 846px) { html { zoom: 0.705; } } @media (min-width: 858px) { html { zoom: 0.715; } }
  @media (min-width: 870px) { html { zoom: 0.725; } } @media (min-width: 882px) { html { zoom: 0.735; } } @media (min-width: 894px) { html { zoom: 0.745; } }
  @media (min-width: 906px) { html { zoom: 0.755; } } @media (min-width: 918px) { html { zoom: 0.765; } } @media (min-width: 930px) { html { zoom: 0.775; } }
  @media (min-width: 942px) { html { zoom: 0.785; } } @media (min-width: 954px) { html { zoom: 0.795; } } @media (min-width: 966px) { html { zoom: 0.805; } }
  @media (min-width: 978px) { html { zoom: 0.8149; } } @media (min-width: 990px) { html { zoom: 0.825; } } @media (min-width: 1002px) { html { zoom: 0.835; } }
  @media (min-width: 1014px) { html { zoom: 0.845; } } @media (min-width: 1024px) { html { zoom: 0.8533; } } @media (min-width: 1036px) { html { zoom: 0.8633; } }
  @media (min-width: 1048px) { html { zoom: 0.8733; } } @media (min-width: 1060px) { html { zoom: 0.8833; } } @media (min-width: 1072px) { html { zoom: 0.8933; } }
  @media (min-width: 1080px) { html { zoom: 0.9; } } @media (min-width: 1092px) { html { zoom: 0.91; } } @media (min-width: 1104px) { html { zoom: 0.92; } }
  @media (min-width: 1112px) { html { zoom: 0.9266; } } @media (min-width: 1124px) { html { zoom: 0.9366; } } @media (min-width: 1133px) { html { zoom: 0.9441; } }
  @media (min-width: 1145px) { html { zoom: 0.9541; } } @media (min-width: 1157px) { html { zoom: 0.9641; } } @media (min-width: 1169px) { html { zoom: 0.9741; } }
  @media (min-width: 1180px) { html { zoom: 0.9833; } } @media (min-width: 1194px) { html { zoom: 0.995; } }
  @media (min-width: 768px) { html { zoom: calc(100vw / 1200px); } }
}
/* Safari never draws text smaller than 9px once a page is zoomed (a size written as 9px or more that the zoom takes under
   9px is held at 9px), so below 900 wide the 11px and 12px caps come out up to a sixth larger than their boxes were drawn for and
   three pieces of the canvas run out of room: the home page's FAQ questions take a second line (it sat on the rule under
   it), its longest answers ran 6px past the bottom of their bordered box, and "Wedding Content Creation" in the footer
   takes a third line (it ran into "Inquire"). Closer lines in those three places, so the text fits where it is; a
   browser without that floor only sees the same lines a little closer together. */
@media (min-width: 768px) and (max-width: 899px) {
  .sec-faq-simple-layout-desktop .t-subheading { line-height: 1.25; }
  .sec-faq-simple-layout-2 .t-subheading { line-height: 1.3; }
  .sec-footer-1 .e-footer_wcc { line-height: 1.35; }
}