/* PHÚ FILMS / CINEMATIC RED
   Dusty vermilion, charcoal and warm ivory. A production-independent UI prototype.
   Existing content stays in the library; previous courses stay inside Academy. */
:root {
  color-scheme: dark;
  --paper: #100e0d;
  --ink: #f2e8db;
  --surface: #181412;
  --surface-raised: #211a17;
  --accent: #a94c42;
  --accent-light: #d99482;
  --red-shadow: #542820;
  --line: #44372f;
  --muted: #b5a99e;
  --frame: clamp(24px, 4.1vw, 78px);
  --sans: Arial, Helvetica, sans-serif;
  --mono: 'Courier New', monospace;
  --serif: Georgia, 'Times New Roman', serif;
}
html { scroll-padding-top: 92px; }
body { background: var(--paper); color: var(--ink); font-size: 15px; }
.wrapper { max-width: 1720px; }
main { min-height: 40vh; }
main:focus { outline: none; }
a,button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline-color: var(--accent-light) !important; }
.eyebrow { font: 500 10px/1.6 var(--mono); letter-spacing: .21em; }
.red, .text-accent { color: var(--accent-light); }
.muted { color: var(--muted); }
.btn { min-height: 46px; border-radius: 7px; padding: 0 23px; font-size: 13px; font-weight: 600; gap: 28px; line-height: 1.4; }
.btn span { font-size: 18px; }
.btn-accent, .btn-dark {
  color: #fff6ec;
  background: linear-gradient(120deg, #b65649, #944039);
  border-color: #bd6758;
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.btn-accent:hover, .btn-dark:hover { background: #bb5a4b; border-color: #cc7c67; }
.btn-outline { border-color: #776453; color: var(--ink); background: #0f0d0c36; }
.btn-outline:hover { background: #31201b; border-color: #c78873; }
.btn-light { background: var(--ink); color: var(--paper); }
.outlined-link { color: var(--ink); border-color: #735446; font-weight: 400; }
.site-header {
  height: 80px; padding: 0 var(--frame); background: #100e0df5;
  border-bottom: 1px solid #65503b65; gap: 30px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.header-identity { display: flex; align-items: center; gap: 29px; margin-right: auto; }
.brand { font: 750 26px/1 var(--sans); letter-spacing: -.045em; color: #f8eddf; }
.brand sup { font-size: 9px; position: relative; top: -1px; margin-left: 3px; }
.header-divider { height: 27px; width: 1px; background: #685340; }
.header-version { color: #d6bda3; font: 600 10px/1.4 var(--sans); letter-spacing: .25em; }
.header-version span { margin: 0 7px; color: var(--accent-light); }
.desktop-nav { gap: 43px; margin-left: 0; }
.desktop-nav a { color: #e8ddcf; font-size: 13px; font-weight: 500; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--accent-light); }
.desktop-nav a.active:after { bottom: -31px; background: var(--accent-light); }
.header-actions { gap: 14px; }
.header-cta { width: 32px; height: 32px; border: 0; color: #d2bca8; }
.header-cta:hover { color: #fff; }
.header-cta svg { width: 20px; }
.mobile-menu { top: 80px; background: #15100efb; border-color: var(--line); }
.mobile-menu a { color: var(--ink); border-color: var(--line); }
.mobile-menu span { color: var(--accent-light); }
.skip { background: var(--ink); color: var(--paper); }
#progress { background: #ba6153; height: 1px; }
/* Approved portrait-led homepage hero. The architecture remains in the Academy and footer. */
.cin-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 600px; display: flex; align-items: center; background: #100e0d; }
.cin-hero-image, .cin-hero-shade { position: absolute; inset: 0; pointer-events: none; }
.cin-hero-image { z-index: -3; }
.cin-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.cin-hero-shade { z-index: -2; background: linear-gradient(90deg,#100e0d 0%,#100e0df7 25%,#100e0dc9 43%,#100e0d24 65%,#100e0d08 100%),linear-gradient(0deg,#100e0d50,transparent 23%,transparent 85%,#100e0d30); }
.cin-hero-content { width: 100%; padding-top: 60px; padding-bottom: 65px; }
.cin-kicker { color: #d5b19a; display: inline-flex; align-items: center; gap: 13px; font-size: 9px; }
.cin-kicker>span { display: inline-block; width: 28px; height: 1px; background: #bf6151; }
.cin-hero h1 { margin: 34px 0 24px; font: 750 clamp(56px,6.4vw,100px)/.97 var(--sans); letter-spacing: -.065em; color: #f4e8d8; }
.cin-hero h1>span { display: block; }
.cin-hero h1 em { font-style: normal; color: #bb6453; }
.cin-hero-rule { width: 74px; height: 2px; background: linear-gradient(90deg,#c97761,#6f362c00); margin: 22px 0 18px; }
.cin-hero-content>p { max-width: 510px; color: #d5c9b9; font-size: 15px; line-height: 1.8; margin: 0 0 29px; text-wrap: pretty; }
.cin-actions { display: flex; gap: 15px; flex-wrap: wrap; }
.cin-hero-categories { position: absolute; top: 27%; right: var(--frame); list-style: none; margin: 0; padding: 0 17px 0 0; border-right: 1px solid #edddce96; text-align: right; color: #f1dfce; font: 600 9px/2.2 var(--sans); letter-spacing: .2em; text-shadow: 0 1px 10px #0008; }
.cin-manifesto { overflow: hidden; padding: 17px 0; border-top: 1px solid #7b614545; border-bottom: 1px solid #7b614545; background: #100d0c; }
.cin-manifesto-track { display: flex; justify-content: center; align-items: center; gap: 27px; min-width: max-content; font: 600 9px var(--sans); letter-spacing: .28em; color: #d4c6b7; }
.cin-manifesto-track i { display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #ad5646; }
.cin-manifesto-track b { height: 22px; width: 1px; background: #8b725345; margin: -5px 3px; }
.cin-selected { padding-top: 49px; padding-bottom: 45px; }
.cin-section-heading { display: flex; align-items: center; gap: 30px; margin-bottom: 30px; }
.cin-section-heading h2 { font: 600 clamp(28px,2.8vw,42px)/1.12 var(--sans); letter-spacing: -.04em; margin: 0; white-space: nowrap; }
.cin-section-heading h2>span { color: var(--accent-light); }
.cin-hairline { height: 1px; flex: 1; background: linear-gradient(90deg,#ac6751b3,#63503b50 55%,#63503b1a); position: relative; }
.cin-hairline:before { content: ''; position: absolute; width: 52px; height: 1px; left: 0; background: #c47e62; }
.cin-small-link { font: 600 9px/1.5 var(--sans); letter-spacing: .15em; color: #cabdaf; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.cin-small-link span { font-size: 18px; color: var(--accent-light); }
.cin-small-link:hover { color: #fff; }
.selected-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 15px; }
.system-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #68513c85; border-radius: 12px; overflow: hidden; background: linear-gradient(145deg,#201913,#100e0d 90%); position: relative; transition: border-color .25s, transform .25s, box-shadow .25s; }
.system-card:hover { border-color: #ae7055; transform: translateY(-5px); box-shadow: 0 16px 30px #0005; }
.system-art { aspect-ratio: 1.09; position: relative; overflow: hidden; background: #231b15; }
.system-art:after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(0deg,#17120fe6,transparent); }
.system-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s cubic-bezier(.2,.6,.2,1); }
.system-card:hover .system-art img { transform: scale(1.035); }
.system-info { padding: 5px 20px 30px; flex: 1; min-height: 186px; position: relative; }
.system-label { display: flex; align-items: center; gap: 8px; font: 600 8px/1.5 var(--sans); letter-spacing: .16em; color: #c8bba8; margin: 0 0 13px; }
.system-label svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent-light); }
.system-info h3 { font: 500 clamp(20px,1.65vw,27px)/1.08 var(--sans); letter-spacing: -.035em; margin: 0 0 12px; color: var(--ink); }
.system-info>p { font-size: 12px; line-height: 1.65; margin: 0; color: #bfb0a0; padding-right: 5px; }
.system-arrow { position: absolute; right: 18px; bottom: 12px; color: #c87b65; font-size: 20px; line-height: 1; }
.cin-collection-meta { display: flex; gap: 20px; justify-content: space-between; margin: 19px 1px 0; font: 8px var(--mono); letter-spacing: .12em; color: #9e8d7d; }
.cin-collection-meta>a { color: #c7b3a0; }
.mobile-swipe { display: none; }
.cin-academy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,4.5vw,70px); align-items: center; padding-top: 19px; padding-bottom: 62px; }
.cin-academy-image { position: relative; align-self: stretch; min-height: 380px; overflow: hidden; border: 1px solid #65513b7a; border-radius: 3px; }
.cin-academy-image img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 57%; position: absolute; inset: 0; transition: transform .8s; }
.cin-academy-image:hover img { transform: scale(1.03); }
.cin-academy-image:after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(0deg,#0b0908a3,transparent); pointer-events: none; }
.cin-academy-image>span { position: absolute; bottom: 19px; left: 22px; right: 22px; z-index: 1; color: #dcc4ae; font: 8px var(--mono); letter-spacing: .19em; display: flex; align-items: center; justify-content: space-between; }
.cin-academy-image>span b { font-size: 21px; font-weight: 400; }
.cin-academy-label { display: flex; align-items: center; gap: 19px; margin-bottom: 22px; }
.cin-academy-label>.eyebrow { color: #d4b396; }
.cin-academy-copy h2 { margin: 0 0 19px; font: 550 clamp(35px,3.4vw,54px)/1.02 var(--sans); letter-spacing: -.045em; }
.cin-academy-copy h2 em { display: inline-block; margin-top: 4px; font: italic 400 1.3em/1.03 var(--serif); letter-spacing: -.04em; color: #dfc5a9; }
.cin-academy-copy>p { font-size: 14px; color: #c1b3a4; line-height: 1.75; max-width: 580px; margin: 0 0 25px; }
.cin-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 -17px 24px; }
.cin-pillars>div { padding: 0 17px; border-right: 1px solid #6e58416e; }
.cin-pillars>div:last-child { border-right: 0; }
.cin-pillars svg { width: 25px; height: 25px; color: #ca8a70; margin-bottom: 8px; }
.cin-pillars h3 { font: 550 clamp(15px,1.4vw,21px)/1.2 var(--sans); letter-spacing: -.035em; margin: 0 0 5px; }
.cin-pillars p { margin: 0; font-size: 11px; line-height: 1.6; color: #b9a998; max-width: 145px; }
.cin-academy-link { font-size: 11px; color: #dfbba3; display: inline-flex; gap: 24px; align-items: center; padding-bottom: 7px; border-bottom: 1px solid #755243; }
.cin-academy-link span { font-size: 18px; }
/* Shared end frame */
.cin-footer { border-top: 1px solid #68533d85; background: #100d0c; }
.cin-footer-banner { position: relative; isolation: isolate; overflow: hidden; }
.cin-footer-backdrop { position: absolute; inset: 0; background-image: url('../img/hero-architecture.webp'); background-size: cover; background-position: center 82%; z-index: -2; }
.cin-footer-banner:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#110c09b3,#100d0cad,#110c09c2); }
.cin-footer-cta { text-align: center; padding-top: 47px; padding-bottom: 43px; }
.cin-footer-cta>.eyebrow { font-size: 8px; color: #d3b497; }
.cin-footer-cta h2 { font: italic 400 clamp(32px,4vw,65px)/1.22 var(--serif); letter-spacing: -.045em; color: #ead8c2; margin: 17px 0 24px; }
.cin-footer-cta h2 em { font: inherit; }
.cin-footer-cta .btn { min-height: 42px; font-size: 12px; }
.cin-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 29px; padding-bottom: 25px; border-top: 1px solid #62483265; }
.cin-footer-bottom .brand { font-size: 19px; }
.cin-footer-bottom .brand sup { font-size: 7px; }
.cin-footer-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font: 600 7px/1.7 var(--sans); letter-spacing: .19em; color: #c1ae9a; }
.cin-footer-categories i { font-style: normal; color: #8d5d46; }
.archive-footer-link { white-space: nowrap; font-size: 10px; color: #b49a82; }
.cin-footer-legal { font: 8px/1.7 var(--mono); letter-spacing: .05em; display: flex; justify-content: space-between; gap: 20px; color: #8f8174; padding-bottom: 20px; }
/* Library / detail / learning — the same cinematic red system, never white UI. */
.page-hero { padding-top: 80px; padding-bottom: 45px; }
.page-hero.dark { background: var(--paper); color: var(--ink); }
.page-huge { font-size: clamp(65px,7.5vw,120px); font-weight: 600; letter-spacing: -.075em; }
.page-huge em { color: #c18570; font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; }
.page-description, .page-hero .page-description, .section-head p { color: var(--muted); }
.page-count { color: #a99482; border-color: var(--line); margin-top: 45px; }
.library-panel { padding-top: 10px; }
.searchline { border-color: #745b48; }
.searchline input { color: var(--ink); }
.searchline input::placeholder { color: #b0a292; }
.searchline svg { stroke: #d0b69e; }
.filter-row { gap: 9px; }
.filter-chip { color: #c4b4a4; border-color: #5a4637; border-radius: 5px; background: #17120f; }
.filter-chip:hover { background: #32231c; color: #fff; }
.filter-chip.active { background: #8d4036; color: #fff0e4; border-color: #b86753; }
.sort-select { background: #1a1410; color: #d9c4ae; border: 1px solid #5a4637; padding: 9px; border-radius: 4px; }
.library-results { color: #ad9884; }
.library-grid { gap: 28px 22px; }
.editorial-card { border: 1px solid #5a44357d; border-radius: 9px; overflow: hidden; background: #171310; transition: border-color .25s, transform .25s; }
.editorial-card:hover { border-color: #a86f54; transform: translateY(-3px); }
.card-img, .library-grid .card-img, .library-grid .editorial-card:nth-child(5n+1) .card-img { aspect-ratio: 4/3; background: #211913; }
.card-img img { filter: none; width: 100%; height: 100%; object-fit: cover; }
.card-top { padding: 14px; }
.card-sticker { color: #f3e0cc; background: #15100dd6; border: 1px solid #b88b634d; backdrop-filter: blur(10px); font-size: 8px; letter-spacing: .1em; }
.card-corner { background: #17100dcf; color: #e6b89c; border: 1px solid #ab7d5d75; }
.card-details { padding: 19px; margin: 0; }
.card-title { color: #f0e2d1; font-size: 20px; letter-spacing: -.04em; font-weight: 500; }
.card-meta, .card-index { color: #b49b84; }
.section-head h2, .section-title { letter-spacing: -.065em; font-weight: 500; }
.breadcrumb { color: #bda28a; }
.detail-head { padding-top: 55px; }
.detail-title { font-weight: 550; }
.detail-lead p { color: var(--muted); }
.detail-tag { color: #d4c0aa; background: #251a14; border-color: #75533d; border-radius: 4px; }
.detail-stage { background: #17110e; max-height: 560px; }
.detail-stage>img { opacity: 1; filter: none; object-position: center; }
.detail-content { gap: 65px; }
.detail-content h2 { font-weight: 500; letter-spacing: -.065em; }
.detail-content p { color: var(--muted); }
.detail-list { color: var(--ink); }
.detail-list li { border-color: var(--line); }
.detail-list li span { color: #bba793; }
.detail-aside { background: #211812; border: 1px solid #79533c73; border-radius: 7px; color: #ead5be; }
.aside-kicker { color: #cc9e7b; }
.aside-copy { color: #b6a38e; }
.detail-meta { border-color: #5d422e; }
.detail-meta div { border-color: #5d422e; }
.detail-meta span { color: #b0967d; }
.detail-meta strong { color: #ddc8ae; }
.code-example { background: #1d1510; color: #e1c3a5; border: 1px solid #684731; border-radius: 6px; }
.skill-demo { background: #17100d; border: 1px solid #694936; border-radius: 7px; }
.skill-demo-top { color: #bd9574; border-color: #5a3e2e; }
.preview-stage { background: radial-gradient(ellipse at center,#40231c 0,#160f0d 76%); border-color: #57382a; }
.preview-word { color: #d69b81; text-shadow: 0 1px 0 #eac3aa55; }
.demo-field { color: #b69980; }
.demo-field input, .demo-field select { color: #f4dfc7; background: #251913; border-color: #66432e; border-radius: 4px; }
.demo-bottom button { color: #e9c9ad; background: #3e251b; border-color: #8d573a; border-radius: 4px; }
.demo-bottom button:hover { background: #683b2b; }
.academy-intro { background: #120e0c; }
.academy-intro h1 { font-weight: 500; letter-spacing: -.075em; }
.academy-intro h1 em { color: #c58b71; }
.academy-intro p { color: #c6b4a0; }
.academy-intro .academy-art img { object-position: center; }
.academy-intro .academy-art .overlay-caption { background: #150e0bc9; color: #ddba99; }
.principle { border-color: #6e4b33; }
.principle .count { color: #bf9370; }
.principle h3 { font-weight: 500; }
.principle p { color: #b9a48f; }
.academy-cta { background: #251910; border: 1px solid #654027; border-radius: 4px; }
.archive-section { border-color: var(--line); }
.archive-details { border-color: var(--line); }
.archive-list { color: #bca58e; }
.article-row .article-index,.article-row .article-tag { color: #b2967c; }
.article-row h2 { font-weight: 500; }
.essay-body p, .work-note { color: var(--muted); }
.work-card h2 { font-weight: 500; }
.work-card .work-img { border: 1px solid #74513566; border-radius: 5px; }
.work-card p { color: #b49b81; }
.toast { background: #331d15; color: #f1d2b4; border: 1px solid #9d6846; max-width: min(450px,calc(100vw - 32px)); line-height: 1.6; }
/* Responsive: the homepage gets a compact horizontal collection on phones. */
@media(min-width:1600px) {
  .cin-hero { min-height: 690px; }
  .cin-hero-content>p { font-size: 16px; max-width: 550px; }
  .system-info { min-height: 200px; }
}
@media(max-width:1200px) {
  .header-version { display: none; }
  .header-divider { display: none; }
  .cin-hero { min-height: 550px; }
  .cin-hero h1 { font-size: 7vw; }
  .cin-hero-categories { top: 23%; font-size: 8px; }
  .selected-grid { gap: 10px; }
  .system-info { padding-left: 13px; padding-right: 13px; min-height: 190px; }
  .system-label { font-size: 7px; letter-spacing: .1em; gap: 5px; }
  .system-info h3 { font-size: 21px; }
  .system-info>p { font-size: 11px; }
  .cin-pillars { margin-left: -10px; margin-right: -10px; }
  .cin-pillars>div { padding-left: 10px; padding-right: 10px; }
  .cin-footer-categories { gap: 12px; letter-spacing: .12em; }
}
@media(max-width:980px) {
  .selected-grid { display: flex; overflow-x: auto; overflow-y: hidden; gap: 16px; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #78503b #211610; }
  .system-card { flex: 0 0 255px; scroll-snap-align: start; }
  .system-art { aspect-ratio: 1.2; }
  .system-info { padding-left: 18px; padding-right: 18px; min-height: 185px; }
  .system-info h3 { font-size: 24px; }
  .system-info>p { font-size: 12px; }
  .system-label { font-size: 8px; }
  .cin-section-heading { gap: 19px; }
  .cin-small-link { font-size: 8px; letter-spacing: .1em; }
  .cin-academy { gap: 30px; }
  .cin-academy-image { min-height: 390px; }
  .cin-academy-copy h2 { font-size: 33px; }
  .cin-academy-copy>p { font-size: 13px; }
  .cin-pillars h3 { font-size: 15px; }
  .cin-footer-categories { display: none; }
  .cin-footer-bottom { justify-content: space-between; }
}
@media(max-width:900px) {
  .site-header { gap: 20px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .cin-hero { min-height: 570px; }
  .cin-hero h1 { font-size: clamp(50px,7.8vw,70px); }
  .cin-hero-shade { background: linear-gradient(90deg,#100d0bef,#100d0bba 46%,#100d0b4a 85%),linear-gradient(0deg,#100e0d4a,transparent); }
  .cin-hero-content>p { max-width: 430px; font-size: 14px; }
  .cin-hero-categories { right: var(--frame); top: auto; bottom: 33px; font-size: 7px; }
  .detail-content { gap: 40px; }
}
@media(max-width:700px) {
  .cin-hero-categories { display: none; }
  .cin-academy { grid-template-columns: 1fr; gap: 30px; padding-top: 10px; padding-bottom: 45px; }
  .cin-academy-image { min-height: 0; aspect-ratio: 1.5; }
  .cin-academy-copy h2 { font-size: 40px; }
  .cin-academy-copy>p { max-width: 480px; font-size: 14px; }
  .cin-pillars h3 { font-size: 18px; }
  .cin-pillars { margin-top: 28px; }
  .cin-academy-link { margin-top: 2px; }
  .cin-section-heading .cin-small-link { display: none; }
  .cin-small-link { font-size: 8px; }
  .cin-collection-meta>span:first-child { display: none; }
  .mobile-swipe { display: block; }
  .cin-collection-meta { font-size: 8px; letter-spacing: .04em; }
  .cin-selected { padding-top: 34px; padding-bottom: 35px; }
}
@media(max-width:600px) {
  :root { --frame: 22px; }
  html { scroll-padding-top: 74px; }
  .site-header { height: 65px; padding-left: var(--frame); padding-right: var(--frame); }
  .site-header .brand { font-size: 22px; }
  .brand sup { font-size: 7px; }
  .header-identity { gap: 0; }
  .header-actions { gap: 13px; }
  .mobile-menu { top: 65px; }
  .cin-hero { min-height: 690px; align-items: flex-end; }
  .cin-hero-image { inset: 0 0 auto; height: auto; aspect-ratio: 1672 / 941; }
  .cin-hero-image img { height: auto; object-fit: contain; object-position: center top; }
  .cin-hero-shade { background: linear-gradient(0deg,#100e0d 0%,#100e0df5 48%,#100e0d32 71%,#100e0d0a 100%); }
  .cin-hero-content { padding-top: 250px; padding-bottom: 46px; }
  .cin-kicker { font-size: 8px; letter-spacing: .13em; gap: 10px; }
  .cin-kicker>span { width: 20px; }
  .cin-hero h1 { font-size: clamp(35px,9vw,55px); line-height: 1.04; margin: 25px 0 20px; letter-spacing: -.06em; }
  .cin-hero-rule { margin: 20px 0 17px; width: 54px; }
  .cin-hero-content>p { font-size: 13px; line-height: 1.8; max-width: 380px; margin-bottom: 23px; }
  .cin-actions { gap: 10px; flex-wrap: nowrap; }
  .cin-actions .btn { font-size: 10px; min-height: 43px; gap: 13px; padding: 0 14px; border-radius: 5px; }
  .cin-actions .btn span { font-size: 15px; }
  .cin-hero-categories { display: none; }
  .cin-manifesto { padding: 14px 0; }
  .cin-manifesto-track { justify-content: flex-start; padding-left: var(--frame); font-size: 7px; letter-spacing: .16em; gap: 16px; }
  .cin-manifesto-track span:nth-of-type(n+4),.cin-manifesto-track b { display: none; }
  .cin-section-heading { margin-bottom: 22px; gap: 20px; }
  .cin-section-heading h2 { font-size: 28px; }
  .system-card { flex-basis: 260px; }
  .system-art { aspect-ratio: 1.25; }
  .system-info { min-height: 178px; }
  .system-info h3 { font-size: 24px; }
  .system-label { font-size: 8px; }
  .cin-academy-copy h2 { font-size: 36px; }
  .cin-academy-label { margin-bottom: 21px; }
  .cin-academy-copy h2 em { font-size: 1.35em; }
  .cin-pillars { margin-left: -10px; margin-right: -10px; }
  .cin-pillars h3 { font-size: 15px; }
  .cin-pillars p { font-size: 10px; }
  .cin-pillars svg { width: 23px; height: 23px; }
  .cin-footer-cta { padding-top: 37px; padding-bottom: 34px; }
  .cin-footer-cta h2 { font-size: 37px; max-width: 400px; margin: 15px auto 24px; }
  .cin-footer-cta .btn { font-size: 11px; }
  .cin-footer-bottom { gap: 15px; padding-top: 23px; padding-bottom: 19px; }
  .cin-footer-bottom .brand { font-size: 18px; }
  .archive-footer-link { font-size: 9px; }
  .cin-footer-legal { flex-direction: column; gap: 5px; font-size: 7px; line-height: 1.8; padding-bottom: 22px; }
  .page-hero { padding-top: 55px; padding-bottom: 30px; }
  .page-hero .page-huge { font-size: 61px; }
  .library-grid { gap: 24px; }
  .card-img,.library-grid .card-img,.library-grid .editorial-card:nth-child(5n+1) .card-img { aspect-ratio: 4/3; }
  .card-title { font-size: 20px; }
  .card-meta { font-size: 10px; }
  .filter-row { gap: 7px; }
  .filter-chip { font-size: 10px; }
  .sort-select { font-size: 9px; margin-top: 4px; }
  .searchline input { font-size: 14px; }
  .detail-title { font-size: 48px; }
  .detail-stage { min-height: 230px; }
  .detail-stage>img { object-fit: cover; }
  .stage-label { font-size: 7px; }
  .stage-label.right { display: none; }
  .detail-content h2 { font-size: 40px; }
  .preview-word { font-size: 38px; }
  .skill-demo-top { font-size: 7px; gap: 12px; line-height: 1.5; }
  .academy-intro .academy-intro-copy { padding-top: 55px; padding-bottom: 50px; }
  .academy-intro h1 { font-size: 70px; }
  .academy-intro .academy-art { height: 300px; }
  .academy-cta { padding: 26px; }
  .archive-details summary { font-size: 20px; }
  .section-head h2, .section-title { font-size: 43px; }
  .toast { right: 16px; bottom: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior: auto !important; }
  .system-card:hover,.system-card:hover img,.cin-academy-image:hover img,.editorial-card:hover { transform: none; }
}
@media(max-width:360px) {
  .cin-hero { min-height: 660px; }
  .cin-hero-content { padding-top: 225px; }
  .cin-hero h1 { font-size: 33px; }
  .cin-actions .btn { padding: 0 11px; gap: 9px; font-size: 9.5px; }
  .cin-pillars h3 { font-size: 13px; }
}
.cin-hairline { overflow: hidden; }
.cin-hairline:before { max-width: 100%; }

/* Membership and curated prompt library */
.member-intro-row { display:grid; grid-template-columns:1fr minmax(260px,.65fr); gap:8vw; align-items:end; margin-bottom:35px; }
.member-intro-row .section-title { margin:12px 0 0; }
.member-intro-row .page-description { margin:0 0 4px; max-width:470px; line-height:1.8; }
.prompt-filter-line { display:flex; justify-content:space-between; gap:20px; padding:15px 0; margin-bottom:22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:#a99482; font:9px var(--mono); letter-spacing:.13em; }
.prompt-filter-line a,.component-preview-link { color:#e2bca1; }
.prompt-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.prompt-card { background:#171310; border:1px solid #5a44357d; border-radius:9px; overflow:hidden; min-width:0; }
.prompt-card-art { display:block; position:relative; aspect-ratio:1.1; overflow:hidden; background:#211913; }
.prompt-card-art:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(0deg,#110e0cbb,transparent); }
.prompt-card-art img { width:100%;height:100%;object-fit:cover;transition:transform .5s; }
.prompt-card:hover .prompt-card-art img { transform:scale(1.035); }
.prompt-card-locked .prompt-card-art img { filter:brightness(.72) saturate(.72); }
.prompt-badge,.lock-mark { position:absolute;z-index:1;top:13px;left:13px;padding:7px 9px;background:#100e0de8;border:1px solid #80634d88;color:#ead6c1;font:8px var(--mono);letter-spacing:.1em; }
.lock-mark { left:auto;right:13px;font-size:18px;line-height:15px; }
.prompt-card-copy { padding:16px 17px 18px; }
.prompt-card-meta { display:flex;justify-content:space-between;gap:10px;color:#a99482;font:8px var(--mono);text-transform:uppercase; }
.prompt-card-copy h3 { margin:18px 0 7px;font:500 22px/1.1 var(--sans);letter-spacing:-.04em; }
.prompt-card-copy>p { min-height:42px;margin:0;color:#b5a99e;font-size:12px;line-height:1.65; }
.prompt-card-link { display:inline-flex;align-items:center;justify-content:space-between;gap:14px;margin-top:17px;padding:0 0 5px;border:0;border-bottom:1px solid #755243;background:none;color:#dfbba3;font:11px var(--sans);text-align:left;cursor:pointer; }
.prompt-library-end { position:relative;overflow:hidden;border-top:1px solid var(--line);background:linear-gradient(110deg,#1a1210,#211713 60%,#120f0d); }
.prompt-library-end-inner { padding-top:55px;padding-bottom:55px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 32px; }
.prompt-library-end-inner .eyebrow { grid-column:1/-1;color:#c49b80; }
.prompt-library-end h2,.collection-join h2 { margin:0;font:500 clamp(38px,5vw,70px)/.98 var(--sans);letter-spacing:-.065em; }
.collection-hero-art { height:clamp(340px,54vw,710px);position:relative;overflow:hidden;background:#191310; }
.collection-hero-art:after { content:"";position:absolute;inset:50% 0 0;background:linear-gradient(0deg,#100e0dba,transparent); }
.collection-hero-art img { width:100%;height:100%;object-fit:cover;object-position:center 45%; }
.collection-hero-caption { position:absolute;z-index:1;left:var(--frame);right:var(--frame);bottom:22px;display:flex;justify-content:space-between;color:#f1dfce;font:9px var(--mono);letter-spacing:.14em; }
.collection-intro { display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding-top:55px;padding-bottom:60px;border-bottom:1px solid var(--line); }
.collection-intro h2 { margin:16px 0 0;font:500 clamp(42px,5.5vw,78px)/.94 var(--sans);letter-spacing:-.07em; }
.collection-intro>div+div { align-self:end; }
.collection-intro p { color:#c1b3a4;line-height:1.85;max-width:610px; }
.collection-tags { display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }
.collection-tags span { border:1px solid #624b39;padding:8px 10px;color:#c5aa91;font:8px var(--mono);letter-spacing:.1em; }
.collection-items { padding-top:55px;padding-bottom:70px; }
.collection-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.collection-card { border:1px solid #5a44357d;background:#171310;overflow:hidden;border-radius:8px; }
.collection-card-image { position:relative;aspect-ratio:1.05;overflow:hidden;background:#211913; }
.collection-card-image img { width:100%;height:100%;object-fit:cover; }
.collection-open,.collection-lock { position:absolute;left:15px;top:15px;padding:8px 10px;background:#100e0de8;border:1px solid #80634d88;color:#ead6c1;font:8px var(--mono);letter-spacing:.1em; }
.is-locked .collection-card-image:after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,#100e0d69,transparent 64%); }
.collection-lock { z-index:1; }
.collection-card-lock-icon { position:absolute;right:15px;top:13px;z-index:1;color:#f3dfca;font:24px/1 var(--sans);text-shadow:0 2px 12px #000; }
.collection-card-body { padding:18px 20px 22px; }
.collection-card-body>.eyebrow { color:#ad9279;font-size:8px; }
.collection-card-body h3 { margin:12px 0 10px;font:500 26px/1.1 var(--sans);letter-spacing:-.04em; }
.collection-card-meta { display:flex;justify-content:space-between;gap:8px;color:#ad9279;font:8px var(--mono);letter-spacing:.09em; }
.collection-post-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.collection-post-link { display:block;height:100%;color:#f2e8db; }
.collection-post-link .collection-card-image { aspect-ratio:16/10; }
.collection-post-link .collection-card-body>p { margin:0 0 22px;color:#c7b9ad;font-size:13px;line-height:1.75; }
.collection-post-link:hover .collection-card-image img { transform:scale(1.025); }
.collection-post-link .collection-card-image img { transition:transform .25s ease; }
.collection-post-link:focus-visible { outline:2px solid #e0a48a;outline-offset:-3px; }
.studio-provenance { margin:0 0 22px;padding:15px 17px;border-left:2px solid #b8715c;background:#201815;color:#d3bca7; }
.studio-provenance p { margin:0 0 10px;font-size:12px;line-height:1.75; }
.studio-provenance a { color:#f0c5ac;font-size:12px;text-decoration:underline;text-underline-offset:4px; }
.library-collections { margin:0 0 52px; }
.library-collections>h2 { margin:0 0 20px;font-size:28px;letter-spacing:-.04em; }
@media(max-width:700px) { .collection-post-grid { grid-template-columns:1fr;gap:20px; } }
@media(prefers-reduced-motion:reduce) { .collection-post-link .collection-card-image img { transition:none; } }
.collection-asset-note { margin:-17px 0 25px;color:#8f8174;font-size:10px;line-height:1.7; }
.collection-sample { max-width:600px;color:#b9aa9a;font-size:13px;line-height:1.75; }
.locked-copy { display:grid;gap:8px;margin:18px 0 2px; }
.locked-copy span { height:8px;border-radius:10px;background:linear-gradient(90deg,#9b8774,#54463c 70%,transparent);filter:blur(3px);opacity:.65; }
.locked-copy span:nth-child(2) { width:84%; }.locked-copy span:nth-child(3) { width:55%; }
.collection-join { background:#1b1411;border-top:1px solid var(--line);padding:55px 0; }
.collection-join .wrapper { display:flex;align-items:end;justify-content:space-between;gap:30px; }
.collection-join .eyebrow { color:#c49b80;display:block;margin-bottom:16px; }
.upgrade-shell { display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);gap:10vw;padding-top:5px;padding-bottom:90px;align-items:start; }
.upgrade-copy { position:sticky;top:120px; }
.upgrade-copy h2 { margin:20px 0 18px;font:500 clamp(50px,6.5vw,92px)/.9 var(--sans);letter-spacing:-.08em; }
.upgrade-copy h2 em { font:italic 400 1.05em var(--serif);color:#d0a68b; }
.upgrade-copy>p { max-width:480px;color:#b5a99e;line-height:1.8; }
.upgrade-includes { display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-top:34px;max-width:570px;border-top:1px solid var(--line); }
.upgrade-includes span { padding:14px 0;border-bottom:1px solid var(--line);color:#bc9a7d;font:9px var(--mono); }
.upgrade-includes b { display:block;margin-top:7px;color:#e7d7c7;font:500 13px var(--sans); }
.upgrade-card { padding:23px;border:1px solid #82604a;background:linear-gradient(145deg,#201814,#15110f 75%);box-shadow:0 20px 60px #0003; }
.upgrade-card-top { display:flex;justify-content:space-between;align-items:center;gap:10px; }
.upgrade-card-top .eyebrow { color:#d3ae90; }
.status-pill { padding:6px 8px;border:1px solid #805842;color:#d3ae90;font:7px var(--mono);letter-spacing:.07em; }
.billing-switch { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:29px 0 27px;padding:5px;background:#100e0d;border:1px solid #44372f;border-radius:6px; }
.billing-choice { min-height:42px;border:1px solid transparent;border-radius:4px;background:transparent;color:#b8a99a;font:12px var(--sans);cursor:pointer; }
.billing-choice span { margin-left:5px;color:#c99478;font-size:9px; }
.billing-choice.active { background:#30221b;border-color:#73513d;color:#fff0e2; }
.plan-price { display:grid;gap:10px;padding-bottom:23px;border-bottom:1px solid var(--line); }
.plan-price .eyebrow { color:#ad9279; }
.plan-price strong { font:500 clamp(27px,3vw,38px) var(--sans);letter-spacing:-.04em; }
.plan-price>span:last-child { color:#ab9d8e;font-size:11px;line-height:1.6; }
.plan-benefits { list-style:none;padding:8px 0 4px;margin:0; }
.plan-benefits li { padding:12px 0 12px 25px;border-bottom:1px solid #44372f80;color:#d2c4b5;font-size:12px;position:relative; }
.plan-benefits li:before { content:"＋";position:absolute;left:0;color:#ca8a70; }
.upgrade-register { width:100%;justify-content:space-between;margin-top:15px;cursor:pointer; }
.upgrade-disclaimer { color:#95877a;font-size:10px;line-height:1.7;margin:15px 0 0; }
.membership-faq { display:grid;grid-template-columns:.75fr 1fr;gap:8vw;padding-top:52px;padding-bottom:85px;border-top:1px solid var(--line); }
.membership-faq-list details { border-bottom:1px solid var(--line); }
.membership-faq-list summary { display:flex;justify-content:space-between;gap:18px;padding:19px 0;color:#e7d8c8;cursor:pointer;list-style:none;font-size:14px; }
.membership-faq-list summary::-webkit-details-marker { display:none; }
.membership-faq-list summary span { color:#c58b71;font-size:20px; }
.membership-faq-list details[open] summary span { transform:rotate(45deg); }
.membership-faq-list details p { margin:0;padding:0 24px 20px 0;color:#b5a99e;font-size:12px;line-height:1.8; }
.component-showcase { padding-top:12px;padding-bottom:90px;display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.component-heading { min-height:260px;padding:25px;border:1px solid #5a44357d;background:linear-gradient(145deg,#1d1713,#14110f); }
.component-heading>.eyebrow { color:#c58b71; }
.component-heading h2 { margin:20px 0 10px;font:500 clamp(25px,3.3vw,40px)/1.05 var(--sans);letter-spacing:-.055em; }
.component-heading p { max-width:540px;color:#b5a99e;font-size:12px;line-height:1.75; }
.component-nav-sample { display:flex;flex-wrap:wrap;gap:18px;margin-top:25px;padding-top:17px;border-top:1px solid var(--line); }
.component-nav-sample a { color:#e0c5ab;font-size:11px; }
.component-state-row { display:flex;gap:10px;flex-wrap:wrap;margin-top:24px; }
.state-chip { padding:8px 10px;font:8px var(--mono);letter-spacing:.09em; }
.state-chip.is-open { border:1px solid #9b654d;color:#e9c4a7; }.state-chip.is-locked { border:1px solid #58473b;color:#a99888; }
.component-preview-link { display:inline-block;margin-top:20px;font-size:11px; }
.footer-shortcuts { display:flex;align-items:center;flex-wrap:wrap;gap:15px;justify-content:flex-end; }
.footer-shortcuts>a { white-space:nowrap;font-size:9px;color:#b49a82; }
.footer-shortcuts>a:hover { color:#e3b79b; }
.collection-layout { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.8fr);gap:22px;align-items:start;padding-top:34px;padding-bottom:60px; }
.collection-main { min-width:0; }
.collection-breadcrumb { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-bottom:20px; }
.collection-breadcrumb>a,.collection-breadcrumb>div { min-height:54px;display:flex;align-items:center;padding:0 17px;border:1px solid var(--line);border-radius:7px;background:#171310;color:#b9a998;font-size:12px; }
.collection-breadcrumb>div { gap:13px; }
.collection-breadcrumb>div span { color:#735b49; }
.collection-breadcrumb>div strong { color:#f1e3d3;font-weight:500; }
.collection-breadcrumb>a:last-child { justify-content:space-between;gap:15px;color:#ead7c4; }
.collection-breadcrumb>a:last-child span { color:#d99482;font-size:17px; }
.collection-heading { padding:27px 0 22px; }
.collection-heading h1 { margin:12px 0;font:550 clamp(35px,4vw,56px)/.98 var(--sans);letter-spacing:-.07em; }
.collection-heading h1 em { font:italic 400 1em var(--serif);color:#d2a58c; }
.collection-heading>p { max-width:740px;color:#b5a99e;line-height:1.75;font-size:13px; }
.collection-heading dl { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line); }
.collection-heading dl div { display:grid;gap:6px; }
.collection-heading dt { color:#a88f79;font:8px var(--mono);letter-spacing:.13em; }
.collection-heading dd { margin:0;color:#e2d4c4;font-size:11px; }
.collection-asset-note { margin:0 0 16px;color:#938579;font-size:9px;line-height:1.65; }
.collection-prompt { margin:0 0 20px;padding:15px;border:1px solid #44372f;border-radius:9px;background:#181412; }
.collection-image-pair { display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow:hidden; }
.collection-image-pair img { width:100%;height:clamp(210px,30vw,480px);object-fit:cover;border-radius:7px;background:#211913; }
.collection-study-frame{margin:0 0 18px;overflow:hidden;border:1px solid #4c3a30;border-radius:8px;background:#100d0c}
.collection-study-frame>img{display:block;width:100%;height:auto;max-height:820px;object-fit:contain;background:#100d0c}
.collection-study-frame figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid #44372f;color:#c8b6a5;font:8px/1.6 var(--mono);letter-spacing:.07em}
.collection-step-description{margin:0 0 19px;color:#c7b9ad;font-size:13px;line-height:1.75}
.collection-prompt>h2 { margin:18px 0 12px;font:500 clamp(23px,2.4vw,34px)/1.1 var(--sans);letter-spacing:-.05em; }
.collection-access-summary { display:flex;flex-wrap:wrap;gap:9px;margin-top:20px; }
.collection-access-summary span { padding:8px 10px;border:1px solid #705046;border-radius:4px;color:#ebc6b0;font:9px/1.5 var(--mono);letter-spacing:.07em; }
.collection-access-summary span+span { color:#c7b9ad;border-color:#514239; }
.collection-prompt-open { padding:18px;border:1px solid #715044;border-radius:7px;background:#1d1714;min-width:0; }
.collection-prompt-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px; }
.collection-prompt-toolbar .eyebrow { color:#e1af97;font-size:9px; }
.collection-copy { min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 15px;border:1px solid #bf8771;border-radius:5px;background:#794037;color:#fff1e5;font:600 12px/1.4 var(--sans);cursor:pointer; }
.collection-copy:hover { background:#944c40;border-color:#e2ae95; }
.collection-prompt-guide { margin:15px 0;color:#c7b9ad;font-size:12px;line-height:1.75; }
.collection-prompt-step { min-width:0;border-top:1px solid #514037; }
.collection-prompt-step summary { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;list-style:none;cursor:pointer;color:#f2e8db;font:500 12px/1.6 var(--sans); }
.collection-prompt-step summary::-webkit-details-marker { display:none; }
.collection-prompt-step summary>b { color:#dfa990;font:400 21px/1 var(--sans); }
.collection-prompt-step[open] summary>b { transform:rotate(45deg); }
.collection-prompt-inputs { padding:12px 14px;border-left:2px solid #b8715c;background:#251c18;color:#d8c6b6;font-size:11px;line-height:1.8; }
.collection-prompt-inputs strong { color:#f2e8db;font-weight:500; }
.collection-prompt-inputs ul { margin:6px 0 0;padding-left:17px; }
.collection-prompt-code { max-height:380px;overflow:auto;margin:13px 0 18px;padding:16px;border:1px solid #44372f;border-radius:4px;background:#100e0d;color:#e7d8c9;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;font:12px/1.85 var(--mono);letter-spacing:0; }
.collection-copy:focus-visible,.collection-prompt-step summary:focus-visible,.collection-prompt-code:focus-visible { outline:2px solid #e0a48a;outline-offset:4px; }
.collection-locked-lines { display:grid;gap:12px;margin:17px 0; }
.collection-locked-lines i { display:block;height:10px;border-radius:3px;background:#a18b78; }
.collection-locked-lines i:nth-child(2) { width:89%; }.collection-locked-lines i:nth-child(3) { width:96%; }.collection-locked-lines i:nth-child(4) { width:65%; }
.collection-locked-label { position:absolute;top:57%;left:14px;right:14px;margin:0;text-align:center;color:#e5d0bb;font:11px/1.5 var(--sans); }
.collection-prompt-lock { position:relative;min-height:250px;padding:19px;border:1px solid #44372f;border-radius:7px;background:#211b17;overflow:hidden; }
.collection-prompt-blur { filter:blur(5px);opacity:.48;user-select:none; }
.collection-prompt-blur .eyebrow { color:#dbb89b; }
.collection-prompt-blur p { max-width:850px;color:#ddd0c3;font-size:13px;line-height:1.8; }
.collection-lock-center { position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:13px;display:grid;place-items:center;background:#0e0d0c;color:#fff5e8;font:27px/1 var(--sans);box-shadow:0 8px 24px #0007; }
.collection-lock-center svg,.collection-access-item>b svg { width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.collection-unlock { position:absolute;left:19px;right:19px;bottom:18px;min-height:52px;display:flex;align-items:center;justify-content:center;gap:14px;border-radius:6px;background:#0f0d0c;border:1px solid #4f4037;color:#f4e8db;font-size:12px;font-weight:600; }
.collection-unlock:hover,.collection-plan-cta:hover { background:#2b1d18;border-color:#93664e; }
.collection-sidebar { position:sticky;top:102px;display:grid;gap:16px; }
.collection-access-list { display:grid;gap:12px; }
.collection-access-item { min-height:81px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#1b1714;color:#f2e8db; }
.collection-access-item>span { display:grid;gap:7px; }
.collection-access-item strong { font:500 16px/1.1 var(--sans);letter-spacing:-.02em; }
.collection-access-item small { color:#b5a99e;font-size:11px;line-height:1.45; }
.collection-access-item>b { width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:9px;background:#0f0d0c;color:#fff4e7;font:20px/1 var(--sans); }
.collection-access-item:hover { border-color:#86604a; }
.collection-access-plan { padding:22px;border:1px solid #995948;border-radius:9px;background:linear-gradient(155deg,#71382f,#552b25 72%,#3d211d);color:#f7e9dc; }
.collection-access-plan>.eyebrow { color:#e8c2a7;font-size:8px; }
.collection-access-plan h2 { margin:18px 0 10px;font:500 28px/1 var(--sans);letter-spacing:-.04em; }
.collection-plan-price { font:600 22px/1.2 var(--sans); }
.collection-plan-price span { font:400 10px var(--sans);color:#e5c7b1; }
.collection-access-plan>p { color:#e1c6b1;font-size:11px;line-height:1.65; }
.collection-access-plan ul { list-style:none;margin:18px 0;padding:0;border-top:1px solid #e8c0a340; }
.collection-access-plan li { position:relative;padding:11px 0 11px 23px;border-bottom:1px solid #e8c0a326;color:#f4e6da;font-size:11px;line-height:1.5; }
.collection-access-plan li:before { content:'✓';position:absolute;left:0;color:#f1d0b7; }
.collection-plan-cta { min-height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-radius:6px;background:#100e0d;color:#fff4e9;font-size:12px;font-weight:600; }
.collection-access-plan>small { display:block;margin-top:12px;color:#dfbfa8;font-size:9px;line-height:1.6; }
.collection-related { padding-top:20px;padding-bottom:75px;border-top:1px solid var(--line); }
.collection-related-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px; }
.collection-related-card { min-width:0;padding:9px;border:1px solid #514033;border-radius:8px;background:#171310;color:#f2e8db; }
.collection-related-card img { width:100%;aspect-ratio:1.35;object-fit:cover;border-radius:5px; }
.collection-related-card>span { display:block;margin-top:13px;color:#ad9279;font:8px var(--mono);letter-spacing:.12em; }
.collection-related-card h3 { min-height:42px;margin:9px 0;font:500 17px/1.15 var(--sans);letter-spacing:-.03em; }
.collection-related-card>b { color:#d8a68a;font-size:10px;font-weight:500; }
@media(max-width:1000px) {
 .prompt-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .upgrade-shell { gap:6vw; }
 .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .collection-layout { grid-template-columns:minmax(0,1fr) minmax(290px,.72fr);gap:14px; }
 .collection-image-pair img { height:clamp(190px,27vw,320px); }
 .collection-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .member-intro-row,.collection-intro,.upgrade-shell,.membership-faq { grid-template-columns:1fr;gap:22px; }
 .member-intro-row .page-description { max-width:600px; }
 .prompt-library-end-inner { grid-template-columns:1fr; }
 .prompt-library-end-inner .eyebrow { grid-column:auto; }
 .collection-grid,.component-showcase { grid-template-columns:1fr; }
 .collection-layout { grid-template-columns:1fr;padding-top:20px; }
 .collection-sidebar { position:static;grid-row:2; }
 .collection-breadcrumb { grid-template-columns:auto 1fr;gap:8px; }
 .collection-breadcrumb>a,.collection-breadcrumb>div { min-height:48px;padding:0 10px;font-size:10px; }
 .collection-breadcrumb>div { gap:7px; }
 .collection-breadcrumb>a:last-child { grid-column:1/-1; }
 .collection-image-pair img { height:clamp(155px,47vw,280px); }
 .collection-heading dl { gap:8px; }
 .collection-heading dd { font-size:9px; }
 .collection-prompt { padding:9px; }
 .collection-prompt-lock { min-height:230px;padding:14px; }
 .collection-prompt-open { padding:13px; }
 .collection-prompt-code { padding:12px;font-size:11px;max-height:340px; }
 .collection-prompt-toolbar { align-items:flex-start;flex-direction:column;gap:12px; }
 .collection-copy { width:100%; }
 .collection-unlock { left:14px;right:14px;bottom:14px; }
 .collection-join .wrapper { align-items:flex-start;flex-direction:column; }
 .upgrade-copy { position:static; }
 .upgrade-includes { max-width:none; }
 .component-heading { min-height:220px; }
 .footer-shortcuts { justify-content:flex-start;gap:12px; }
}
@media(max-width:420px) {
 .prompt-grid { grid-template-columns:1fr; }
 .prompt-card-art { aspect-ratio:1.32; }
 .upgrade-card { padding:17px; }
 .upgrade-card-top { align-items:flex-start;flex-direction:column; }
 .prompt-filter-line { font-size:8px; }
 .collection-hero-caption { font-size:7px; }
 .collection-related-grid { grid-template-columns:1fr 1fr;gap:9px; }
 .collection-related-card { padding:7px; }
 .collection-related-card h3 { font-size:14px; }
}

/* Direct route to the visual collection from Explore. */
.collection-discovery{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);align-items:center;gap:35px;margin-top:10px;margin-bottom:24px;padding-top:26px;padding-bottom:26px;background:#211a17;color:#f2e8db;border:1px solid #59433a;border-radius:9px;overflow:hidden;transition:transform .2s,border-color .2s}
.collection-discovery:hover{transform:translateY(-2px);border-color:#d99482}
.collection-discovery-copy h2{font-size:clamp(34px,4.5vw,64px);line-height:.95;letter-spacing:-.075em;margin:15px 0 12px;color:#f2e8db}
.collection-discovery-copy h2 em{font-style:normal;color:var(--accent-light)}
.collection-discovery-copy .eyebrow.red{color:var(--accent-light)}
.collection-discovery-copy p{max-width:490px;color:#c7b9ad;line-height:1.7;margin:0 0 22px}
.collection-discovery-link{display:inline-flex;gap:24px;align-items:center;font-size:12px;font-weight:650;color:#f2e8db;border-bottom:1px solid #987364;padding-bottom:8px}
.collection-discovery-link b{font-size:17px}
.collection-discovery-art{height:220px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;overflow:hidden}
.collection-discovery-art img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.collection-discovery-art img:first-child{object-position:50% 40%}
@media(max-width:700px){.collection-discovery{grid-template-columns:1fr;gap:20px;padding-top:22px;padding-bottom:22px}.collection-discovery-art{height:150px}}

/* Expanded homepage: collection, creative process and membership paths. */
.cin-hero-text-link{align-self:center;color:#e5c9b4;font-size:11px;padding:11px 4px;border-bottom:1px solid #735243}
.cin-hero-text-link:hover{color:#fff}
.cin-home-collection{display:grid;grid-template-columns:minmax(320px,.84fr) minmax(0,1.16fr);gap:clamp(28px,5vw,76px);align-items:center;margin-top:34px;margin-bottom:88px;padding-top:clamp(26px,4vw,56px);padding-bottom:clamp(26px,4vw,56px);background:linear-gradient(125deg,#1d1714,#15110f 68%,#201512);border:1px solid #60483a;border-radius:12px;overflow:hidden}
.cin-home-collection-copy>.eyebrow{color:#d99482}
.cin-home-collection-copy h2{margin:19px 0 17px;font:550 clamp(38px,4.7vw,68px)/.98 var(--sans);letter-spacing:-.075em;color:#f2e8db}
.cin-home-collection-copy h2 em{font:italic 400 1.03em/1.05 var(--serif);color:#d99482}
.cin-home-collection-copy>p{max-width:490px;margin:0;color:#c7b9ad;font-size:14px;line-height:1.8}
.cin-home-collection-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0 24px;padding:17px 0;border-top:1px solid #69504175;border-bottom:1px solid #69504175}
.cin-home-collection-facts>div{display:flex;flex-direction:column;gap:5px}
.cin-home-collection-facts b{font:500 25px/1 var(--sans);color:#f2e8db}
.cin-home-collection-facts span{font:8px/1.5 var(--mono);letter-spacing:.04em;color:#bca999}
.cin-home-collection-link{display:inline-flex;align-items:center;gap:25px;color:#f2e8db;border-bottom:1px solid #987364;padding:0 0 9px;font-size:12px}
.cin-home-collection-link span{font-size:18px;color:#d99482}
.cin-home-collection-art{position:relative;display:grid;grid-template-columns:1.3fr .8fr;gap:9px;min-height:390px;height:100%;max-height:510px;padding-bottom:32px}
.cin-home-collection-art img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.cin-home-collection-main{object-position:center 35%}
.cin-home-collection-main,.cin-home-collection-side img,.collection-discovery-art img{object-position:50% 28%}
.cin-home-collection-side{display:grid;grid-template-rows:1fr 1fr;gap:9px;min-height:0}
.cin-home-collection-side img{min-height:0}
.cin-home-collection-caption{position:absolute;left:10px;right:10px;bottom:0;display:flex;justify-content:space-between;gap:12px;color:#d9c7b7;font:8px/1.5 var(--mono);letter-spacing:.11em}
.cin-home-collection-caption b{color:#d99482;font-weight:500;white-space:nowrap}
.cin-home-process{padding:75px 0 86px;background:#15110f;border-top:1px solid #58433775;border-bottom:1px solid #58433775}
.cin-home-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:35px}
.cin-home-section-head .eyebrow{color:#d99482}
.cin-home-section-head h2{margin:18px 0 0;font:550 clamp(42px,5.8vw,78px)/.94 var(--sans);letter-spacing:-.075em;color:#f2e8db}
.cin-home-section-head h2 em{font:italic 400 1.04em/1 var(--serif);color:#d99482}
.cin-home-section-head>p{max-width:380px;margin:0 0 5px;color:#c7b9ad;font-size:13px;line-height:1.8}
.cin-home-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #69504175;border-bottom:1px solid #69504175}
.cin-home-process-grid>a{min-height:225px;padding:23px 25px 25px 0;display:flex;flex-direction:column;align-items:flex-start}
.cin-home-process-grid>a+a{border-left:1px solid #69504175;padding-left:25px}
.cin-home-process-num{font:8px/1.5 var(--mono);letter-spacing:.12em;color:#d99482}
.cin-home-process-grid h3{margin:23px 0 9px;color:#f2e8db;font:500 clamp(20px,2vw,27px)/1.15 var(--sans);letter-spacing:-.04em}
.cin-home-process-grid p{max-width:310px;margin:0 0 22px;color:#bdaea0;font-size:12px;line-height:1.75}
.cin-home-process-grid b{margin-top:auto;color:#e4c5b1;font-size:10px;font-weight:500}
.cin-home-process-grid>a:hover b{color:#fff}
.cin-home-membership{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:55px;align-items:center;margin-top:82px;margin-bottom:90px;padding-top:46px;padding-bottom:46px;background:linear-gradient(115deg,#642e27,#40201b 63%,#251715);border:1px solid #a85e4e;border-radius:12px}
.cin-home-membership .eyebrow{color:#f0b09c}
.cin-home-membership h2{margin:18px 0 15px;font:550 clamp(44px,5.5vw,74px)/.94 var(--sans);letter-spacing:-.075em;color:#fff0e5}
.cin-home-membership h2 em{font:italic 400 1.08em/1 var(--serif);color:#edb49e}
.cin-home-membership>div:first-child>p{max-width:520px;margin:0 0 24px;color:#f0d3c2;font-size:13px;line-height:1.8}
.cin-home-membership-link{display:inline-flex;gap:23px;align-items:center;color:#fff4e9;border-bottom:1px solid #d8957f;padding-bottom:9px;font-size:11px}
.cin-home-membership-link span{font-size:18px}
.cin-home-membership-side{position:relative;border-left:1px solid #df9a8070;padding-left:30px}
.cin-home-membership-stamp{display:inline-block;margin-bottom:18px;padding:8px 10px;border:1px solid #e7a18a;color:#ffe6d8;font:8px/1.35 var(--mono);letter-spacing:.12em}
.cin-home-membership-side ul{list-style:none;margin:0;padding:0}
.cin-home-membership-side li{padding:10px 0;border-bottom:1px solid #df9a8045;color:#f3ded0;font-size:11px}
.cin-home-membership-side li:before{content:'✓';margin-right:11px;color:#f1b39e}
.cin-home-membership-side small{display:block;margin-top:17px;color:#d4b6a7;font-size:9px;line-height:1.6}
@media(max-width:900px){.cin-home-collection{grid-template-columns:1fr;gap:25px;margin-bottom:65px}.cin-home-collection-art{min-height:340px;max-height:430px}.cin-home-section-head{display:block}.cin-home-section-head>p{margin-top:18px}.cin-home-membership{grid-template-columns:1fr;gap:30px;margin-top:65px;margin-bottom:70px}.cin-home-membership-side{border-left:0;border-top:1px solid #df9a8070;padding:22px 0 0}}
@media(max-width:600px){.cin-hero-text-link{width:max-content}.cin-home-collection{margin-top:20px;margin-bottom:48px;padding-top:22px;padding-bottom:20px}.cin-home-collection-art{min-height:260px;max-height:310px;grid-template-columns:1.15fr .85fr}.cin-home-collection-facts{gap:7px;margin:20px 0}.cin-home-collection-facts b{font-size:22px}.cin-home-collection-facts span{font-size:7px}.cin-home-process{padding:55px 0 58px}.cin-home-section-head{margin-bottom:25px}.cin-home-process-grid{grid-template-columns:1fr}.cin-home-process-grid>a{min-height:0;padding:20px 0 22px}.cin-home-process-grid>a+a{border-left:0;border-top:1px solid #69504175;padding-left:0}.cin-home-process-grid h3{margin-top:14px}.cin-home-process-grid p{margin-bottom:15px}.cin-home-membership{margin-top:48px;margin-bottom:55px;padding-top:29px;padding-bottom:29px}.cin-home-membership h2{font-size:52px}}

/* Three-second vector motion studies and shared wide/vertical media frames. */
.cin-home-motion{padding-top:18px;padding-bottom:80px}
.cin-home-motion .cin-home-section-head{margin-bottom:28px}
.cin-home-motion .cin-home-section-head .eyebrow{color:#d99482}
.cin-home-motion-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(205px,.58fr) minmax(0,1fr);gap:16px;align-items:center}
.cin-home-motion-card{min-width:0;border:1px solid #564237;border-radius:9px;background:#171310;overflow:hidden}
.pf-media-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#100e0d;border-bottom:1px solid #514035}
.pf-media-frame[data-ratio="9:16"]{aspect-ratio:9/16}
.pf-media-frame video,.pf-media-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cin-home-motion-card.is-portrait .pf-media-frame{width:min(100%,265px);margin:0 auto}
.motion-art{position:absolute;inset:0;overflow:hidden;color:#f2e8db}
.motion-art-index{position:absolute;left:7%;top:9%;font:7px/1.4 var(--mono);letter-spacing:.14em;color:#d6b9a2}
.motion-art small{position:absolute;left:7%;bottom:9%;font:7px/1.4 var(--mono);letter-spacing:.13em;color:#c6ad99}
.motion-art-type{display:flex;flex-direction:column;justify-content:center;padding:8% 7%;background:radial-gradient(ellipse at 78% 55%,#552c24 0,transparent 48%),linear-gradient(110deg,#18110f,#251713 60%,#100e0d)}
.motion-art-type h3{display:flex;flex-direction:column;margin:0;font:750 clamp(30px,5vw,72px)/.82 var(--sans);letter-spacing:-.08em}
.motion-art-type h3 span{opacity:0;transform:translateX(-28px);animation:motion-type-in 3s cubic-bezier(.2,.7,.2,1) infinite}
.motion-art-type h3 span+span{color:#d99482;animation-delay:.16s}
.motion-art-type>i{height:2px;width:0;margin-top:6%;background:#c46f5b;transform-origin:left;animation:motion-line-in 3s ease-in-out infinite}
.motion-art-orbit{display:flex;flex-direction:column;justify-content:center;padding:13%;background:radial-gradient(circle at 48% 43%,#4a2720,#1a1311 57%,#0e0c0b)}
.motion-art-orbit h3{position:relative;z-index:1;margin:0;font:700 clamp(25px,2.5vw,39px)/.92 var(--sans);letter-spacing:-.075em}
.motion-art-orbit h3 em{font:italic 400 1.1em/1 var(--serif);color:#d99482}
.motion-art-orbit .orbit-ring{position:absolute;left:15%;top:27%;width:72%;aspect-ratio:1;border:1px solid #c4775b9c;border-radius:50%;transform:rotateX(67deg);animation:motion-orbit-turn 3s linear infinite}
.motion-art-orbit .orbit-dot{position:absolute;left:48%;top:26%;width:8px;height:8px;background:#edc9a4;border-radius:50%;box-shadow:0 0 20px #efaa79;transform-origin:10px 105px;animation:motion-orbit-turn 3s linear infinite}
.motion-art-product{display:grid;place-items:center;background:linear-gradient(145deg,#171310,#291b16 55%,#110e0c)}
.motion-product-object{position:relative;display:grid;place-items:center;width:24%;height:52%;border:1px solid #be8063;border-radius:22% 22% 8% 8%;background:linear-gradient(105deg,#241b17,#8e523e 48%,#271913);box-shadow:0 22px 40px #0008,0 0 38px #a5584240;transform:translateY(8px);animation:motion-product-lift 3s ease-in-out infinite}
.motion-product-object:before{content:"";position:absolute;top:-12%;left:35%;width:30%;height:14%;border:1px solid #c59070;border-radius:3px 3px 0 0;background:#39251e}
.motion-product-object i{position:absolute;inset:0;background:linear-gradient(105deg,transparent 26%,#f2d0a399 47%,transparent 62%);transform:translateX(-120%);animation:motion-product-sweep 3s ease-in-out infinite}
.motion-product-object b{position:relative;color:#f3d9c3;text-align:center;font:7px/1.2 var(--mono);letter-spacing:.08em}
.motion-light-sweep{position:absolute;inset:-40% auto -40% -20%;width:20%;background:linear-gradient(90deg,transparent,#d8947270,transparent);filter:blur(8px);transform:skewX(-16deg);animation:motion-product-sweep 3s ease-in-out infinite}
.cin-home-motion-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px}
.cin-home-motion-meta>div{display:flex;flex-direction:column;gap:4px}
.cin-home-motion-meta b{font:8px/1.4 var(--mono);letter-spacing:.07em;color:#e7d4c4}
.cin-home-motion-meta span{font:7px/1.4 var(--mono);letter-spacing:.08em;color:#aa9684}
.cin-home-motion-meta a{color:#d99482;font-size:20px}
.work-card .pf-media-frame[data-ratio="16:9"]{aspect-ratio:16/9}
.work-card .pf-media-frame[data-ratio="9:16"]{aspect-ratio:9/16;max-width:300px;margin-left:auto}
@keyframes motion-type-in{0%,7%{opacity:0;transform:translateX(-28px)}20%,68%{opacity:1;transform:translateX(0)}82%,100%{opacity:0;transform:translateX(12px)}}
@keyframes motion-line-in{0%,24%{width:0;opacity:0}42%,67%{width:40%;opacity:1}83%,100%{width:0;opacity:0}}
@keyframes motion-orbit-turn{0%{transform:rotate(0deg) rotateX(67deg)}100%{transform:rotate(360deg) rotateX(67deg)}}
@keyframes motion-product-lift{0%,9%{transform:translateY(14px);opacity:.55}30%,72%{transform:translateY(0);opacity:1}88%,100%{transform:translateY(14px);opacity:.55}}
@keyframes motion-product-sweep{0%,22%{transform:translateX(-120%);opacity:0}38%,68%{transform:translateX(480%);opacity:1}80%,100%{transform:translateX(480%);opacity:0}}
@media(max-width:850px){.cin-home-motion-grid{grid-template-columns:1fr 1fr}.cin-home-motion-card.is-portrait{grid-column:1/-1;grid-row:2}.cin-home-motion-card.is-portrait .pf-media-frame{width:min(100%,245px)}}
@media(max-width:600px){.cin-home-motion{padding-top:0;padding-bottom:58px}.cin-home-motion-grid{grid-template-columns:1fr;gap:13px}.cin-home-motion-card.is-portrait{grid-column:auto;grid-row:auto}.cin-home-motion-card.is-portrait .pf-media-frame{width:min(68%,260px)}.cin-home-motion-meta{padding:11px 12px}}
@media(prefers-reduced-motion:reduce){.motion-art-type h3 span{opacity:1;transform:none;animation:none}.motion-art-type>i{width:40%;opacity:1;animation:none}.motion-art-orbit .orbit-ring,.motion-art-orbit .orbit-dot,.motion-product-object,.motion-product-object i,.motion-light-sweep{animation:none}.motion-product-object{transform:none;opacity:1}.motion-product-object i{transform:translateX(35%);opacity:.55}}