/* ============================================================
   1017_new_v1 — stylesheet
   ============================================================ */

:root {--card: #spinner_area; --text-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --bg: #main-widget; --sh: 0 1px 2px rgba(20, 32, 29, 0.04), 0 6px 24px rgba(20, 32, 29, 0.06); --rad: 12px; --dim: #79868c; --acc: #0d9488; --night-2: #1d2c28; --sh-l: 0 16px 50px rgba(20, 32, 29, 0.18); --on-night: rgba(255, 255, 255, 0.6); --edge: #line-card; --acc-d: #0f766e; --ink: #16221f; --display: "Sora", system-ui, sans-serif; --bg-2: #main-feature; --rad-s: 8px; --read: 45rem; --edge-2: #select_slot; --tint: rgba(13, 148, 136, 0.08); --band: 62rem; --max: 70rem; --text: #46535a; --acc-l: #2bb3a3; --night: #14201d;}html{-webkit-text-size-adjust:100%; scroll-behavior: smooth; font-size:111.1%;}

*, *::before, *::after {box-sizing: border-box; margin:0; padding:0;}

body {line-height:1.72; color: var(--text); font-family: var(--text-font); -webkit-font-smoothing:antialiased; font-size:1.06rem; -moz-osx-font-smoothing:grayscale; background: var(--bg);}ul, ol{list-style: none;}img, svg{max-width:100%; display: block; page-break-inside:auto; background-blend-mode:normal;}
a:hover {color: var(--acc-d);}
a {color: var(--acc); text-decoration:none;}
button {cursor: pointer; font-family:inherit;}
h1 {font-family: var(--display); font-weight:bold; letter-spacing:-0.015em; color: var(--ink); line-height:1.18;}

:focus-visible {border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px; outline: 2px solid var(--acc); outline-offset:2px;}

.navLine {white-space: nowrap; margin:-1px; clip:rect(0, 0, 0, 0); position: absolute; height:1px; width:1px; padding:0; overflow: hidden; border:0;}/* span headings (no h2/h3 anywhere but article content) */
.mediaIcon, body .actionMeta, *.el-breadcrumb, .ratingHandle:not(._f92a5b), .box--danger:not(._f92a5b){display: block; letter-spacing:-0.01em; color: var(--ink); font-family: var(--display); font-weight:700;}
.mediaIcon {margin-bottom:1.1rem; font-size:1.25rem; font-variant-ligatures:normal;}.actionMeta{margin-bottom:0.26rem; font-size:1.09rem;}
.el-breadcrumb {margin-bottom:1.27rem; font-size:1.24rem;}

/* ---------- scroll progress ---------- */
.tagTime {z-index: 1200; transition:width 0.049s linear; position: fixed; top:0; width:0; left:0; background: var(--acc); height:7px;}/* ---------- topbar ---------- */
.toggleSecondary{border-bottom: 1px solid var(--edge); z-index: 1000; image-rendering:auto; backdrop-filter:saturate(150%) blur(8px); top:0; background:rgba(255, 240, 255, 0.89); position: sticky;}html .h-xs{max-width: var(--max); gap:0.99rem; margin-inline:auto; min-height:3.94rem; backface-visibility:visible; justify-content: space-between; align-items: center; word-spacing:normal; width:100%; padding:0 1.25rem; display: flex;}.statusBlock{display: inline-flex; align-items: center;}
.statusBlock img {width:auto; height:30px;}

.commentSlot {padding:0.38rem; background:none; flex-direction: column; border:0; display: none; gap:7px;}
.commentSlot span {background: var(--ink); height:2px; display: block; border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px; width:25px;}

.hero-title {display: flex; gap:1.73rem; align-items: center;}
.ratingTrack {display: flex; gap:1.55rem;}
.ratingTrack a, .counterArea {font-weight:600; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase; color: var(--text);}.ratingTrack a:hover, .counterArea:hover{color: var(--acc); text-underline-offset:auto; mix-blend-mode:normal;}
.ui-header {display: flex; gap:0.92rem; align-items: center;}
.spinner {transition:background 0.196s; padding:0.56rem 1.08rem; letter-spacing:0.03em; text-transform:uppercase; border-radius: var(--rad-s); background: var(--acc); font-weight:700; font-size:0.73rem; color:#content-screen;}
.spinner:hover {color:#content-screen; background: var(--acc-d);}/* ---------- flow / shell ---------- */
.modalBar{padding-bottom:3.97rem;}

/* ---------- post ---------- */
.snackbarData {max-width: var(--read); border: 1px solid var(--edge); background: var(--card); margin:1.63rem auto 0; box-shadow: var(--sh); overflow: hidden; border-radius: var(--rad);}
.modalColumn {padding:2.48rem 2.67rem 1.3rem;}

.accordionRow {color: var(--dim); gap:0.57rem 1.29rem; flex-wrap: wrap; align-items: center; font-size:0.86rem; display: flex;}
.border-screen {margin-bottom:0.77rem; font-size: clamp(1.7rem, 1.2rem + 2.3vw, 2.5rem);}.footerHead{align-items: center; gap:0.47rem; display: inline-flex;}.searchAddon{font-style:italic;}
.footerHead svg {opacity:0.78; flex-shrink: 0;}

/* toc */
.formBar {padding:0 2.67rem;}
.sortInput {background: var(--bg-2); transform-style:flat; border: 1px solid var(--edge); padding:1.03rem 1.21rem; border-radius: var(--rad-s);}
.tabsValue {display: flex; align-items: center; justify-content: space-between;}
.ratingHandle {margin:0px; font-size:0.98rem;}
.stepperPrefix {transition:transform 0.222s, color 0.188s; border:0; display: inline-flex; padding-top:0.27rem;padding-right:0.27rem;padding-bottom:0.27rem;padding-left:0.27rem; color: var(--dim); background:none;}
.stepperPrefix:hover {color: var(--acc);}
.sortInput.is-shut .stepperPrefix {transform: rotate(-90deg);}body .sortInput.is-shut .progressLink{display: none;}html .progressLink{border-top: 1px solid var(--edge); margin-top:0.73rem; padding-top:0.63rem; line-height:1.9; font-size:0.86rem; text-underline-offset:auto; background-blend-mode:normal;}
.progressLink a {color: var(--text); display: block;}
.progressLink a:hover {text-rendering:auto; color: var(--acc);}.progressLink .counterClose:not(._f92a5b){font-size:0.93rem; padding-left:1.06rem;}

/* rich content */
.avatar__preview {padding:1.47rem 2.55rem 0.37rem;}
.screenArea {line-height:1.8; font-size:1rem; color: var(--text);}
.screenArea > * + * {margin-top:1.19rem;}
.screenArea h2 {margin-top:2.24rem; padding-top:1.38rem; font-size:1.52rem; color: var(--ink); line-height:1.3; border-top: 1px solid var(--edge-2); font-family: var(--display); scroll-margin-top:5rem;}
.screenArea h3 {font-size:1.14rem; color: var(--ink); scroll-margin-top:5rem; font-family: var(--display); margin-top:1.71rem;}html .screenArea h4{margin-top:1.27rem; font-size:1.05rem; color: var(--ink); font-family: var(--display);}*.screenArea a{text-underline-offset:2px; text-decoration-thickness:1px; text-decoration:underline;}
.screenArea strong, .screenArea b {color: var(--ink); font-weight:700;}
.screenArea ul, .screenArea ol {margin-left:1.22rem;}html .screenArea ul{list-style: disc;}
.screenArea ol {perspective:none; list-style: decimal;}
.screenArea li {margin-top:0.39rem; padding-left:0.26rem;}.screenArea img{margin:1.5rem 0; border-radius: var(--rad-s);}
.screenArea blockquote {padding:0.85rem 1.23rem; color: var(--ink); border-radius: 0 var(--rad-s) var(--rad-s) 0; border-left: 3px solid var(--acc); background: var(--tint); font-synthesis:weight style small-caps; font-style:italic;}
.screenArea code {font-size:0.82em; border-radius:1px; border: 1px solid var(--edge); padding:0.11em 0.39em; font-family:ui-monospace, "SF Mono", "Courier New", monospace; background: var(--bg-2);}*.screenArea pre{line-height:1.7; color:#app-progress; font-size:0.93rem; overflow-x: auto; background: var(--night); padding:1.1rem 1.27rem; border-radius: var(--rad-s);}
.screenArea pre code {padding:0; border:0; background:none; color:inherit;}
.screenArea table {font-size:0.97rem; width:100%; border-collapse:collapse;}.screenArea th, .screenArea td{text-rendering:auto; text-align: left; padding:0.71rem 0.87rem; border: 1px solid var(--edge);}.screenArea th{font-weight:bold; color: var(--ink); background: var(--bg-2);}
.screenArea hr {margin:1.94rem 0; border-top: 1px solid var(--edge); border:0;}
.spinnerTrigger {gap:0.49rem; display: flex; flex-wrap: wrap;}

/* share */
.c-banner-preview {padding:1.78rem 2.6rem 2.41rem;}
.statusOverlay {border: 1px solid var(--edge); transition:background 0.183s, color 0.15s, border-color 0.144s, transform 0.103s; border-radius:50%; color: var(--dim); align-items: center; justify-content: center; height:40px; width:38px; background: var(--card); display: inline-flex;}
.statusOverlay:hover {color:#content-screen; transform: translateY(-1px); background: var(--acc); border-color: var(--acc);}/* ---------- talk / reach (forms) ---------- */
.viewCell, html .mediaLabel{box-shadow: var(--sh); border-radius: var(--rad); padding:1.98rem 2.59rem 2.07rem; border: 1px solid var(--edge); margin:2.23rem auto 0; background: var(--card); max-width: var(--read);}
.actionWrap {font-size:0.92rem; margin-bottom:1.27rem; color: var(--dim); margin-top:-0.68rem;}/* ---------- more (related) ---------- */
:where(.selectTrack){margin:2.13rem auto 0; max-width: var(--read);}
.l-section-head {grid-template-columns: repeat(3, 1fr); gap:1.04rem;}
.bannerZone {display: block; border-radius: var(--rad-s); background: var(--card); padding:1.1rem 1.15rem; transition:transform 0.178s, box-shadow 0.213s, border-color 0.224s; border: 1px solid var(--edge); box-shadow: var(--sh);}
.l-section-head {display: grid;}
.bannerZone:hover {border-color: var(--acc-l); box-shadow: var(--sh-l); transform: translateY(-2px);}
.filterTime {-webkit-hyphens:manual;-ms-hyphens:manual;image-rendering:auto; line-height:1.4; font-weight:bold; font-size:1.03rem; color: var(--ink); hyphens:manual; font-family: var(--display);}

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="password"], textarea {color: var(--ink); border: 1px solid var(--edge); text-underline-offset:auto; padding:0.67rem 0.99rem; width:100%; border-radius: var(--rad-s); background: var(--bg-2); font:inherit; transition:border-color 0.181s, box-shadow 0.21s, background 0.248s; widows:2;}
input::placeholder, textarea::placeholder {color: var(--dim);}
input:focus, textarea:focus {background: var(--card); box-shadow:0 0 0 3px rgba(22, 133, 143, 0.21); border-color: var(--acc); outline:0;}textarea{resize: vertical; min-height:6.52rem;}

.alertFill {display: flex; gap:0.98rem; widows:2; flex-wrap: wrap; text-decoration-skip-ink:auto;}
.skeletonDetail {flex: 1 1 calc(50% - 0.5rem); min-width:0;}
.breadcrumbTrigger {flex: 1 1 100%;}

.pr-20 {display: flex;}
.pr-20 input {min-width:0;}
.pr-20 input {border-right:0em; border-radius: var(--rad-s) 0 0 var(--rad-s); flex: 1;}
.pr-20 .sliderText {border-radius: 0 var(--rad-s) var(--rad-s) 0;}

/* ---------- buttons ---------- */
.sliderText {border-radius: var(--rad-s); justify-content: center; border: 1px solid var(--edge); font-weight:700; transition:background 0.223s, color 0.207s, border-color 0.175s; background: var(--card); font-size:0.89rem; gap:0.47rem; display: inline-flex; min-height:2.91rem; letter-spacing:0.03em; padding:0.71rem 1.31rem; text-transform:uppercase; color: var(--ink); align-items: center;}
.sliderText:hover {background: var(--bg-2); color: var(--ink); border-color: var(--dim);}
.mediaAction {border-color: var(--acc); background: var(--acc); color:#content-screen;}body .statusSecondary{padding:0.74rem 0.98rem; min-width:2.96rem;}
.mediaAction:hover {background: var(--acc-d); border-color: var(--acc-d); color:#content-screen;}

/* ---------- decks (newsletter + account) ---------- */
.py-half {display: grid; grid-template-columns: 1fr 1fr; gap:1.28rem; max-width: var(--band); margin:2.65rem auto 0;}*.bannerSlot{width:100%;}
.nav__wrap--wide {flex-direction: column; box-shadow: var(--sh); padding:1.48rem 1.68rem; border-radius: var(--rad); display: flex; background: var(--card); border: 1px solid var(--edge);}html .menuOverlay{color: var(--dim); margin-bottom:0.96rem; font-size:0.81rem;}
.reviewClose {flex-direction: column; display: flex; gap:0.61rem; margin-top:auto;}/* ---------- footer ---------- */
:where(.el-feature){background: var(--night); margin-top:3.47rem; padding:2.54rem 0; color: var(--on-night);}.reviewClose .sliderText{width:100%;}
.overflow-screen {display: flex; margin-inline:auto; align-items: center; justify-content: space-between; width:100%; gap:1.49rem; padding:0 1.2rem; contain:none; max-width: var(--max); flex-wrap: wrap;}
.dialogPrefix img {filter:brightness(0) invert(1); opacity:0.86; height:29px; width:auto;}
.el-chip {margin-top:0.72rem; color: var(--on-night);}
.el-chip {font-size:0.78rem;}body .c-select-item{display: flex; gap:1.29rem;}
.c-select-item a {transform-style:flat; font-size:0.87rem; color: var(--on-night);}body .c-select-item a:hover{color:#content-screen;}

.toolbarHandle {display: flex; gap:0.62rem;}
.toolbarHandle a {width:35px; color: var(--on-night); font-variant-caps:normal; display: inline-flex; background:rgba(245, 255, 247, 0.01); justify-content: center; height:38px; text-underline-offset:auto; border-radius: var(--rad-s); align-items: center; transition:background 0.218s, color 0.2s, transform 0.158s;}*.toolbarHandle a:hover{transform: translateY(-1px); background: var(--acc); color:#content-screen;}

/* ---------- back to top ---------- */
.t-status {align-items: center; box-shadow: var(--sh-l); height:46px; color:#content-screen; width:43px; z-index: 900; justify-content: center; border-radius:50%; background: var(--acc); transition:background 0.209s, transform 0.18s; right:1.65rem; display: none; bottom:1.65rem; position: fixed; border:0;}*.t-status:hover{transform: translateY(-2px); background: var(--acc-d);}

/* ---------- cookie ---------- */
.leading-20 {padding:0.82rem 0; left:0; position: fixed; right:0; background: var(--card); box-shadow:0 -3px 25px rgba(19, 36, 39, 0.06); border-top: 1px solid var(--edge); z-index: 1100; bottom:0;}
.t-status.title-search {display: inline-flex;}.accordionDetail{margin-inline:auto; justify-content: space-between; display: flex; align-items: center; width:100%; gap:1.44rem; max-width: var(--max); padding:0 1.29rem;}
.leading-20 p {margin:0; color: var(--text); font-size:0.8rem;}
.leading-20 .sliderText {flex-shrink: 0; padding:0.51rem 1.48rem; min-height:2.42rem;}

/* ---------- auth layers (CSS :target modal) ---------- */
.module {z-index: 1300; text-underline-offset:auto; display: none; inset:0; position: fixed;}
.module:target {padding-top:1.31rem;padding-right:1.31rem;padding-bottom:1.31rem;padding-left:1.31rem; place-items: center; display: grid;}.ratingWrapper{border-radius: var(--rad); position: relative; box-shadow: var(--sh-l); border: 1px solid var(--edge); background: var(--card); z-index: 1; padding:1.75rem 1.79rem 1.68rem; animation:pop 0.162s ease-out; width: min(94vw, 25rem);}
.filterSlot {-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); inset:0; perspective:none; position: absolute; background:rgba(31, 32, 24, 0.5); orphans:2;}
@keyframes pop {from{opacity:0; transform: translateY(8px) scale(0.99);} to {transform: none; opacity:1;} }html .filterSpacer{color: var(--dim); font-size:1.55rem; right:0.81rem; line-height:1; position: absolute; top:0.72rem; text-decoration:none;}html .filterSpacer:hover{color: var(--ink);}.module .commentLabel:not(._f92a5b){display: flex; flex-direction: column; gap:0.86rem;}
.dropdownSlot {font-size:0.88rem; margin-top:0.17rem; print-color-adjust:economy; transform-style:flat; text-align: center; color: var(--dim);}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .commentSlot {contain:none;}
  .commentSlot {display: flex; font-synthesis:weight style small-caps;}
  .hero-title {padding:0.53rem 0; flex-direction: column; left:0; position: absolute; align-items: stretch; border-bottom: 1px solid var(--edge); box-shadow: var(--sh); top:100%; gap:0; background: var(--card); right:0;}
  .hero-title {display: none;}
  .hero-title.open {display: flex;}
  .ratingTrack {padding:0 1.31rem; gap:0; flex-direction: column;}
  .ratingTrack a {border-bottom: 1px solid var(--edge-2); padding:0.8rem 0;}.l-section-head:not(._f92a5b){grid-template-columns: 1fr 1fr;}
  .ui-header {padding:0.91rem 1.25rem 0.36rem; gap:0.86rem;}
}

@media (max-width: 680px) {
  html {font-size:100%;}
  .py-half {grid-template-columns: 1fr; isolation:auto;}
  .modalColumn {padding:1.86rem 1.32rem 1.15rem;}
  .formBar {padding:0 1.46rem;}
  .c-banner-preview {padding:1.32rem 1.39rem 1.89rem;}
  .avatar__preview {padding:1.28rem 1.41rem 0.3rem;}
  .viewCell, .mediaLabel {word-spacing:normal; padding:1.52rem 1.32rem 1.73rem; break-inside:auto;}
  .l-section-head {grid-template-columns: 1fr;}.overflow-screen:not(._f92a5b){align-items: flex-start; gap:1.26rem; flex-direction: column;}
  .accordionDetail {text-align: center; flex-direction: column; gap:0.78rem;}
}

@media (max-width: 460px) {
  .skeletonDetail {flex: 1 1 100%;}
  .t-status {right:0.98rem; bottom:0.98rem;}
}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  * {background-blend-mode:normal; transition:none !important; animation:none !important; contain:none;}
}

@media print {
  .toggleSecondary, .c-banner-preview, .viewCell, .selectTrack, .mediaLabel,
  .py-half, .el-feature, .t-status, .leading-20, .module, .tagTime {display: none !important;}
  .snackbarData {max-width:none; widows:2; border:0; box-shadow:none; font-variant-ligatures:normal;}
  body {background:#content-screen;}
}