/* Tatian.app / editorial portfolio / v2.00 */
:root{--paper:#f4f1e9;--ink:#203c35;--muted:#5f6860;--line:#c8cec3;--green:#174c43;--sage:#d6dfc9;--coral:#b6573d;--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--mono:'DM Mono',monospace}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}::selection{background:#df9d7f;color:#172c26}a{color:inherit;text-decoration:none}button{font:inherit}h1,h2,h3,p{margin:0}img,svg{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:6px}a:focus-visible{border-radius:1px}[hidden]{display:none!important}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.small-caps{font:400 11px/1.55 var(--mono);letter-spacing:.075em;text-transform:uppercase}.skip-link{position:absolute;left:24px;top:-100px;padding:15px 20px;background:var(--ink);color:var(--paper);z-index:99}.skip-link:focus{top:12px}
.site-header{height:102px;display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid var(--line)}.wordmark{font:500 35px/.9 var(--serif);letter-spacing:-2px}.wordmark-dot{color:var(--coral)}.wordmark-app{font-family:var(--sans);font-size:16px;letter-spacing:-.7px;font-weight:500}.header-note{font-size:12px;color:var(--muted);margin-left:36px;margin-right:auto}.site-header nav{display:flex;gap:30px;font-size:12px;font-weight:500}.site-header nav a{padding-block:15px}.site-header nav span{margin-left:8px}.site-header nav a:hover{color:var(--coral)}
.hero{padding-top:47px;padding-bottom:80px}.hero-kicker{display:flex;justify-content:space-between;gap:20px}.hero-kicker>span:last-child{color:var(--muted)}.hero h1{font:400 clamp(76px,9.9vw,145px)/1.04 var(--serif);letter-spacing:-.068em;margin:39px 0 32px;max-width:1100px}.hero-second{display:flex;align-items:center;gap:.17em}.hero h1 em{font-weight:400;color:var(--green)}.spark{width:91px;height:91px;color:var(--coral);margin-left:auto;margin-right:7%;stroke:currentColor;stroke-width:2.5;transition:transform .8s ease}.hero:hover .spark{transform:rotate(45deg)}.hero-bottom{display:grid;grid-template-columns:1fr 1.15fr .5fr;align-items:end;gap:35px}.hero-bottom p{font-size:16px;line-height:1.7;color:var(--muted)}.hero-side{text-align:right;color:var(--muted)}.text-link{display:inline-flex;justify-content:space-between;gap:30px;align-items:center;width:max-content;max-width:100%;font-size:13px;font-weight:500;border-bottom:1px solid currentColor;padding:9px 0}.text-link span{font-size:20px;line-height:1;transition:transform .2s ease}.text-link:hover span{transform:translate(3px,-3px)}.hero-bottom>.text-link{margin-bottom:2px}
.section-heading{border-top:1px solid var(--ink);padding-top:17px;margin-bottom:30px;display:flex;align-items:center;justify-content:space-between}.section-heading h2{font-weight:400}.section-aside{font:italic 16px var(--serif);color:var(--muted)}.one-step{display:grid;grid-template-columns:5fr 7fr;min-height:580px;background:var(--green);color:var(--paper)}.step-copy{display:flex;flex-direction:column;align-items:flex-start;padding:32px 38px 28px}.feature-meta{display:flex;justify-content:space-between;width:100%;color:#d5dece;gap:15px}.app-icon{width:43px;height:43px;border-radius:11px;margin-top:33px;margin-bottom:20px}.step-copy h3{font:400 clamp(48px,5.5vw,74px)/1.02 var(--serif);letter-spacing:-.045em}.step-copy h3 em{font-weight:400;color:#dbe6be}.step-copy p{font-size:14px;line-height:1.75;max-width:305px;color:#d9e2d7;margin-top:25px}.step-copy .text-link{margin-top:25px}.feature-footnote{margin-top:auto;padding-top:24px;font-size:10px;color:#c4d3c5}.step-art{position:relative;overflow:hidden;min-height:580px;background:var(--sage);color:var(--ink);display:grid;place-items:center}.path-art{position:absolute;width:100%;height:100%;inset:0;fill:none;stroke:#abbf9f;stroke-width:2}.path-art circle{fill:var(--green);stroke:none}.art-note{position:absolute;top:30px;right:32px;color:#46674f}.step-paper{position:relative;width:76%;max-width:382px;background:#fffcf4;padding:25px 30px 30px;transform:rotate(-7deg);box-shadow:0 28px 35px -22px #243f384b;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.one-step:hover .step-paper{transform:rotate(-3deg) translateY(-5px)}.paper-top{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.08em;border-bottom:1px solid #d8dbce;padding-bottom:16px}.paper-top>span:last-child{font-size:17px}.paper-label{display:block;margin-top:31px;font-size:12px;color:#59685c}.step-paper p{font:400 clamp(25px,2.7vw,38px)/1.25 var(--serif);letter-spacing:-.025em;margin:13px 0 34px}.paper-done{display:inline-block;border-radius:6px;padding:11px 26px;background:#526846;color:#fff;font-size:14px}.paper-help{font-size:12px;color:#5f6a58;margin-left:24px}.art-caption{position:absolute;bottom:27px;left:28px;right:28px;display:flex;justify-content:space-between;gap:16px;font-size:9px;color:#506a53}
.feature-pair{display:grid;grid-template-columns:1.32fr 1fr;column-gap:8%;margin-top:55px}.game-art{display:block;position:relative;background:#272d37;min-height:425px;overflow:hidden;color:#f3eacb}.game-art-top{position:absolute;top:25px;left:26px;right:26px;display:flex;justify-content:space-between;z-index:2;font-size:10px;color:#dcd6bd}.portal{position:absolute;left:21%;top:8%;width:65%;height:100%;transform:rotate(15deg)}.portal i{position:absolute;border:1px solid #747c7680;border-radius:50%;width:100%;height:84%;left:0;top:0}.portal i:nth-child(2){inset:5% 9%;width:82%;height:75%}.portal i:nth-child(3){inset:10% 18%;width:64%;height:66%}.game-art img{position:absolute;height:auto;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.elementalist{width:48%;left:27%;top:20%;z-index:3;filter:drop-shadow(0 18px 13px #11182388);transform:rotate(-8deg)}.slime{width:24%;left:9%;top:57%;z-index:4;transform:rotate(-13deg)}.widow{width:26%;right:6%;top:58%;z-index:2;transform:rotate(14deg)}.game-art:hover .elementalist{transform:rotate(-3deg) translateY(-8px)}.game-art:hover .slime{transform:rotate(-6deg) translateY(-4px)}.game-art:hover .widow{transform:rotate(5deg) translateX(4px)}.game-glyph{position:absolute;color:#d8bb76;font-size:35px;font-family:var(--serif)}.glyph-one{left:17%;top:30%}.glyph-two{right:15%;top:25%;font-size:20px}.game-art-bottom{position:absolute;bottom:26px;left:26px;font-size:9px;color:#dcd6bd}.round-arrow{position:absolute;bottom:22px;right:24px;border:1px solid #aaa998;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:20px}.feature-caption{padding-top:21px}.feature-caption>.small-caps{font-size:10px;color:var(--muted)}.feature-caption h3{font:400 clamp(23px,2.5vw,34px)/1.2 var(--serif);letter-spacing:-.035em;margin-top:9px}.feature-caption h3 a{display:flex;gap:20px;justify-content:space-between;align-items:baseline}.feature-caption h3 a span{font:20px var(--sans)}.feature-caption h3 a:hover{color:var(--coral)}.feature-caption p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:13px;max-width:400px}.reading{padding-top:124px}.reading-art{background:#d9c6b9;display:grid;place-items:center;min-height:365px;position:relative;overflow:hidden}.reading-art-top{position:absolute;top:22px;left:24px;font-size:10px;color:#5c5148}.book{background:#ece4ce;box-shadow:10px 14px 15px #5c453329,inset 5px 0 8px #74694a26;border-left:5px solid #6c7961;width:61%;max-width:270px;padding:21px 17px 15px;position:relative;transform:rotate(8deg);transition:transform .5s ease}.reading-art:hover .book{transform:rotate(3deg) translateY(-5px)}.book-top{font-size:7px}.book-title{font:400 36px/.98 var(--serif);letter-spacing:-.04em;margin-top:15px}.book-title em{font-weight:400}.landscape{width:100%;margin-top:7px}.book-bottom{display:block;border-top:1px solid #9b9f87;margin-top:10px;padding-top:9px;font-size:6px;letter-spacing:.02em}.reading-margin{position:absolute;right:10px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-size:8px;color:#5c5148}
.about-strip{display:grid;grid-template-columns:1fr 2.5fr 1.2fr;gap:35px;border-block:1px solid var(--line);padding-block:51px;margin-top:100px;align-items:start}.about-strip>.small-caps{max-width:105px;padding-top:7px}.about-strip>p{font:400 clamp(27px,3.25vw,43px)/1.2 var(--serif);letter-spacing:-.035em}.about-strip>p em{color:var(--coral);font-weight:400}.about-note>p{font-size:13px;line-height:1.75;color:var(--muted);margin-top:9px}.about-symbol{font:30px var(--serif);color:var(--coral)}.about-note .text-link{font-size:11px;gap:15px;margin-top:12px}
.project-index{padding-top:98px;padding-bottom:87px}.index-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:46px}.index-heading h2{font:400 clamp(45px,5vw,68px)/1.08 var(--serif);letter-spacing:-.045em;margin-top:17px}.index-heading h2 em{font-weight:400}.index-heading>p{max-width:280px;font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:7px}.index-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:17px}.filterbar{display:flex;gap:20px;flex-wrap:wrap}.filter{border:0;background:transparent;padding:9px 0 6px;min-height:40px;color:var(--muted);font-size:12px;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.filter:hover{color:var(--coral)}.filter.active{color:var(--ink);border-color:var(--coral)}#count{font-size:10px;white-space:nowrap;color:var(--muted)}.project{border-bottom:1px solid var(--line)}.project-line{display:grid;grid-template-columns:40px 1fr 100px 155px 24px;align-items:center;gap:24px;padding:26px 0;position:relative;transition:background .2s,padding .2s}.project-number{font:10px var(--mono);color:var(--muted);align-self:start;padding-top:7px}.project-text h3{font:400 26px/1.2 var(--serif);letter-spacing:-.035em;transition:color .2s}.project-text p{font-size:12px;line-height:1.6;color:var(--muted);margin-top:7px;max-width:540px}.project-category,.project-status{font:10px/1.6 var(--mono);color:var(--muted)}.project-status{justify-self:end;text-align:right}.project-arrow{font-size:24px;transition:transform .2s}.project-line:is(a):hover{background:#e8eadf;padding-inline:12px}.project-line:is(a):hover h3{color:var(--green)}.project-line:is(a):hover .project-arrow{transform:translate(3px,-3px)}.is-private .project-arrow{font-size:20px;color:var(--muted)}.index-note{font-size:11px;color:var(--muted);margin-top:22px}
.site-footer{border-top:1px solid var(--ink);padding-top:42px;padding-bottom:25px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-wordmark{font:400 clamp(40px,6.8vw,90px)/1.1 var(--serif);letter-spacing:-.055em;display:flex;align-items:center;gap:.22em}.footer-wordmark em{font-weight:400}.footer-wordmark>span{font:400 .65em var(--sans);color:var(--coral);margin-left:25px;transition:transform .2s}.footer-wordmark:hover>span{transform:translate(5px,-5px)}.back-top{font-size:11px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:48px;font:9px/1.6 var(--mono);color:var(--muted)}
@media(min-width:1600px){.hero h1{font-size:155px}}
@media(max-width:1100px){.wrap{width:calc(100% - 72px)}.header-note{display:none}.hero-bottom{grid-template-columns:1fr 1.3fr}.hero-side{display:none}.step-copy{padding-inline:28px}.one-step{grid-template-columns:1fr 1.15fr}.step-copy h3{font-size:60px}.feature-pair{column-gap:6%}.game-art{min-height:370px}.reading{padding-top:95px}.reading-art{min-height:330px}.book-title{font-size:30px}.about-strip{grid-template-columns:.65fr 2fr 1.3fr;gap:25px}.project-line{grid-template-columns:30px 1fr 75px 110px 20px;gap:18px}.filterbar{gap:15px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{height:78px;gap:15px}.wordmark{font-size:31px}.site-header nav{gap:20px;font-size:11px}.site-header nav span{display:none}.hero{padding-top:29px;padding-bottom:51px}.hero-kicker{display:block}.hero-kicker .small-caps{font-size:9px}.hero-kicker>span:last-child{display:block;margin-top:6px}.hero h1{font-size:clamp(44px,14vw,86px);line-height:1.06;margin-block:33px 27px;letter-spacing:-.065em}.hero-second{gap:.16em}.spark{width:43px;height:43px;margin-left:auto;margin-right:1%}.hero-bottom{grid-template-columns:1fr;gap:20px}.hero-bottom p{font-size:14px;grid-row:1}.hero-bottom>.text-link{font-size:12px}.section-heading{margin-bottom:22px;padding-top:13px}.section-heading h2{font-size:9px}.section-aside{font-size:13px}.one-step{grid-template-columns:1fr}.step-copy{padding:26px 26px 28px}.feature-meta .small-caps{font-size:9px}.app-icon{width:36px;height:36px;margin-top:26px;margin-bottom:20px}.step-copy h3{font-size:clamp(48px,15vw,66px)}.step-copy h3 br{display:block}.step-copy p{font-size:14px;max-width:360px;margin-top:20px}.step-copy .text-link{margin-top:17px}.feature-footnote{font-size:9px;padding-top:20px}.step-art{min-height:400px}.art-note{top:23px;right:23px;font-size:9px}.step-paper{max-width:355px;width:78%;padding:24px}.step-paper p{font-size:31px}.art-caption{font-size:8px;bottom:21px;left:23px;right:23px}.feature-pair{grid-template-columns:1fr;gap:43px;margin-top:35px}.game-art{min-height:420px}.elementalist{width:44%;left:29%}.slime{width:21%;left:12%}.widow{width:23%;right:8%}.feature-caption{padding-top:17px}.feature-caption h3{font-size:29px}.feature-caption p{font-size:13px;margin-top:10px}.reading{padding-top:0;margin-left:17%;}.reading-art{min-height:370px}.book{width:65%;max-width:245px}.book-title{font-size:35px}.about-strip{grid-template-columns:1fr 1fr;margin-top:61px;padding-block:32px;gap:22px}.about-strip>.small-caps{grid-column:1/-1;max-width:none;font-size:9px}.about-strip>p{font-size:30px;grid-column:1/-1}.about-note{grid-column:1/-1;display:grid;grid-template-columns:30px 1fr;gap:5px 17px;max-width:350px}.about-note>p{margin-top:0;font-size:12px}.about-note>.text-link{grid-column:2}.project-index{padding-top:61px;padding-bottom:50px}.index-heading{display:block;margin-bottom:25px}.index-heading>.small-caps,.index-heading .small-caps{font-size:9px}.index-heading h2{font-size:52px;margin-top:11px}.index-heading>p{font-size:13px;margin-top:20px;max-width:340px}.index-tools{align-items:flex-end;gap:10px}.filterbar{gap:0 19px}.filter{font-size:11px;min-height:40px}#count{font-size:9px;margin-bottom:11px}.project-line{grid-template-columns:25px 1fr 22px;gap:4px 12px;padding-block:23px}.project-number{grid-column:1;grid-row:1;padding-top:5px;font-size:9px}.project-text{grid-column:2;grid-row:1}.project-text h3{font-size:25px}.project-text p{font-size:12px;margin-top:8px;max-width:100%}.project-category{grid-column:2;grid-row:2;margin-top:8px;font-size:9px}.project-status{grid-column:2;grid-row:3;justify-self:start;text-align:left;font-size:9px}.project-arrow{grid-column:3;grid-row:1;align-self:start;font-size:23px}.project-line:is(a):hover{padding-inline:5px}.index-note{font-size:10px;line-height:1.7;max-width:310px}.site-footer{padding-top:28px}.footer-top{display:block}.footer-wordmark{font-size:clamp(36px,11.6vw,56px);width:max-content}.footer-wordmark>span{margin-left:3px}.back-top{margin-top:24px}.footer-bottom{flex-wrap:wrap;gap:12px 20px;font-size:8px;margin-top:33px}.footer-bottom>span:last-child{display:none}}
@media(max-width:400px){.site-header nav{gap:16px;font-size:10px}.hero h1{font-size:clamp(44px,14vw,56px)}.spark{width:34px;height:34px}.step-copy h3{font-size:clamp(48px,15vw,57px)}.step-copy h3 br{display:block}.step-art{min-height:350px}.step-paper{padding:21px;width:79%}.step-paper p{font-size:26px;margin-bottom:25px}.paper-label{margin-top:23px}.art-caption{font-size:7px;gap:8px}.game-art{min-height:310px}.game-art-top{font-size:9px}.game-art-bottom{font-size:8px}.reading{margin-left:10%}.reading-art{min-height:340px}.book-title{font-size:31px}.footer-wordmark{font-size:clamp(36px,11.6vw,46px)}.project-text h3{font-size:23px}.index-tools{display:block}#count{display:block;margin:14px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero:hover .spark{transform:none}.one-step:hover .step-paper{transform:rotate(-7deg)}.game-art:hover .elementalist{transform:rotate(-8deg)}.game-art:hover .slime{transform:rotate(-13deg)}.game-art:hover .widow{transform:rotate(14deg)}.reading-art:hover .book{transform:rotate(8deg)}}

/* Legible utility text at touch sizes; art labels remain secondary. */
.project-category,.project-status{font-size:11px}
@media(max-width:760px){.hero-kicker .small-caps,.section-heading h2,.feature-meta .small-caps,.feature-footnote,.about-strip>.small-caps,.index-heading .small-caps{font-size:10px}.project-category,.project-status{font-size:11px}.project-text p{font-size:13px}.filter{font-size:12px;min-height:44px}.index-note{font-size:11px}.site-header nav a{min-height:44px;display:flex;align-items:center}.hero h1{overflow-wrap:normal}}

/* v2.02: one native link covers each complete collection tile. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.project-line{width:100%;min-height:44px;cursor:pointer;touch-action:manipulation}
.project-line:focus-visible{outline:3px solid var(--coral);outline-offset:-3px;background:#e8eadf}
.project-line:active{background:var(--sage)}
@media(hover:hover){.project-line:is(a):hover{background:#e8eadf}}
.project-detail,.project-dialog{background:var(--paper);color:var(--ink);padding:clamp(25px,5vw,55px);border:1px solid var(--line)}
.project-detail{display:none;margin-block:30px 60px;scroll-margin-top:30px}
.project-detail:target{display:block}
.project-detail h2,.project-dialog h2{font:400 clamp(30px,6vw,48px)/1.12 var(--serif);letter-spacing:-.035em;margin:22px 0 16px;overflow-wrap:anywhere}
.detail-kicker{color:var(--coral)}.detail-meta{color:var(--muted);margin-bottom:27px}
.detail-description{font-size:16px;line-height:1.75;max-width:55ch}
.detail-note{font-size:13px;line-height:1.7;color:var(--muted);margin:25px 0;padding-top:22px;border-top:1px solid var(--line)}
.project-dialog{width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;margin:auto;box-shadow:0 24px 80px #172c2633}
.project-dialog::backdrop{background:#172c2673;backdrop-filter:blur(4px)}
.detail-close{display:block;min-width:44px;min-height:44px;margin:0 0 0 auto;border:1px solid var(--line);background:transparent;color:var(--ink);padding:10px 16px;cursor:pointer;touch-action:manipulation;font-size:13px}
.detail-close:hover{background:var(--sage)}body.detail-open{overflow:hidden}
@media(max-width:760px){.project-dialog{padding:24px}.detail-description{font-size:15px}}