/*
Theme Name: Frames Inc. Photography
Theme URI: https://frames.ink
Author: Frames Inc.
Description: Cinematic photography and videography portfolio theme for Frames Inc.
Version: 1.0.0
*/

    :root { --ink:#080808; --paper:#f2f0eb; --muted:#9b9b94; --gold:#dba419; --line:rgba(242,240,235,.16); }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,system-ui,sans-serif; }
    a { color:inherit; text-decoration:none; }
    .shell { width:min(1240px, calc(100% - 48px)); margin:auto; }
    .mono { font:500 11px/1.3 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
    header { position:absolute; z-index:3; top:0; left:0; right:0; padding:26px 0; }
    nav { display:flex; align-items:center; justify-content:space-between; }
    .mini-mark { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; }
    .mini-mark img { width:37px; height:37px; object-fit:cover; border-radius:50%; border:1px solid rgba(255,255,255,.35); }
    .nav-links { display:flex; gap:28px; color:#d0d0ca; }
    .nav-links a { transition:color .2s; } .nav-links a:hover { color:var(--gold); }
    .nav-cta { border:1px solid rgba(255,255,255,.45); border-radius:100px; padding:11px 17px; font-size:12px; }
    .hero { min-height:780px; display:grid; align-items:end; position:relative; overflow:hidden; background:radial-gradient(circle at 78% 28%, rgba(219,164,25,.16), transparent 30%), linear-gradient(120deg,#050505 0%,#11100d 56%,#1b160e 100%); }
    .hero:before { content:''; position:absolute; inset:0; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
    .hero-art { position:absolute; right:4%; top:15%; width:min(650px,57vw); aspect-ratio:1; opacity:.9; filter:drop-shadow(0 24px 60px rgba(0,0,0,.45)); }
    .hero-art img { width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; }
    .hero-copy { position:relative; z-index:1; padding:170px 0 80px; max-width:760px; }
    .eyebrow { color:var(--gold); margin-bottom:25px; }
    h1 { font-size:clamp(62px,10vw,145px); line-height:.86; letter-spacing:-.08em; margin:0 0 31px; max-width:780px; }
    h1 span { color:var(--gold); }
    .hero-sub { display:flex; gap:36px; align-items:end; max-width:620px; }
    .hero-sub p { color:#bbbcb5; font-size:16px; line-height:1.6; max-width:390px; margin:0; }
    .round-arrow { width:68px; height:68px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:var(--gold); font-size:25px; }
    .ticker { border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:17px 0; color:#bbb; }
    .ticker-track { display:inline-flex; gap:35px; animation:slide 20s linear infinite; }
    .ticker b { color:var(--gold); font-weight:500; }
    @keyframes slide { to { transform:translateX(-20%); } }
    section { padding:120px 0; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:46px; }
    .section-head h2 { font-size:clamp(38px,6vw,82px); letter-spacing:-.07em; line-height:.9; margin:0; max-width:670px; }
    .section-head p { color:var(--muted); line-height:1.65; max-width:320px; margin:0; }
    .intro { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
    .intro-copy { font-size:clamp(23px,3vw,40px); letter-spacing:-.04em; line-height:1.15; }
    .intro-copy em { color:var(--gold); font-style:normal; }
    .intro-detail { border-top:1px solid var(--line); padding-top:19px; color:var(--muted); line-height:1.8; }
    .service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .service { padding:32px 28px 35px 0; border-right:1px solid var(--line); }
    .service:not(:first-child) { padding-left:28px; } .service:last-child { border:0; }
    .service-num { color:var(--gold); margin-bottom:54px; } .service h3 { margin:0 0 12px; font-size:25px; letter-spacing:-.04em; } .service p { margin:0; color:var(--muted); line-height:1.65; font-size:14px; }
    .gallery-section { background:var(--paper); color:var(--ink); }
    .gallery-section .section-head p { color:#777870; }
    .filters { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px; }
    .filter { border:1px solid #c3c1b9; background:transparent; border-radius:100px; padding:10px 15px; color:#555650; cursor:pointer; font:500 11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
    .filter.active, .filter:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:155px; gap:12px; }
    .tile { position:relative; overflow:hidden; background:#d3d0c7; cursor:pointer; min-height:0; }
    .tile:nth-child(1) { grid-column:span 7; grid-row:span 3; } .tile:nth-child(2) { grid-column:span 5; grid-row:span 2; } .tile:nth-child(3) { grid-column:span 5; grid-row:span 1; } .tile:nth-child(4) { grid-column:span 4; grid-row:span 2; } .tile:nth-child(5) { grid-column:span 4; grid-row:span 2; } .tile:nth-child(6) { grid-column:span 4; grid-row:span 2; }
    .tile img { width:100%; height:100%; object-fit:cover; transition:transform .5s; } .tile:hover img { transform:scale(1.05); }
    .tile:after { content:'↗'; position:absolute; right:15px; top:13px; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.55); color:white; opacity:0; transition:opacity .2s; } .tile:hover:after { opacity:1; }
    .tile-label { position:absolute; left:15px; bottom:14px; color:white; font-size:13px; text-shadow:0 1px 15px #000; }
    .video-tile { background:linear-gradient(135deg,#38362e,#a47818); display:grid; place-items:center; } .play { width:70px; height:70px; border:1px solid rgba(255,255,255,.7); border-radius:50%; display:grid; place-items:center; font-size:22px; padding-left:4px; color:white; }
    .hidden { display:none; }
    .contact { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; }
    .contact h2 { font-size:clamp(48px,8vw,110px); line-height:.88; letter-spacing:-.08em; margin:0; } .contact h2 span { color:var(--gold); }
    .contact-card { border-top:1px solid var(--line); padding-top:21px; } .contact-card p { color:var(--muted); line-height:1.7; max-width:350px; } .contact-link { display:inline-flex; border-bottom:1px solid var(--gold); padding-bottom:8px; margin-top:18px; color:var(--gold); }
    footer { padding:25px 0; border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; }
    .modal { position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.84); display:none; place-items:center; padding:25px; } .modal.open { display:grid; } .modal-inner { max-width:min(900px,95vw); max-height:90vh; position:relative; } .modal img { max-width:100%; max-height:80vh; display:block; } .close { position:absolute; right:-8px; top:-42px; background:none; color:white; border:0; font-size:28px; cursor:pointer; }
    @media(max-width:760px) { .shell{width:min(100% - 32px,1240px)} .nav-links{display:none}.hero{min-height:720px}.hero-art{right:-20%;top:18%;width:100vw;opacity:.54}.hero-copy{padding-top:155px}.hero-sub{display:block}.round-arrow{margin-top:28px}.intro,.contact{grid-template-columns:1fr;gap:35px}.service-grid{grid-template-columns:1fr}.service,.service:not(:first-child){padding:25px 0;border-right:0;border-bottom:1px solid var(--line)}.service-num{margin-bottom:25px}.gallery{grid-auto-rows:115px;gap:8px}.tile:nth-child(n){grid-column:span 6;grid-row:span 2}.tile:nth-child(1),.tile:nth-child(2){grid-column:span 12}.tile:nth-child(3){grid-column:span 12}.section-head{display:block}.section-head p{margin-top:20px}section{padding:78px 0}footer{display:block}.footer-right{margin-top:10px} }
    form.contact-card { display:grid; gap:10px; } form.contact-card label { color:var(--gold); margin-top:12px; } form.contact-card input, form.contact-card textarea { width:100%; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--paper); padding:14px 0; font:16px/1.5 Manrope,system-ui,sans-serif; outline:none; } form.contact-card textarea { resize:vertical; } form.contact-card input:focus, form.contact-card textarea:focus { border-color:var(--gold); } form.contact-card button { justify-self:start; margin-top:14px; background:transparent; color:var(--paper); cursor:pointer; }