/* Mirjan Weddings — site styles v2 (brand refresh, November 2026)
   Surfaces: charcoal, bone, taupe and one orange accent.
   Type: Poppins for display and text, system monospace for spec labels.
   Details: the zigzag M, dot fields, barcodes, orange tags.
   Backups of the previous design: _not-for-upload/backup-before-redesign/ */

/* Poppins 400 from Google Fonts (v24, OFL), self-hosted as WOFF2 subsets. */
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-latin-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url('assets/fonts/poppins-latin-ext-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Brand palette */
  --black:#0d0d0d;
  --charcoal:#1c1c1c;
  --charcoal-2:#262626;
  --bone:#ecebe7;
  --bone-dim:#d3cfc9;
  --taupe:#9d928b;
  --taupe-light:#b8aea6;
  --orange:#e2602b;
  --ink:#151515;
  --ink-soft:#2b2724;
  --mute-dark:#a29b95;
  --mute-light:#5c5955;
  --error-dark:#ffb397;
  /* Type */
  --font-text:Poppins,Arial,sans-serif;
  --font-display:Poppins,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;
  /* Layout */
  --gutter:clamp(20px,4vw,64px);
  --max:1520px;
  --section:clamp(72px,9vw,150px);
}

/* Surfaces: each sets its own text, rule, muted and focus colours. */
.dark{background:var(--charcoal);color:var(--bone);--rule:#3a3a3a;--muted:var(--mute-dark);--strong:var(--bone);--focus:var(--orange)}
.light{background:var(--bone);color:var(--ink);--rule:#c9c5be;--muted:var(--mute-light);--strong:var(--ink);--focus:var(--ink)}
.taupe{background:var(--taupe);color:var(--ink);--rule:#776d66;--muted:var(--ink-soft);--strong:var(--ink);--focus:var(--ink)}
.orange{background:var(--orange);color:var(--ink);--rule:#a5451b;--muted:var(--ink);--strong:var(--ink);--focus:var(--ink)}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--charcoal);color:var(--bone);font:400 16px/1.7 var(--font-text);-webkit-font-smoothing:antialiased;font-synthesis:none}
img{display:block;width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:-.025em;line-height:.95;text-wrap:balance}
p+p{margin-top:1.1em}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus,var(--orange));outline-offset:4px}
.wrap{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}

/* Utilities */
.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}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:12px 18px;background:var(--orange);color:var(--ink);font:400 12px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.micro{font:400 11px/1.45 var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}
.svg-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.barcode{display:inline-block;flex-shrink:0;width:128px;height:28px;color:var(--strong,currentColor);background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 3px,currentColor 3px 4px,transparent 4px 7px,currentColor 7px 10px,transparent 10px 11px,currentColor 11px 12px,transparent 12px 14px,currentColor 14px 16px,transparent 16px 19px,currentColor 19px 20px,transparent 20px 21px,currentColor 21px 24px,transparent 24px 26px,currentColor 26px 27px,transparent 27px 30px,currentColor 30px 32px,transparent 32px 33px,currentColor 33px 34px,transparent 34px 36px,currentColor 36px 39px,transparent 39px 41px,currentColor 41px 42px,transparent 42px 43px,currentColor 43px 45px,transparent 45px 48px,currentColor 48px 49px,transparent 49px 50px,currentColor 50px 53px,transparent 53px 54px,currentColor 54px 55px,transparent 55px 58px,currentColor 58px 60px,transparent 60px 61px,currentColor 61px 62px,transparent 62px 64px)}
.dot-field{background-image:radial-gradient(circle,currentColor 0 1.2px,transparent 1.7px);background-size:16px 16px}
.badge{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid currentColor;border-radius:50%;letter-spacing:.04em}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:0 20px 0 22px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font:400 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn .icon{width:16px;height:16px}
.btn-small{min-height:44px;padding:0 14px 0 16px;gap:16px}
.btn-orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn-orange:hover{background:transparent;color:var(--orange)}
.btn-line:hover{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn-ink:hover{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.55;cursor:wait}
.text-link{display:inline-flex;align-items:center;gap:12px;padding:10px 0 6px;border-bottom:1px solid currentColor;font:400 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;transition:opacity .2s,color .2s}
.text-link .icon{width:15px;height:15px}
.text-link:hover{opacity:.65}
.dark .text-link:hover{opacity:1;color:var(--orange)}

/* Header */
.site-header{position:relative;z-index:5;border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;gap:16px 40px;min-height:78px}
.brand{display:inline-flex;align-items:center;gap:14px;margin-right:auto}
.brand-mark{width:31px;height:32px;color:var(--bone)}
.primary-nav{display:flex;gap:clamp(20px,3vw,44px)}
.primary-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-bottom:1px solid transparent;font:400 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s}
.primary-nav a:hover{border-bottom-color:var(--orange)}

/* Hero */
.hero{padding-top:clamp(24px,3vw,44px);overflow:hidden}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,4vw,64px);padding-bottom:20px;border-bottom:1px solid var(--rule);color:var(--muted)}
.hero-meta .barcode{margin-left:auto}
.hero-meta .badge{color:var(--bone)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:end;padding-top:clamp(40px,6vw,96px)}
.hero-kicker{color:var(--orange);margin-bottom:24px}
.hero h1{font-size:clamp(40px,5.4vw,92px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,44px)}
.hero-media{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(40px,6vw,96px);gap:clamp(12px,1.4vw,20px)}
.hero-photo{aspect-ratio:4/3;overflow:hidden;background:var(--charcoal-2)}
.hero-photo picture{height:100%}
.hero-photo img{height:100%;object-fit:cover;object-position:50% 22%}
.hero-dots{color:#6b655f}
.hero-tag{position:absolute;z-index:1;left:clamp(-40px,-2.4vw,-12px);bottom:clamp(-28px,-2vw,-16px);display:grid;gap:12px;width:clamp(176px,15vw,232px);padding:14px;background:var(--orange);color:var(--ink);--strong:var(--ink)}
.tag-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tag-mark{width:34px;height:35px}
.hero-tag .barcode{width:100%;height:30px}
.hero-wordmark{display:block;width:100%;height:auto;margin:clamp(64px,8vw,128px) 0 clamp(24px,3vw,48px);color:var(--taupe-light)}

/* Sections */
.section{padding-block:var(--section)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 40px;padding-bottom:24px;margin-bottom:clamp(32px,4vw,64px);border-bottom:1px solid var(--rule)}
.section-index{grid-column:1/-1;color:var(--muted)}
.section-head h2{font-size:clamp(34px,6.4vw,104px)}
.section-side{display:flex;align-items:center;gap:18px;color:var(--muted);text-align:right}

/* Films */
.film-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.film-image-link{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--charcoal);color:var(--bone);--focus:var(--ink)}
.film-image-link picture{height:100%}
.film-image-link::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,13,13,.62),rgba(13,13,13,0) 45%,rgba(13,13,13,.28))}
.film-image-link img{height:100%;object-fit:cover;object-position:center;transition:transform .6s ease,filter .6s ease}
.film-card:nth-child(2) .film-image-link img{object-position:35% center}
.film-card:nth-child(3) .film-image-link img{object-position:51% center}
.film-card:nth-child(4) .film-image-link img{object-position:52% center}
.film-number{position:absolute;z-index:1;top:14px;left:14px}
.play-button{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--orange);color:var(--ink);transform:translate(-50%,-50%);transition:transform .25s ease}
.play-button svg{width:18px;height:18px;margin-left:3px;fill:currentColor}
.watch-overlay{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center}
.film-image-link:hover .play-button{transform:translate(-50%,-50%) scale(1.08)}
@media (hover:hover){
  .film-image-link img{filter:grayscale(1)}
  .film-image-link:hover img,.film-image-link:focus-visible img{filter:none;transform:scale(1.03)}
}
.film-card h3{font-size:clamp(18px,1.45vw,24px);line-height:1.05;margin:18px 0 8px}
.film-card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.film-source{max-width:34ch;color:var(--muted)}
.films-footnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid var(--rule)}
.films-footnote p{color:var(--muted)}

/* Introduction */
.intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,8vw,140px);align-items:start}
.intro-copy h3{font-size:clamp(34px,5vw,80px);margin-bottom:clamp(28px,3vw,44px)}
.intro-copy p{max-width:62ch;line-height:1.8}
.intro-copy .text-link{margin-top:32px}
.portrait img{aspect-ratio:370/560;object-fit:cover;object-position:50% 100%}
.portrait figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}

/* Interlude */
.interlude{position:relative;overflow:hidden;background:var(--black);color:var(--bone);--strong:var(--bone)}
.interlude img{height:clamp(380px,50vw,760px);object-fit:cover;object-position:50% 15%}
.interlude::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,13,13,.65),rgba(13,13,13,0) 55%)}
.interlude figcaption{position:absolute;z-index:1;left:0;right:0;bottom:clamp(24px,3.5vw,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.interlude-quote{font:400 clamp(30px,4.4vw,72px)/.95 var(--font-display);text-transform:uppercase;letter-spacing:-.025em}

/* Investment */
.investment-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);align-items:start}
.investment-copy .lead{margin-bottom:28px;font:400 clamp(26px,2.8vw,44px)/1.05 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.investment-copy p:not(.lead){max-width:60ch;color:var(--bone-dim)}
.investment-copy .text-link{margin-top:32px}
.ticket{position:relative;overflow:hidden;display:grid;gap:22px;padding:clamp(22px,2.4vw,34px);background:var(--orange);color:var(--ink);--strong:var(--ink);--focus:var(--ink)}
.ticket>*:not(.ticket-dots){position:relative}
.ticket-dots{position:absolute;right:0;bottom:0;width:48%;height:58%;color:rgba(21,21,21,.3);-webkit-mask-image:linear-gradient(315deg,#000 25%,transparent 85%);mask-image:linear-gradient(315deg,#000 25%,transparent 85%)}
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ticket-head .micro{text-align:right}
.ticket-mark{width:40px;height:41px}
.ticket-title{max-width:10ch;font-size:clamp(30px,3.2vw,52px)}
.ticket-text{max-width:34ch}
.ticket .barcode{width:160px;height:34px}
.ticket-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* Contact */
.contact-band{padding-block:clamp(64px,8vw,130px)}
.contact-band h2{margin:22px 0 clamp(32px,4vw,56px);font-size:clamp(34px,8.6vw,124px)}
.contact-band-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding-top:24px;border-top:1px solid var(--rule)}
.contact-band-foot p{max-width:46ch}
.contact-body{padding-block:clamp(56px,7vw,110px) clamp(40px,5vw,72px)}
.enquiry-panel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,100px);scroll-margin-top:24px}
.enquiry-intro h3{margin-bottom:20px;font-size:clamp(28px,3vw,48px)}
.enquiry-intro p{max-width:32ch;color:var(--muted)}
.enquiry-dots{height:180px;margin-top:40px;color:#4a4744}
.enquiry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.form-field{min-width:0}
.form-field-wide{grid-column:1/-1}
.form-field label{display:block;margin-bottom:10px;color:var(--bone-dim);font:400 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.field-optional{color:var(--mute-dark);letter-spacing:0;text-transform:none}
.form-field input,.form-field textarea{display:block;width:100%;min-width:0;min-height:54px;padding:14px 16px;border:1px solid #4d4a47;border-radius:0;background:var(--charcoal-2);color:var(--bone);font:400 16px/1.5 var(--font-text);color-scheme:dark;transition:border-color .2s}
.form-field textarea{min-height:170px;resize:vertical}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--mute-dark);opacity:1}
.form-field input:hover,.form-field textarea:hover{border-color:#6b6762}
.form-field input:focus-visible,.form-field textarea:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-color:var(--orange)}
.form-field [aria-invalid=true]{border-color:var(--error-dark)}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.enquiry-privacy{margin-top:22px;color:var(--mute-dark);font-size:13px;line-height:1.7}
.enquiry-privacy a,.enquiry-direct a{text-decoration:underline;text-underline-offset:3px}
.enquiry-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:26px}
.enquiry-direct{color:var(--mute-dark);font-size:13px}
.enquiry-direct a{display:inline-block;padding-block:12px;color:var(--bone);overflow-wrap:anywhere}
.enquiry-status{max-width:70ch;min-height:24px;margin-top:20px;font-size:14px;line-height:1.7}
.enquiry-status[data-state=error]{color:var(--error-dark)}
.contact-links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:clamp(48px,6vw,88px);padding-top:16px;border-top:1px solid var(--rule)}
.contact-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:400 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.contact-links a:hover{color:var(--orange)}

/* Footer */
.site-footer{padding-block:32px;background:var(--black);color:var(--mute-dark);--strong:var(--mute-dark);--focus:var(--orange)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.footer-brand svg{display:block;width:140px;height:auto;color:var(--bone)}
.footer-note{margin-right:auto}
.back-top{display:grid;place-items:center;width:44px;height:44px;border:1px solid #3a3a3a;color:var(--bone);transition:border-color .2s,color .2s}
.back-top:hover{border-color:var(--orange);color:var(--orange)}

/* Film player */
.film-is-open{overflow:hidden}
.film-dialog{width:min(1200px,calc(100% - 40px));max-width:none;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);padding:20px;border:1px solid #3a3a3a;background:var(--charcoal);color:var(--bone);overflow:auto;--focus:var(--orange)}
.film-dialog::backdrop{background:rgba(8,8,8,.9)}
.film-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.film-dialog-head h2{font-size:clamp(18px,2vw,28px);line-height:1.1}
.film-dialog-close{flex-shrink:0;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #3a3a3a;background:transparent;color:inherit;font:300 30px/1 Arial,sans-serif;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.film-dialog-close:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.film-player{position:relative;aspect-ratio:16/9;background:#000}
.film-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-dialog-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:16px}

/* Responsive */
@media (max-width:1100px){
  .film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .film-image-link{aspect-ratio:4/3}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero h1{font-size:clamp(36px,10vw,80px)}
  .hero-media{grid-template-columns:minmax(0,1fr) 40px}
  .hero-tag{left:-8px;bottom:-24px}
  .investment-grid,.enquiry-panel{grid-template-columns:minmax(0,1fr)}
  .enquiry-dots{display:none}
}
@media (max-width:760px){
  .header-inner{flex-wrap:wrap;min-height:0;padding-top:14px;gap:12px 20px}
  .primary-nav{order:3;width:100%;justify-content:space-between;gap:8px;border-top:1px solid var(--rule)}
  .primary-nav a{font-size:11px;letter-spacing:.03em}
  .intro-grid{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:420px}
}
@media (max-width:700px){
  .film-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .section-head{grid-template-columns:minmax(0,1fr)}
  .section-side{text-align:left}
  .enquiry-grid{grid-template-columns:minmax(0,1fr)}
  .form-field-wide{grid-column:auto}
  .enquiry-actions{flex-direction:column;align-items:flex-start}
  .interlude figcaption{flex-direction:column;align-items:flex-start}
  .footer-inner .barcode{display:none}
  .hero-meta .barcode{margin-left:0}
  .hero-meta .badge{display:none}
}
@media (max-width:380px){
  .btn{gap:16px;padding-inline:16px}
  .primary-nav a{letter-spacing:0}
}
@media (pointer:coarse){.text-link{min-height:44px}}
@media (max-height:500px) and (orientation:landscape){
  .film-dialog{width:min(980px,calc(100% - 24px),calc((100vh - 180px) * 1.7778 + 24px));max-height:calc(100vh - 16px);padding:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  body,.dark,.taupe,.orange,.site-footer{background:#fff!important;color:#000!important}
  .primary-nav,.header-cta,.hero-actions,.hero-tag,.hero-dots,.back-top,.film-dialog,#wedding-enquiry,.enquiry-dots{display:none!important}
  .film-grid{grid-template-columns:repeat(2,1fr)}
  .film-card{break-inside:avoid}
}