/* ============================================================
   Grain — Photo Marketplace
   Design system extracted verbatim from the approved prototype.
   Palette, type, and component metrics match the preview 1:1.
   ============================================================ */

:root{
  --bg:#F6F4EF; --surface:#FCFBF8; --surface-2:#EFEBE2; --surface-3:#ECE8DF;
  --ink:#1C1B18; --ink-soft:#38352E; --ink-2:#55524B; --muted:#6B675E;
  --faint:#8A857B; --faint-2:#A8A398; --faint-3:#C9C3B6;
  --line:#E2DDD3; --line-2:#DAD5CB; --line-3:#EDE9E0;
  --rust:#9A3B1B; --rust-dk:#7E2F13; --rust-line:#D8C4BB;
  --green:#2F5D3A; --green-bg:#EEF2EC; --amber:#E7A977;
  --warn-bg:#F4EEDF; --warn-ink:#8A6D1F;
  --report-bg:#FBEAE4; --report-panel:#FBF2EE; --report-line:#E7CFC6;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Archivo',system-ui,sans-serif;
  --shadow-card:0 30px 80px rgba(0,0,0,.3);
  --shadow-hero:0 22px 50px rgba(40,34,26,.14);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{ color:var(--rust); text-decoration:none; }
a:hover{ color:var(--rust-dk); }
::selection{ background:var(--ink); color:var(--bg); }
img{ display:block; }

/* ---- type helpers ---- */
.serif{ font-family:var(--serif); }
.eyebrow{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.eyebrow-rust{ color:var(--rust); }
.wrap{ max-width:1200px; margin:0 auto; padding-left:32px; padding-right:32px; }
.italic{ font-style:italic; }

/* ============ BUTTONS ============ */
.btn{ font-family:var(--sans); font-size:14px; letter-spacing:.02em; border-radius:2px; cursor:pointer; border:none; padding:14px 22px; display:inline-block; text-align:center; }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-dark:hover{ background:var(--ink-soft); color:var(--bg); }
.btn-out{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-out:hover{ background:var(--ink); color:var(--bg); }
.btn-ghost{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:2px; padding:11px 16px; font-family:var(--sans); font-size:12px; cursor:pointer; }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-green{ background:var(--green); color:#fff; border:none; }
.btn-danger{ background:var(--rust); color:#fff; border:none; }
.btn-danger-out{ background:transparent; color:var(--rust); border:1px solid var(--rust-line); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:12.5px; }
.btn-xs{ padding:7px 14px; font-size:12px; }

/* ============ TOP BAR ============ */
.topbar{ position:sticky; top:0; z-index:30; background:rgba(246,244,239,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar-inner{ height:70px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; cursor:pointer; display:flex; align-items:center; gap:9px; }
.brand .dot{ color:var(--rust); }
.brand-lg{ font-size:24px; } .brand-md{ font-size:23px; } .brand-sm{ font-size:18px; }
.nav{ display:flex; gap:26px; }
.nav a, .navlink{ font-size:13px; letter-spacing:.02em; color:var(--ink-2); cursor:pointer; }
.nav a:hover, .navlink:hover{ color:var(--ink); }
.role-badge{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line-2); padding:4px 9px; border-radius:20px; }
.avatar{ border-radius:50%; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:.02em; width:32px; height:32px; }

/* ============ LANDING (1c) ============ */
.land{ min-height:100vh; display:flex; flex-direction:column; }
.land-top{ height:72px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(246,244,239,.9); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); }
.land-hero{ position:relative; padding:76px 40px 64px; overflow:hidden; border-top:1px solid var(--rust); border-bottom:1px solid var(--rust); }
.mosaic{ position:absolute; inset:0; opacity:.9; overflow:hidden; }
.mosaic-slide{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; animation:mosaicDrift 55s linear infinite; will-change:transform; }
.mosaic-slide .cell{ aspect-ratio:1/1; border-radius:3px; overflow:hidden; }
.mosaic-slide .cell img{ width:100%; height:100%; object-fit:cover; }
@keyframes mosaicDrift{ from{ transform:translateY(0);} to{ transform:translateY(-50%);} }
@media (prefers-reduced-motion:reduce){ .mosaic-slide{ animation:none; } }
.hero-veil{ position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(246,244,239,.72) 30%,rgba(246,244,239,.42)); }
.hero-content{ position:relative; text-align:center; max-width:720px; margin:0 auto; }
.hero-title{ font-family:var(--serif); font-weight:400; font-size:58px; line-height:1.02; margin:0 0 30px; letter-spacing:-.02em; text-wrap:pretty; }
.searchbar{ display:flex; align-items:center; gap:10px; border-radius:32px; padding:8px 8px 8px 26px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-hero); }
.searchbar input{ flex:1; border:none; background:transparent; font-family:var(--sans); font-size:16px; color:var(--ink); outline:none; }
.searchbar .glyph{ color:var(--faint); font-size:20px; }
.trending{ margin-top:20px; display:flex; gap:9px; justify-content:center; flex-wrap:wrap; font-size:12.5px; color:var(--faint); }
.trending a{ color:var(--rust); }

/* filter bar */
.filter-bar{ padding:14px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; gap:14px; flex-wrap:nowrap; align-items:center; justify-content:center; background:var(--bg); overflow-x:auto; }
.filter-group{ display:flex; align-items:center; gap:6px; flex:none; }
.filter-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-2); }
.seg{ display:flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:18px; padding:2px; }
.seg a{ cursor:pointer; font-size:11px; padding:5px 9px; border-radius:15px; white-space:nowrap; color:var(--muted); }
.seg a.active{ background:var(--ink); color:var(--bg); }
/* label-based segments (upload Style picker) */
.seg .style-seg{ color:var(--muted); }
.seg .style-seg.active{ background:var(--ink); color:var(--bg); }
.lcard{ display:block; }

/* ============ PHOTO CARDS / GRIDS ============ */
.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.section-title{ font-family:var(--serif); font-size:26px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.masonry{ column-count:3; column-gap:24px; }
.masonry .card{ break-inside:avoid; margin-bottom:32px; }

.card{ cursor:pointer; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.card:hover{ transform:scale(1.1); position:relative; z-index:5; }
.card .frame{ position:relative; overflow:hidden; border-radius:2px; box-shadow:0 6px 16px -8px rgba(28,27,24,.35); transition:box-shadow .4s ease; }
.card:hover .frame{ box-shadow:inset 0 0 0 3px #fff, 0 26px 50px -18px rgba(28,27,24,.5); }
.card .tile{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .tile{ transform:scale(1.15); }
.card .title{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; transition:color .25s ease; }
.card:hover .title{ color:var(--rust); }
.card .by{ color:var(--muted); }
/* white footer panel slides up on hover */
.cap{ position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,.5); padding:20px 20px 22px; color:var(--ink); border-top:1px solid rgba(255,255,255,.4); box-shadow:0 -1px 0 rgba(28,27,24,.05); transform:translateY(100%); transition:transform .45s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.card:hover .cap{ transform:translateY(0); }
.cap .t{ font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.14; letter-spacing:-.01em; color:var(--ink); }
.cap .meta{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.cap .ava{ width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:10.5px; flex:none; }
.cap .a{ font-size:13px; color:var(--ink-soft); }
.cap .a .by{ color:var(--faint); }
.cap .cat{ margin-left:auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-2); }

.pill{ position:absolute; top:12px; right:12px; font-size:11px; padding:5px 10px; border-radius:20px; }
.pill-paid{ background:var(--ink); color:var(--bg); letter-spacing:.02em; }
.pill-free{ background:rgba(246,244,239,.92); color:var(--green); letter-spacing:.04em; }
.flag{ position:absolute; top:12px; left:12px; background:rgba(154,59,27,.92); color:#fff; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:2px; }

/* category chips */
.chips{ display:flex; gap:10px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.chip{ cursor:pointer; font-size:12.5px; letter-spacing:.02em; padding:8px 16px; border-radius:20px; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); }
.chip.active{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.chip-sticky{ position:sticky; top:70px; z-index:10; background:rgba(246,244,239,.9); backdrop-filter:blur(8px); }

/* ============ DETAIL ============ */
.detail-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; }
.detail-photo{ position:relative; border-radius:2px; overflow:hidden; }
.detail-photo img{ width:100%; height:100%; object-fit:cover; }
.watermark{ position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px); }
.detail-side{ position:sticky; top:100px; }
.detail-title{ font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.05; margin:0 0 18px; letter-spacing:-.01em; }
.author-row{ display:flex; align-items:center; gap:11px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.spec-row{ display:flex; gap:10px; margin:22px 0; }
.spec{ flex:1; border:1px solid var(--line); border-radius:2px; padding:12px 14px; }
.spec .k{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.spec .v{ font-family:var(--serif); font-size:17px; margin-top:3px; }
.price-line{ display:flex; align-items:baseline; gap:10px; margin:26px 0 4px; }
.price-big{ font-family:var(--serif); font-weight:500; font-size:38px; letter-spacing:-.01em; }

/* ============ DASHBOARD ============ */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ border:1px solid var(--line); border-radius:3px; padding:22px; background:var(--surface); }
.stat .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.stat .v{ font-family:var(--serif); font-weight:500; font-size:34px; margin-top:8px; letter-spacing:-.01em; }
.stat .sub{ font-size:12px; color:var(--faint); margin-top:2px; }

.panel{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surface); }
.trow{ display:grid; gap:16px; padding:14px 22px; align-items:center; border-bottom:1px solid var(--line-3); }
.trow:last-child{ border-bottom:none; }
.thead{ border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.trow-hover:hover{ background:#F1EDE4; cursor:pointer; }
.thumb{ border-radius:2px; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; }

.status{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px; }
.status-ok{ background:var(--green-bg); color:var(--green); }
.status-paid{ background:var(--ink); color:var(--bg); }
.status-warn{ background:var(--warn-bg); color:var(--warn-ink); }
.status-bad{ background:var(--report-bg); color:var(--rust); }

/* ============ FORMS (login / upload) ============ */
label.field{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.input{ width:100%; padding:13px 14px; border:1px solid var(--line-2); background:var(--surface); font-family:var(--sans); font-size:14px; border-radius:2px; color:var(--ink); }
.input:focus{ outline:none; border-color:var(--ink); }
.divider{ display:flex; align-items:center; gap:12px; margin:28px 0 18px; }
.divider .line{ flex:1; height:1px; background:var(--line); }

.login-grid{ display:grid; grid-template-columns:1.1fr .9fr; min-height:100vh; }
.login-art{ position:relative; background:linear-gradient(160deg,#2b2622,#5c4a3c 55%,#8a7256); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:56px; color:var(--bg); }
.login-carousel{ position:absolute; inset:0; overflow:hidden; }
.lc-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:lcFade 24s linear infinite; }
@keyframes lcFade{ 0%{opacity:0} 3%{opacity:1} 22%{opacity:1} 27%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .lc-slide{ animation:none } .lc-slide:first-child{ opacity:1 } }
.login-veil{ position:absolute; inset:0; background:linear-gradient(160deg,rgba(28,23,20,.5),rgba(74,58,44,.34) 55%,rgba(120,96,70,.28)); }
.login-quote{ font-family:var(--serif); font-style:italic; font-size:40px; line-height:1.2; text-wrap:pretty; }
.login-form-wrap{ display:flex; align-items:center; justify-content:center; padding:48px; }
.login-form{ width:100%; max-width:380px; }

.dropzone{ border:1.5px dashed var(--faint-3); border-radius:4px; background:var(--surface); padding:46px; text-align:center; }
.dropzone .disc{ width:52px; height:52px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:22px; color:var(--faint); }
.license-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lcard{ cursor:pointer; border-radius:3px; padding:18px; border:1.5px solid var(--line); background:transparent; transition:border-color .2s; }
.lcard.active{ border-color:var(--ink); background:var(--surface); }
.lcard .radio{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--faint-3); }
.lcard.active .radio{ border-color:var(--ink); background:var(--ink); }

/* ============ TABS (admin / super) ============ */
.tabs{ display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:30px; }
.tab{ cursor:pointer; padding:0 0 14px; font-size:14px; color:var(--faint); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active{ color:var(--ink); border-bottom-color:var(--ink); }

.mod-item{ display:grid; grid-template-columns:72px 1fr auto; gap:20px; align-items:center; border:1px solid var(--line); border-radius:3px; padding:16px 20px; background:var(--surface); }
.mod-item.report{ border-color:var(--report-line); background:var(--report-panel); }
.mod-item .actions{ display:flex; gap:10px; }
.reason{ font-size:12.5px; color:var(--rust); margin-top:5px; }
.empty{ text-align:center; padding:60px; color:var(--faint); font-family:var(--serif); font-style:italic; font-size:20px; }

/* audit timeline */
.timeline{ border-left:2px solid var(--line); margin-left:6px; padding-left:26px; display:flex; flex-direction:column; gap:22px; }
.tl-item{ position:relative; }
.tl-dot{ position:absolute; left:-33px; top:4px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg); }

/* ============ MODAL ============ */
.modal-back{ position:fixed; inset:0; z-index:60; background:rgba(28,27,24,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal{ background:var(--bg); border-radius:4px; max-width:460px; width:100%; padding:34px; box-shadow:var(--shadow-card); }
.summary{ border:1px solid var(--line); border-radius:3px; padding:16px; background:var(--surface); }

/* ============ PRICING PLANS ============ */
.plan{ position:relative; border:1px solid var(--line); border-radius:5px; padding:30px 26px; background:var(--surface); display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.plan:hover{ transform:translateY(-4px); }
.plan.featured{ border-color:var(--rust); box-shadow:0 30px 60px -30px rgba(154,59,27,.5); }
.plan-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--rust); color:#fff; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }
.btn-rust{ background:var(--rust); color:#fff; border:none; }
.btn-rust:hover{ background:var(--rust-dk); color:#fff; }

/* ============ PHOTOGRAPHER CARD ============ */
.pg-card{ transition:transform .3s ease, box-shadow .3s ease; }
.pg-card:hover{ box-shadow:0 22px 46px -20px rgba(28,27,24,.4); transform:translateY(-3px); }

/* ============ PROFILE SWITCH ============ */
.switch{ appearance:none; -webkit-appearance:none; width:46px; height:26px; border-radius:20px; background:#CFC8BB; position:relative; cursor:pointer; flex:none; transition:background .2s; margin:0; }
.switch:checked{ background:var(--green); }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; }
.switch:checked::after{ left:23px; }

/* ============ WATERMARK (paid previews) ============ */
.wm{ position:absolute; inset:0; pointer-events:none; opacity:.32; background-repeat:no-repeat; background-position:center; background-size:80% auto; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-width='4'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M18%2038h20l8-12h28l8%2012h20a6%206%200%200%201%206%206v46a6%206%200%200%201-6%206H18a6%206%200%200%201-6-6V44a6%206%200%200%201%206-6z'/%3E%3Ccircle%20cx='60'%20cy='66'%20r='20'/%3E%3Ccircle%20cx='60'%20cy='66'%20r='9'/%3E%3C/g%3E%3C/svg%3E"); }

/* ============ ALERTS ============ */
.alert{ padding:12px 16px; border-radius:2px; font-size:13px; margin-bottom:18px; }
.alert-ok{ background:var(--green-bg); color:var(--green); }
.alert-err{ background:var(--report-bg); color:var(--rust); }

/* ============ FOOTER ============ */
.footer{ border-top:1px solid var(--rust); margin-top:20px; background:#F1E7E1; }
.footer-inner{ padding:40px 32px; display:flex; justify-content:space-between; align-items:center; }
.footer .fine{ font-size:12px; color:var(--rust); letter-spacing:.02em; }


/* ============ PUBLIC GALLERY (tag rows) ============ */
.tagrow{ display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; }
.tagrow .card{ flex:none; width:260px; }
.tagrow-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.tagrow-head .name{ font-family:var(--serif); font-size:30px; letter-spacing:-.01em; }
.tagrow-head .count{ font-size:13px; color:var(--rust); }