/* =====================================================================
   VISTAS de The Creative Notes: artículo · Daily Experiment · archivo (estilo periódico)
   ===================================================================== */
[hidden]{display:none!important}
.sections{display:flex;flex-wrap:wrap;justify-content:center;background:var(--paper);border-bottom:1.5px solid var(--black);font:700 12px var(--narrow);letter-spacing:.09em}
.sections a{padding:10px 16px;border-left:1.5px solid var(--black);transition:background .2s,color .2s}
.sections a:first-child{border-left:0}
.sections a:hover{background:var(--black);color:var(--lime)}
.sections a.is-on{background:var(--lime);color:#000}
.feature h2 a,.card h3 a,.editor h2 a{display:block;color:inherit}
.card h3 a:hover,.editor h2 a:hover{color:var(--purple)}
.editor__more{display:inline-block;margin-top:10px;font:500 11px var(--mono);letter-spacing:.06em;border-bottom:2px solid var(--black)}
.editor__more:hover{color:var(--purple);border-color:var(--purple)}

.view{background:var(--paper);margin-top:calc(var(--u)*1.4);padding:calc(var(--u)*2.4) calc(var(--u)*2.2) calc(var(--u)*2.6);animation:viewIn .5s cubic-bezier(.2,.7,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ghost{background:transparent!important;color:var(--black)!important}
button{font-family:var(--mono);cursor:pointer;color:inherit}

/* ---- artículo ---- */
.story{max-width:1080px;margin:0 auto}
.story__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font:500 12px var(--mono);letter-spacing:.07em}
.story__kicker .tag{position:static;transform:rotate(-3deg);margin-right:4px}
.story__back{margin-left:auto;border-bottom:1.5px solid var(--black)}
.story__back:hover{color:var(--purple);border-color:var(--purple)}
.story__h{font:italic 900 clamp(48px,10vw,124px)/.84 var(--cond);text-transform:uppercase;letter-spacing:-.015em;margin:22px 0 18px}
.story__h span{display:block}
.story__h em{display:block;width:max-content;max-width:100%;font-style:inherit;background:var(--lime);padding:.04em .14em 0 .1em;margin-left:-.1em;transform:rotate(-1.4deg);transform-origin:left}
.story__dek{font:italic 400 clamp(22px,3vw,38px)/1.1 var(--serif);max-width:26em;text-wrap:balance}
.story__by{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin:22px 0;padding:10px 0;border-block:3px double var(--black);font:400 11px var(--mono);letter-spacing:.07em}
.story__by b{font-weight:700}
.story__rule{height:0;margin-bottom:26px}
.story__fig{position:relative;overflow:hidden;border:1.5px solid var(--black);aspect-ratio:3.1/1;background:#0b0b0b}
.story__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kbEye 16s ease-in-out infinite alternate}
.story__fig--cutout{background:var(--purple)}
.story__fig--cutout::before{content:"";position:absolute;left:8%;top:-30%;width:42%;aspect-ratio:1;border-radius:50%;background:var(--lime)}
.story__fig--cutout img{object-fit:contain;object-position:right bottom;animation:none;inset:auto 2% 0 auto;height:112%;width:auto;max-width:none}
.story__cap{font:400 10.5px var(--mono);letter-spacing:.06em;margin:8px 0 28px;opacity:.75}
.story__cols{column-count:3;column-gap:38px;column-rule:1.5px solid var(--black);font:400 16.5px/1.62 'Source Serif 4',Georgia,serif;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.story__cols>p{margin:0 0 1em}
.story__cols>p:first-child::first-letter{float:left;font:italic 900 5.4em/.76 var(--cond);padding:.07em .1em 0 0;color:var(--purple)}
.story__cols h2{break-after:avoid;margin:1.1em 0 .5em;font:italic 900 31px/.92 var(--cond);text-transform:uppercase;letter-spacing:-.005em;text-align:left}
.story__cols h2:first-child{margin-top:0}
.story__cols blockquote{column-span:all;margin:.6em 0 1.4em;padding:22px 5%;border-block:3px double var(--black);text-align:center;font:italic 400 clamp(28px,4.4vw,58px)/1.04 var(--serif);text-wrap:balance}
.story__cols blockquote::before{content:"“";display:block;font:italic 900 1.4em/.5 var(--cond);color:var(--purple)}
.story__ul-t{break-after:avoid;margin:1em 0 .5em;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left}
.story__cols ul{margin:0 0 1em;padding-left:1.2em;list-style:square;text-align:left}
.story__cols li{margin-bottom:.35em}
.story__cols li::marker{color:var(--purple)}
.story__try{break-inside:avoid;display:flex;flex-direction:column;gap:8px;margin:1.2em 0;padding:16px;background:var(--lime);border:1.5px solid var(--black);box-shadow:5px 5px 0 var(--black);font:400 12.5px/1.55 var(--mono);text-align:left;hyphens:none}
.story__try b{letter-spacing:.1em;font-size:11px}
.story__try a{font-weight:700;border-bottom:2px solid var(--black);align-self:flex-start}
.story__try a:hover{color:var(--purple);border-color:var(--purple)}
.story__cols .story__sig{font:italic 400 34px/1 var(--serif);transform:rotate(-3deg);text-align:right}
.story__next{margin-top:34px}
.story__next header{display:flex;align-items:center;gap:14px;font:500 12px var(--mono);letter-spacing:.06em}
.story__next header i{flex:1;height:1.5px;background:var(--black)}
.story__next>div{display:grid;grid-template-columns:1fr 1fr;border-top:3px double var(--black);margin-top:12px}
.story__next a{display:flex;flex-direction:column;gap:8px;padding:18px 20px 18px 0;transition:color .2s}
.story__next a+a{padding-left:24px;padding-right:0;border-left:1.5px solid var(--black)}
.story__next small,.story__next span{font:500 11px var(--mono);letter-spacing:.06em}
.story__next b{font:italic 900 clamp(26px,3.4vw,42px)/.92 var(--cond);text-transform:uppercase}
.story__next a:hover{color:var(--purple)}

/* ---- Daily Experiment ---- */
.dx{max-width:1080px;margin:0 auto}
.dx__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.dx__head h1{display:flex;flex-direction:column;align-items:flex-start;gap:.04em;font:italic 900 clamp(46px,8vw,96px)/.95 var(--cond);text-transform:uppercase}
.dx__head h1 span{background:var(--black);color:var(--paper);padding:.05em .16em .02em .12em;margin-left:-.1em;transform:rotate(-1.5deg);transform-origin:left}
.dx__head h1 b{font-weight:inherit;background:var(--lime);padding:.04em .14em 0 .1em;margin-left:-.1em;transform:rotate(-2deg);transform-origin:left}
.dx__nav{display:flex;align-items:center;gap:16px}
.dx__nav a,.dx__nav>span{display:grid;place-items:center;width:42px;aspect-ratio:1;border-radius:50%;border:2px solid var(--black);font:700 24px/1 var(--mono);transition:background .2s,transform .2s}
.dx__nav>span{opacity:.25}
.dx__nav a:hover{background:var(--lime);transform:scale(1.08)}
.dx__nav p{display:flex;flex-direction:column;align-items:center;line-height:1}
.dx__nav small{font:500 10px var(--mono);letter-spacing:.1em}
.dx__nav b{font:italic 900 clamp(44px,6vw,70px)/.95 var(--cond);color:var(--purple)}
.dx__nav em{font:500 11px var(--mono);font-style:normal;letter-spacing:.06em}
.dx__strip{display:flex;margin:22px 0 0;overflow-x:auto;border-block:3px double var(--black);scrollbar-width:none}
.dx__strip::-webkit-scrollbar{display:none}
.dx__strip a{position:relative;flex:1 0 54px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 0 14px;border-left:1.5px solid var(--black);transition:background .2s}
.dx__strip a:first-child{border-left:0}
.dx__strip small{font:500 9.5px var(--mono);letter-spacing:.08em}
.dx__strip b{font:italic 900 24px/1 var(--cond)}
.dx__strip i{position:absolute;bottom:5px;width:6px;height:6px;border-radius:50%;background:transparent}
.dx__strip a.is-done i{background:var(--purple)}
.dx__strip a:hover{background:rgba(217,255,0,.55)}
.dx__strip a.is-on{background:var(--lime)}
.dx__strip .dx__all{flex:0 0 64px;justify-content:center;font:700 12px var(--mono);letter-spacing:.06em}
.dx__live{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px 0 4px;font:500 11.5px var(--mono);letter-spacing:.07em}
.dx__live b{color:var(--orange)}
.dx__live a{border-bottom:1.5px solid var(--black)}
.dx__live a:hover{color:var(--purple);border-color:var(--purple)}
.dx__grid{display:grid;grid-template-columns:1.55fr 1fr;margin-top:16px}
.dx__brief{padding:6px 34px 10px 0;border-right:1.5px solid var(--black)}
.dx__kit{padding-left:30px;display:flex;flex-direction:column;gap:20px}
.dx__lbl{font:700 11px var(--mono);letter-spacing:.12em;color:var(--purple);margin-bottom:8px}
.dx__brief h2{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:4px 0 18px}
.dx__brief h2 em{font:italic 900 clamp(44px,7vw,92px)/.9 var(--cond);background:var(--lime);padding:.03em .14em 0 .1em;margin-left:-.1em;transform:rotate(-1.4deg);transform-origin:left;overflow-wrap:anywhere}
.dx__brief h2 span{font:italic 400 clamp(26px,3.4vw,42px)/1.05 var(--serif)}
.dx__big{font:600 clamp(20px,2.2vw,26px)/1.3 'Source Serif 4',Georgia,serif;margin-bottom:18px}
.dx__rule{background:var(--black);color:var(--paper);padding:16px 20px;margin-bottom:14px;transform:rotate(-.5deg);box-shadow:5px 5px 0 var(--purple)}
.dx__rule b{display:block;font:700 11px var(--mono);letter-spacing:.14em;color:var(--lime);margin-bottom:6px}
.dx__rule p{font:italic 400 clamp(22px,2.4vw,30px)/1.12 var(--serif)}
.dx__bonus{border:2px dashed var(--black);padding:12px 16px;margin-bottom:18px}
.dx__bonus b{display:block;font:700 11px var(--mono);letter-spacing:.12em;margin-bottom:4px;color:var(--orange)}
.dx__bonus p{font:400 14px/1.45 var(--mono)}
.dx__why{font:400 15px/1.6 'Source Serif 4',Georgia,serif;margin-bottom:12px}
.dx__why b{font-weight:600}
.dx__warm{font:400 12px/1.5 var(--mono);padding-top:12px;border-top:1.5px solid var(--black)}
.dx__warm b{letter-spacing:.1em;margin-right:6px}
.dx__box{padding-bottom:18px;border-bottom:3px double var(--black)}
.dx__box:last-child{border-bottom:0;padding-bottom:0}
.dx__timer output{display:block;font:italic 900 clamp(56px,7vw,92px)/.95 var(--cond);font-variant-numeric:tabular-nums}
.dx__timer output.is-low{color:var(--orange);animation:blink 1s steps(2) infinite}
.dx__timer output.is-zero{color:var(--purple)}
@keyframes blink{50%{opacity:.35}}
.dx__btns,.dx__foot{display:flex;gap:10px;flex-wrap:wrap}
.dx__btns{margin-top:8px}
.dx button{border:2px solid var(--black);border-radius:40px;padding:10px 22px;background:var(--lime);font:700 12px var(--mono);letter-spacing:.08em;transition:transform .2s,box-shadow .2s,background .2s}
.dx button:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--black)}
.dx button:active{transform:none;box-shadow:none}
.dx__pal{display:grid;grid-template-columns:repeat(5,1fr);border:2px solid var(--black)}
.dx button.sw{position:relative;height:84px;border:0;border-left:2px solid var(--black);border-radius:0;padding:0;background:var(--c);box-shadow:none;transform:none}
.dx button.sw:first-child{border-left:0}
.sw span{position:absolute;left:0;right:0;bottom:5px;text-align:center;font:700 9px var(--mono);letter-spacing:.03em;color:#fff;mix-blend-mode:difference}
.dx button.sw:hover{filter:brightness(1.12)}
.dx__meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.dx__meta b{display:block;font:italic 900 24px/1 var(--cond);text-transform:uppercase}
.dx__meta small{display:block;margin-top:3px;font:400 11px var(--mono)}
.dx__meta .dx__lvl{letter-spacing:.12em;color:var(--purple);font-size:20px}
.dx__steps{margin-top:22px;padding-top:18px;border-top:3px double var(--black)}
.dx__steps ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}
.dx__steps li{padding:0 20px;border-left:1.5px solid var(--black)}
.dx__steps li:first-child{border-left:0;padding-left:0}
.dx__steps label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font:400 14.5px/1.5 'Source Serif 4',Georgia,serif}
.dx__steps input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:2px;border:2px solid var(--black);background:transparent;cursor:pointer;display:grid;place-items:center}
.dx__steps input:checked{background:var(--lime)}
.dx__steps input:checked::after{content:"✓";font:700 14px/1 var(--mono)}
.dx__steps input:checked+span{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.6}
.dx__foot{position:relative;align-items:center;margin-top:26px;padding-top:18px;border-top:1.5px solid var(--black)}
.dx__done{display:inline-flex;align-items:center;gap:10px}
.dx__done i{width:14px;height:14px;border:2px solid var(--black);border-radius:50%;background:#fff}
.dx button.dx__done.is-on{background:var(--purple);color:#fff}
.dx__done.is-on i{background:var(--lime)}
.dx__streak{margin-left:auto;font:500 12px var(--mono);letter-spacing:.05em}
.dx__streak b{font:italic 900 28px/1 var(--cond);color:var(--purple);margin-right:4px}
.dx__stamp{position:absolute;right:22%;top:-34px;padding:6px 16px;border:3px solid var(--purple);color:var(--purple);font:italic 900 28px/1 var(--cond);letter-spacing:.06em;transform:rotate(-9deg) scale(1.6);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,1.4,.4,1)}
.dx__stamp.is-on{opacity:.9;transform:rotate(-9deg) scale(1)}

/* ---- archivo ---- */
.ar{max-width:1080px;margin:0 auto}
.ar__list{margin-top:26px;border-top:3px double var(--black)}
.ar__list li{border-bottom:1.5px solid var(--black)}
.ar__list a{display:grid;grid-template-columns:90px 130px 1fr 70px 24px;gap:16px;align-items:baseline;padding:13px 6px;transition:background .2s,padding .2s}
.ar__list a:hover{background:var(--lime);padding-left:14px}
.ar__n{font:italic 900 22px/1 var(--cond);color:var(--purple)}
.ar__d,.ar__t{font:500 11px var(--mono);letter-spacing:.06em}
.ar__list b{font:italic 900 clamp(20px,2.6vw,30px)/1 var(--cond);text-transform:uppercase}
.ar__list i{font:700 14px var(--mono);font-style:normal;color:var(--purple)}

@media (max-width:900px){
  .view{padding:20px 16px 26px}
  .sections{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sections a{flex:none}
  .story__cols{column-count:1;font-size:17px;text-align:left}
  .story__fig{aspect-ratio:1.7/1}
  .story__next>div{grid-template-columns:1fr}
  .story__next a+a{padding-left:0;border-left:0;border-top:1.5px solid var(--black)}
  .dx__grid{grid-template-columns:1fr}
  .dx__brief{padding:0 0 22px;border-right:0;border-bottom:3px double var(--black)}
  .dx__kit{padding:20px 0 0}
  .dx__steps ol{grid-template-columns:1fr;gap:14px}
  .dx__steps li,.dx__steps li:first-child{padding:0;border-left:0}
  .dx__streak{margin-left:0;width:100%}
  .dx__stamp{right:6%;top:-40px}
  .ar__list a{grid-template-columns:62px 1fr 24px;gap:4px 10px}
  .ar__d{grid-column:2}.ar__list b{grid-column:1/-1;grid-row:2}.ar__t{display:none}
}
/* ---- compartir ---- */
.dx__share{margin-top:30px;padding-top:18px;border-top:3px double var(--black)}
.dx__share>header{display:flex;align-items:center;gap:14px;font:500 12px var(--mono);letter-spacing:.06em;margin-bottom:18px}
.dx__share>header i{flex:1;height:1.5px;background:var(--black)}
.dx__sgrid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:34px;align-items:start}
.dx__card{border:2px solid var(--black);box-shadow:7px 7px 0 var(--black);transform:rotate(-1deg);background:#fff;line-height:0}
.dx__card canvas{width:100%;height:auto;display:block}
.dx__sctl h3{font:italic 900 clamp(34px,4vw,52px)/.95 var(--cond);text-transform:uppercase;margin-bottom:10px}
.dx__sctl h3 em{font-style:inherit;background:var(--lime);padding:0 .12em;display:inline-block;transform:rotate(-1.5deg)}
.dx__sp{font:400 15px/1.55 'Source Serif 4',Georgia,serif;margin-bottom:14px;max-width:34em}
.dx__sbtns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.dx__file input{position:absolute;opacity:0;width:1px;height:1px}
.dx__file span,.dx__nets button,.dx__tags .tg{display:inline-block;border:2px solid var(--black);border-radius:40px;padding:10px 18px;background:var(--lime);font:700 12px var(--mono);letter-spacing:.08em;cursor:pointer;transition:transform .2s,box-shadow .2s}
.dx__file span:hover,.dx__nets button:hover,.dx__tags .tg:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--black)}
.dx__file input:focus-visible+span{outline:3px solid var(--purple);outline-offset:2px}
.dx__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.dx__tags .tg{background:transparent;color:var(--purple);border-color:var(--purple);padding:6px 12px;font-size:12px;letter-spacing:.02em}
.dx__tags .tg:hover{box-shadow:3px 3px 0 var(--purple)}
.dx__sctl textarea{display:block;width:100%;resize:vertical;border:2px solid var(--black);background:rgba(255,255,255,.55);padding:12px;font:400 13px/1.5 var(--mono);color:var(--black);margin-bottom:16px}
.dx__nets{display:flex;flex-wrap:wrap;gap:8px}
.dx__nets button{background:var(--black);color:var(--paper);padding:9px 16px}
.dx__nets button.ig{background:var(--purple);color:#fff}
.dx__hint{margin-top:14px;font:400 11.5px/1.5 var(--mono);opacity:.75}
.dx__hint.is-hot{opacity:1;background:var(--lime);padding:6px 8px}
.dx__lbl small{font-weight:400;letter-spacing:.04em;color:var(--black);opacity:.7}
@media (max-width:900px){.dx__sgrid{grid-template-columns:1fr}.dx__card{max-width:340px;margin:0 auto 6px}}
@media (prefers-reduced-motion:reduce){.view,.story__fig img,.dx__timer output{animation:none!important}}