@font-face {
  font-family: 'CCO Roboto';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/roboto-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'CCO Roboto';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/roboto-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'CCO Roboto Serif';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/roboto-serif-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'CCO Roboto Serif';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/roboto-serif-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cco {
    --cco-ink: #16161a;
    --cco-paper: #fff;
    --cco-line: #e3e2e8;
    --cco-muted: #5c5965;
    --cco-gold: #f4c548;
    --cco-dark: #151419;
    --cco-sans: Roboto, "CCO Roboto", Arial, sans-serif;
    --cco-serif: "Roboto Serif", "CCO Roboto Serif", Georgia, serif;
    color: var(--cco-ink);
    font-family: var(--cco-sans);
    line-height: 1.5;
    margin-block: 1rem 2rem;
    min-width: 0;
}
.cco *, .cco *::before, .cco *::after { box-sizing: border-box; }
.cco [hidden] { display: none !important; }
.cco a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.cco a:hover { text-decoration: underline; }
.cco :is(a, button, input, select, summary):focus-visible { outline: 2px solid #8a6200; outline-offset: 3px; }
.cco-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, .5fr);
    align-items: center;
    gap: clamp(1rem, 4vw, 3.75rem);
    padding: clamp(1.35rem, 4vw, 3rem);
    background: radial-gradient(ellipse at 93% 5%, #3b2c16, transparent 63%), var(--cco-dark);
    color: #fff9e9;
    border-top: 5px solid var(--cco-gold);
    border-radius: 0 0 6px 6px;
}
.cco-kicker {
    display: block;
    font-family: var(--cco-sans);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .125em;
    line-height: 1.45;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.cco-hero .cco-kicker, .cco-widget-head .cco-kicker { color: var(--cco-gold); }
.cco .cco-display {
    color: #fff9e9;
    font-family: var(--cco-sans);
    font-size: clamp(2.15rem, 5.2vw, 4.3rem);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.04;
    margin: .55rem 0 1.25rem;
}
.cco-display em { color: var(--cco-gold); font-style: normal; }
.cco-hero p { margin: 0 0 .65rem; max-width: 52ch; color: #efeadb; font: 400 clamp(.9rem, 1.5vw, 1rem)/1.6 var(--cco-serif); }
.cco-hero-link { display: inline-block; margin-top: .5rem; font-weight: 800; }
.cco-clock { min-width: 0; padding: 1.1rem; border: 1px solid #6d5b34; border-radius: 9px; color: #fff9e9; }
.cco-clock time { display: block; margin-top: .1rem; color: #e8dfc8; font-size: .82rem; }
.cco-clock > small { display: block; margin-top: .5rem; color: #e8dfc8; font-size: .68rem; }
.cco-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin-top: .85rem; }
.cco-units > span { min-width: 0; padding: .5rem .1rem; background: #fff5d90e; text-align: center; border-radius: 5px; }
.cco-units b { display: block; font-size: clamp(1rem, 3vw, 2rem); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cco-units small { color: #e8dfc8; font-size: .66rem; }
.cco-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: 0;
    margin: .8rem 0 0;
    border: 1px solid var(--cco-line);
    border-radius: 9px;
    background: var(--cco-paper);
}
.cco-dates > * { display: block; padding: .8rem 1rem; }
.cco-dates b, .cco-dates span { display: block; }
.cco-dates span, .cco-dates a { font-size: .84rem; }
.cco-dates a { align-self: center; color: #684900; font-weight: 700; }
.cco-section { margin-block: clamp(1.8rem, 4vw, 3.25rem); }
.cco-section > .cco-kicker { color: #775400; }
.cco .cco-section h2 { color: var(--cco-ink); font-family: var(--cco-sans); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 850; line-height: 1.12; letter-spacing: -.035em; margin: .25rem 0 .55rem; }
.cco .cco-section h3 { color: var(--cco-ink); font-family: var(--cco-sans); font-size: 1.12rem; font-weight: 800; margin: 1.35rem 0 .35rem; }
.cco-intro { max-width: 68ch; margin: 0 0 .65rem; }
.cco-method { color: var(--cco-muted); font-size: .86rem; }
.cco-method summary, .cco-ficha summary { font-weight: 700; cursor: pointer; }
.cco-method p { margin: .45rem 0; max-width: 64ch; }
.cco-meta { font-size: .8rem; color: var(--cco-muted); margin: .5rem 0; }
.cco-appear { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0 1.25rem; }

.cco-appear .cco-film { font-size: .88rem; overflow-wrap: anywhere; }
.cco-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.cco-panel { min-width: 0; border: 1px solid var(--cco-line); border-radius: 8px; background: var(--cco-paper); }
.cco-panel > summary { padding: .95rem 1rem; font-size: 1rem; font-weight: 800; cursor: pointer; }
.cco-panel[open] > summary { border-bottom: 1px solid var(--cco-line); }
.cco-panel > summary::marker { color: #8a6200; }
.cco-panel > .cco-meta { padding: 0 1rem .5rem; }
.cco ol.cco-rank, .cco ul.cco-results, .cco ul.cco-awards, .cco ul.cco-news { list-style: none; padding: 0; margin: 0; }
.cco .cco-rank > li, .cco .cco-results > li { margin: 0; padding: .62rem .85rem; border-bottom: 1px solid var(--cco-line); }
.cco-rank > li { display: grid; grid-template-columns: 1.35rem 2.5rem minmax(0, 1fr) minmax(2.6rem, 18%); gap: .55rem; align-items: center; }
.cco-position { font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cco-muted); padding-top: .13rem; }
.cco-candidate, .cco-results > li { min-width: 0; overflow-wrap: anywhere; }
.cco-candidate strong, .cco-results strong { display: block; }
.cco-film { font-weight: 750; }
.cco-candidate strong + .cco-film, .cco-results strong + .cco-film { font-weight: 500; color: var(--cco-muted); font-size: .9em; }
.cco-score { color: #5b4100; font-size: .78rem; text-align: end; line-height: 1.3; }
.cco-score small { font-size: .68rem; }
.cco-meter { display: block; margin-top: .32rem; height: 3px; background: var(--cco-line); border-radius: 3px; }
.cco-meter > span { display: block; height: 100%; border-radius: 3px; background: #aa7900; background: color-mix(in srgb, var(--cco-gold), #372700 35%); }
.cco-ficha { grid-column: 2 / -1; font-size: .77rem; color: var(--cco-muted); margin-top: .25rem; }
.cco-rank > li:has(.cco-ficha[open]) .cco-candidate { grid-column: 3 / -1; }
.cco-rank > li:has(.cco-ficha[open]) .cco-score { grid-column: 3 / -1; }
.cco-rank .cco-ficha .cmf-main, .cco-results .cco-ficha .cmf-main { grid-template-columns: minmax(0, 1fr); }
.cco-badge { display: inline-block; margin: 0 .35rem .2rem 0; padding: .1rem .35rem; background: var(--cco-gold); color: #211c11; border-radius: 3px; font-size: .72rem; font-weight: 800; }
.cco-news > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .5rem; padding: .6rem 0; margin: 0; border-bottom: 1px solid var(--cco-line); }
.cco-news time { color: var(--cco-muted); font-size: .8rem; }
.cco-empty { padding: 1rem; border: 1px dashed var(--cco-line); border-radius: 8px; }
.cco-archive-stat { border-left: 1px solid #6d5b34; padding-left: clamp(1rem, 4vw, 2.5rem); }
.cco-archive-stat b { display: block; color: var(--cco-gold); font-size: clamp(2.2rem, 7vw, 5.5rem); line-height: 1; font-weight: 900; letter-spacing: -.07em; }
.cco-archive-stat span { display: block; margin-top: .35rem; color: #e8dfc8; }
.cco-filters { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(9rem, 1.25fr) repeat(2, minmax(5rem, .6fr)) auto auto; align-items: end; gap: .6rem; margin: .9rem 0; padding: .9rem; background: var(--cco-paper); border: 1px solid var(--cco-line); border-radius: 8px; }
.cco-filters label { min-width: 0; font-size: .8rem; font-weight: 800; }
.cco-filters input, .cco-filters select { display: block; width: 100%; min-width: 0; min-height: 2.65rem; padding: .35rem .5rem; margin: .2rem 0 0; border: 1px solid #bdb29c; background: #fff; color: var(--cco-ink); border-radius: 5px; font: inherit; font-weight: 500; }
.cco .cco-button { min-height: 2.65rem; border: 0; border-radius: 5px; padding: .5rem .75rem; background: var(--cco-gold); color: #211c11; font: inherit; font-size: .83rem; font-weight: 850; cursor: pointer; }
.cco-clear { align-self: end; padding: .55rem 0; font-size: .83rem; }
.cco-count { margin: 1rem 0 .6rem; }
.cco-year { padding-bottom: 1.15rem; }
.cco .cco-year h2 { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .45rem; padding-bottom: .4rem; border-bottom: 2px solid var(--cco-gold); color: var(--cco-ink); font-family: var(--cco-sans); font-weight: 900; font-size: 1.7rem; }
.cco-year h2 small { color: var(--cco-muted); font-size: .86rem; font-weight: 600; }
.cco-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .55rem; }
.cco .cco-awards > li { padding: .7rem .78rem; margin: 0; border: 1px solid var(--cco-line); background: var(--cco-paper); border-radius: 7px; overflow-wrap: anywhere; }
.cco-awards .cco-kicker { color: #755400; margin-bottom: .24rem; }
.cco-credit { display: block; color: var(--cco-muted); font-size: .87rem; }
.cco-paging { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.cco-paging a { padding: .35rem .6rem; border: 1px solid var(--cco-line); border-radius: 4px; font-weight: 700; }
.cco-widget { width: 100%; border: 1px solid var(--cco-line); border-radius: 8px; background: var(--cco-paper); overflow: hidden; margin-block: 0 1rem; container-type: inline-size; }
.cco-widget-head { padding: .85rem .9rem .8rem; border-top: 4px solid var(--cco-gold); background: var(--cco-dark); color: #fff9e9; }
.cco .cco-widget-head h2 { font-family: var(--cco-sans); font-size: clamp(1.25rem, 7cqw, 2rem); color: #fff9e9; font-weight: 850; margin: .2rem 0 .55rem; line-height: 1.15; }
.cco-widget-head .cco-clock { padding: .5rem; }
.cco-widget-head .cco-clock .cco-kicker { font-size: .66rem; }
.cco-widget-head .cco-units { margin-top: .4rem; }
.cco-widget-head .cco-units b { font-size: clamp(.85rem, 6.5cqw, 1.35rem); }
.cco-widget-label { margin: 0; padding: .65rem .85rem .25rem; font-size: .78rem; font-weight: 800; color: #6d4d00; }
.cco-widget .cco-rank { font-size: .88rem; }
.cco-widget-link { display: flex; justify-content: space-between; align-items: center; padding: .8rem .85rem; background: var(--cco-gold); color: #211c11 !important; font-size: .85rem; font-weight: 850; }
@media (max-width: 860px) {
    .cco-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
    .cco-hero { grid-template-columns: minmax(0, 1fr); }
    .cco-archive-stat { border-left: 0; border-top: 1px solid #6d5b34; padding: .7rem 0 0; }
    .cco-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cco-shell { box-sizing: border-box; width: min(calc(100% - 40px), 1200px); max-width: 1200px; margin: 0 auto; padding: 1.25rem 0 2.5rem; }
.cco-shell > .cco { margin: 0; }
.cco .cco-intro, .cco .cco-method p { font-family: var(--cco-serif); line-height: 1.65; }
.cco .cco-film { line-height: 1.25; }
.cco-thumb { display: block; width: 100%; min-width: 0; height: auto; object-fit: cover; aspect-ratio: 2 / 3; border-radius: 4px; margin: 0; }
.cco-portrait { aspect-ratio: 1; border-radius: 50%; object-position: center 32%; }
.cco-thumb-empty { background: linear-gradient(150deg, #e9e8ee, #d9d7e0); }
.cco-feature { background: #fff; border: 1px solid var(--cco-line); border-radius: 6px; min-width: 0; overflow: hidden; }
.cco-feature-image { background: #201e25; }
.cco-feature-image .cco-thumb { width: 100%; border-radius: 0; }
.cco-feature-placeholder { display: grid; place-items: center; aspect-ratio: 2 / 3; color: var(--cco-gold); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 900; background: radial-gradient(ellipse at 25% 20%, #635033, transparent 74%), #242029; }
.cco-feature-copy { padding: .7rem .65rem .78rem; }
.cco-feature-copy .cco-film { display: block; font-size: clamp(.8rem, 1.1vw, .98rem); }
.cco-feature-copy > span:not(.cco-film) { display: block; margin-top: .25rem; color: var(--cco-muted); font-size: .75rem; }
.cco .cco-results .cco-result-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .6rem; align-items: center; }
.cco .cco-awards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cco-award-card { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: .65rem; min-height: 5.65rem; }
.cco-award-card .cco-film { display: block; }
.cco-award-card .cco-credit { margin-top: .22rem; }
.cco-attribution { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: 1.35rem; padding-top: .75rem; border-top: 1px solid var(--cco-line); color: var(--cco-muted); }
.cco-attribution img { display: block; width: 62px; height: auto; }
.cco-attribution small { font-size: .72rem; }
.cco-widget .cco-rank > li { grid-template-columns: 1.15rem 1.65rem minmax(0, 1fr) minmax(2.15rem, 18%); gap: .4rem; }
.cco-widget .cco-rank .cco-position { padding: 0; }
.cco-widget .cco-results .cco-result-row { grid-template-columns: 1.65rem minmax(0, 1fr); }
.cco-embed, .cco-embed body { margin: 0; padding: 0; background: transparent; }
.cco-embed .cco-widget { margin: 0; }
@media (max-width: 950px) {
    .cco .cco-awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .cco-shell { width: calc(100% - 28px); padding-top: .8rem; }
    .cco-hero, .cco-category-grid { grid-template-columns: minmax(0, 1fr); }
    .cco-appear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cco .cco-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cco-award-card { grid-template-columns: 2.1rem minmax(0, 1fr); gap: .5rem; }
}
@media (max-width: 410px) {
    .cco .cco-awards { grid-template-columns: minmax(0, 1fr); }
}
