/* FRAMElogic Lookbook: a dark room so the videos glow, FRAMElogic's green and gold, Montserrat and Inter. */
:root {
  --bg: #0F130D; --surface: #171E14; --surface2: #202A1C; --line: #2B3626;
  --text: #F2F0E8; --muted: #A5AD9D; --dim: #79826F;
  --gold: #D9AE6C; --gold-deep: #C99A5B; --green: #8FBF7A; --heart: #EE7A80;
  --radius: 14px;
  --f-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
img, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #111; padding: 8px 12px; border-radius: 8px; z-index: 40; }
.skip:focus { left: 12px; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: 32px; padding-right: 32px; } }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgba(15, 19, 13, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; min-height: 60px; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 760px) { .top-in { padding: 0 32px; } }
.brand { text-decoration: none; display: inline-flex; align-items: baseline; gap: 0; font-family: var(--f-head); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; }
.b-frame { color: var(--text); } .b-logic { color: var(--green); }
.b-book { margin-left: 10px; font-weight: 700; font-style: italic; color: var(--gold); }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.nav-btn { border: 0; background: none; padding: 8px 12px; border-radius: 999px; color: var(--muted); font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nav-btn[aria-current="page"] { color: var(--text); background: var(--surface2); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--heart); color: #1A0E0F; font-size: 12px; font-weight: 700; text-align: center; }
.account { display: flex; align-items: center; gap: 10px; }
.who { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.fav-btn { display: inline-flex; align-items: center; gap: 6px; }
.hearticon { display: none; width: 18px; height: 18px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0E8' stroke-width='2.2'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.5 8.1 3.6 4.5 7.2 4.5c2.1 0 3.6 1.2 4.8 2.9 1.2-1.7 2.7-2.9 4.8-2.9 3.6 0 5.7 3.6 4.5 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); }
@media (max-width: 640px) {
  .top-in { gap: 10px; }
  .who { display: none; }
  .brand { font-size: 16px; } .b-book { margin-left: 6px; }
  .nav-btn { padding: 8px 9px; }
  .nav-btn[data-view="browse"] { display: none; }
  .fav-btn .lbl { display: none; } .hearticon { display: inline-block; }
  .account .btn.small { padding: 7px 13px; font-size: 14px; }
}

.btn { border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 600; cursor: pointer; background: var(--gold); color: #17130B; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.small { padding: 8px 16px; font-size: 14.5px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn:disabled { opacity: 0.55; cursor: default; }
.link { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 6px 0; }

/* intro */
.intro { padding-block: clamp(36px, 6vw, 72px) clamp(18px, 3vw, 28px); }
.intro h1 { font-family: var(--f-head); font-weight: 800; font-size: clamp(40px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.lede { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); max-width: 44em; margin: 18px 0 0; }

/* the style wall: the one big move, like a wall of tags in a studio */
.styles { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-block: 12px 18px; border-bottom: 1px solid var(--line); }
.styles button { border: 0; background: none; padding: 2px 0; cursor: pointer; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(22px, 3.2vw, 40px); letter-spacing: -0.02em; line-height: 1.15; color: var(--dim); transition: color .15s; }
.styles button:hover { color: var(--text); }
.styles button[aria-pressed="true"] { color: var(--gold); }
.styles button sup { font-family: var(--f-body); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--dim); margin-left: 3px; vertical-align: super; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; }
.industries { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1.5px solid var(--line); background: var(--surface); padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pill[aria-pressed="true"] { border-color: var(--green); color: var(--text); background: #22301D; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.pill.plat[aria-pressed="true"] { border-color: var(--gold); background: #2C2617; }
.tools { gap: 12px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 14px; color: var(--muted); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--surface2); color: var(--text); }
.search { flex: 1 1 220px; min-width: 0; }
.search input, .sort select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; outline: none; }
.search input:focus, .sort select:focus { border-color: var(--gold-deep); }
.sort { flex: 0 0 auto; }
.tech select { width: auto; max-width: 100%; }

/* the grid */
.result { color: var(--dim); font-size: 14px; margin: 22px 0 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; padding-bottom: 40px; }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.card { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--surface2); }
.card .open { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; display: block; width: 100%; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.card:hover img { transform: scale(1.035); }
.card .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 13, 9, 0.35) 0%, rgba(10, 13, 9, 0) 26%, rgba(10, 13, 9, 0) 52%, rgba(10, 13, 9, 0.92) 100%); pointer-events: none; }
.card .meta { position: absolute; left: 12px; right: 12px; bottom: 11px; text-align: left; pointer-events: none; }
.card .t { font-family: var(--f-head); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .c { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .v { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; margin-top: 2px; text-wrap: balance; }
.card .v b { color: var(--gold); font-weight: 600; }
.card .badge { position: absolute; left: 10px; top: 10px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(15, 19, 13, 0.72); color: var(--text); pointer-events: none; }
.heart { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(15, 19, 13, 0.62);
  display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.heart svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; transition: transform .15s; }
.heart[aria-pressed="true"] svg { fill: var(--heart); stroke: var(--heart); }
.heart:active svg { transform: scale(0.86); }
.no-thumb { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-weight: 600; font-size: 14px; }
.empty { text-align: center; color: var(--muted); padding: 60px 16px 90px; }
.empty .btn { margin-top: 16px; }

/* the detail sheet */
.sheet { border: 0; padding: 0; background: var(--surface); color: var(--text); border-radius: 20px; width: min(1040px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.sheet::backdrop { background: rgba(5, 7, 4, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-in { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; padding: 24px; }
.sheet.small { width: min(460px, calc(100vw - 24px)); }
.sheet-in.narrow { display: block; padding: 28px; }
@media (max-width: 800px) { .sheet-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; } }
.close { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface2); font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }
.d-player { aspect-ratio: 9 / 16; max-height: calc(100dvh - 72px); border-radius: var(--radius); overflow: hidden; background: #000; justify-self: center; width: 100%; }
.d-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.d-info { min-width: 0; padding-top: 8px; }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 40px 10px 0; }
.tag { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.tag.style { color: var(--gold); }
.d-info h2 { font-family: var(--f-head); font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.d-by { color: var(--muted); margin: 8px 0 0; }
.d-by a { color: var(--text); }
.d-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.heart-btn { background: var(--surface2); color: var(--text); }
.heart-btn .hicon { width: 18px; height: 18px; display: inline-block; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE7A80' stroke-width='2.2'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.5 8.1 3.6 4.5 7.2 4.5c2.1 0 3.6 1.2 4.8 2.9 1.2-1.7 2.7-2.9 4.8-2.9 3.6 0 5.7 3.6 4.5 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); }
.heart-btn[aria-pressed="true"] { background: var(--heart); color: #1A0E0F; }
.heart-btn[aria-pressed="true"] .hicon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A0E0F'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.5 8.1 3.6 4.5 7.2 4.5c2.1 0 3.6 1.2 4.8 2.9 1.2-1.7 2.7-2.9 4.8-2.9 3.6 0 5.7 3.6 4.5 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E"); }
.takes { margin-top: 24px; padding: 18px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.takes h3 { font-family: var(--f-head); font-size: 17px; margin: 0 0 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.facts dd small { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }
.facts div { background: var(--surface); border-radius: 10px; padding: 10px 12px; }
.facts dt { color: var(--dim); font-size: 12.5px; }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.meter { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; }
.meter i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.meter i.on { background: var(--gold); }
.d-why, .d-what { margin: 12px 0 0; color: var(--text); }
.d-why { color: var(--muted); }
.d-tech { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.d-note { margin-top: 18px; display: grid; gap: 8px; }
.d-note label { font-weight: 600; } .d-note label span { color: var(--dim); font-weight: 400; }
.d-note textarea, .sheet input, .sheet select { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none; }
.d-note textarea:focus, .sheet input:focus, .sheet select:focus { border-color: var(--gold-deep); }
.saved { color: var(--green); font-size: 14px; min-height: 1.4em; margin: 0; }
.d-caption { color: var(--dim); font-size: 14px; margin: 18px 0 0; }
.d-caption b { color: var(--muted); font-weight: 500; }

/* sign in */
.sheet h2 { font-family: var(--f-head); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; margin: 0 40px 6px 0; }
.s-sub { color: var(--muted); margin: 0 0 16px; }
.sheet form { display: grid; gap: 8px; }
.sheet form label { font-weight: 600; font-size: 14.5px; margin-top: 6px; } .sheet form label span { color: var(--dim); font-weight: 400; }
#s-details { display: grid; gap: 8px; }
.sheet form .btn { margin-top: 12px; }
.s-msg { color: var(--heart); min-height: 1.4em; margin: 12px 0 0; }
.s-msg.ok { color: var(--green); }

.foot { color: var(--dim); font-size: 14px; padding-block: 28px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.foot p { margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }