/*
Theme Name: Rimsha UGC Portfolio
Theme URI: https://example.com
Author: Rimsha
Description: A one-page UGC creator portfolio theme, built to match the "UGC Lifestyle Content Creator" portfolio deck. Every photo, logo and gallery image is editable from Appearance -> Customize -> Portfolio Images, with no code changes needed.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rimsha-ugc-portfolio
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root{
  --color-bg:#f3f2f2;--color-surface:#eae9e9;--color-text:#201f1d;
  --color-accent:#b68235;--color-accent-2:#ac803e;
  --color-divider:color-mix(in srgb,#201f1d 16%,transparent);
  --color-neutral-100:#f8f4f4;--color-neutral-200:#eae7e7;--color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6;--color-neutral-500:#9b9797;--color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d;--color-neutral-800:#444141;--color-neutral-900:#2d2b2b;
  --color-accent-100:#fff3e4;--color-accent-200:#ffe3bf;--color-accent-300:#facb8d;
  --color-accent-400:#e1ad66;--color-accent-500:#c28d41;--color-accent-600:#a06f24;
  --color-accent-700:#7d5411;--color-accent-800:#5a3b0a;--color-accent-900:#3a270d;
  --font-heading:"Cormorant Garamond",system-ui,serif;
  --font-heading-weight:600;
  --font-body:"Lora",system-ui,serif;
  --space-1:4.6px;--space-2:9.2px;--space-3:13.8px;--space-4:18.4px;--space-6:27.6px;--space-8:36.8px;--space-10:46px;--space-12:55px;
  --radius-sm:2px;--radius-md:4px;--radius-lg:7px;
  --shadow-sm:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:16px;line-height:1.6;font-weight:400}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-heading-weight);line-height:1.12;letter-spacing:-0.015em;margin:0 0 var(--space-2)}
h1{font-size:56px}
h2{font-size:38px}
h3{font-size:26px}
h6{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);font-weight:600}
p{margin:0 0 var(--space-3)}
a{color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-accent-700)}
img{display:block;max-width:100%}
figure{margin:0}
figcaption{font-size:12px;margin-top:var(--space-1);color:color-mix(in srgb,var(--color-text) 55%,transparent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
.hr{height:1px;border:0;margin:var(--space-8) 0;background:var(--color-divider)}

.plate{filter:sepia(.22) saturate(.82) contrast(1.05);box-sizing:border-box;border:6px solid var(--color-surface);outline:1px solid var(--color-divider);width:100%;height:100%;object-fit:cover}
.plate-wrap{background:var(--color-surface);border:1px solid var(--color-divider)}

.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;
  border:1.5px dashed var(--color-accent-400);background:var(--color-accent-100);color:var(--color-accent-700);
  font-family:var(--font-body);font-size:13px;line-height:1.5;padding:var(--space-4)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid transparent;padding:var(--space-2) calc(var(--space-4) * 1.2);border-radius:var(--radius-md)}
.btn-primary{color:var(--color-accent-700);border-color:var(--color-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.btn-primary:active{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}

.tag{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.02em;padding:5px 14px;border-radius:calc(var(--radius-md)*.75)}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-outline{border:1px solid var(--color-accent);color:var(--color-accent-700)}

.nav{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-8);border-bottom:1px solid var(--color-divider);max-width:1180px;margin:0 auto}
.nav-brand{font-family:var(--font-heading);font-weight:600;font-size:20px;margin-right:auto}
.nav a{color:inherit;text-decoration:none;font-size:14px;letter-spacing:.03em}
.nav a:hover{color:var(--color-accent)}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-8)}
.section{padding:var(--space-12) 0}
.kicker{color:var(--color-accent-700)}

/* — hero / about — */
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-8);align-items:center}
.hero-photo{aspect-ratio:4/5}
.contact-row{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:var(--space-6);font-size:14px}
.contact-row span{color:color-mix(in srgb,var(--color-text) 65%,transparent)}

/* — niches — */
.niche-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.niche-photo{aspect-ratio:1/1}
.client-row{display:flex;gap:var(--space-6);margin-top:var(--space-8);align-items:center;flex-wrap:wrap}
.client-logo{width:140px;height:70px}

/* — insights — */
.insights-photo{aspect-ratio:16/8}

/* — galleries — */
.gallery-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.gallery-6{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.gallery-photo{aspect-ratio:3/4}
.trendy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-6)}
.trendy-photo{aspect-ratio:4/5}
.trendy-label{margin-top:var(--space-2);text-align:center}

/* — testimonial / quote — */
.testimonial{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);align-items:center;max-width:760px;margin:0 auto}
.testimonial-photo{width:120px;height:120px;border-radius:50%;overflow:hidden}
.testimonial-photo .plate{border-radius:50%}
.quote-block{max-width:760px;margin:0 auto;text-align:center}
.quote-block h2{font-weight:400;font-size:34px}

/* — contact — */
.contact-section{position:relative;overflow:hidden;padding:var(--space-12) var(--space-8);text-align:center;border:1px solid var(--color-divider)}
.contact-bg{position:absolute;inset:0;z-index:0}
.contact-bg .plate{filter:sepia(.22) saturate(.82) contrast(1.05) brightness(.55)}
.contact-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.contact-inner.on-bg{color:#f8f4f4}
.contact-inner.on-bg h2, .contact-inner.on-bg .kicker{color:#f8f4f4}

footer.site-footer{border-top:1px solid var(--color-divider);padding:var(--space-6) 0;text-align:center;font-size:12px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .niche-grid,.gallery-4,.gallery-6,.trendy-grid{grid-template-columns:repeat(2,1fr)}
  .nav{flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
  h1{font-size:38px}
  .testimonial{grid-template-columns:1fr;text-align:center}
  .testimonial-photo{margin:0 auto}
}