/* The approved quiet crossover: personal introduction with an optional work index. */
@font-face{font-family:Instrument Sans;src:url('assets/fonts/instrument-sans.ttf') format('truetype');font-weight:400 700;font-display:swap}
.personal-index{--paper:#fff;--ink:#1111c9;--muted:#555598;--rule:#dedeee;--accent:#b44828;margin:0;padding:0 0 72px;background:var(--paper);color:var(--ink);font:400 17px/1.6 'Instrument Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.personal-index *{box-sizing:border-box}
.personal-index :is(h1,h2,p,figure){margin:0}
.personal-index h1{font:500 28px/1.2 'Instrument Sans',Arial,sans-serif;letter-spacing:-.035em}
.personal-index a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}
.personal-index :is(a,summary):hover{color:var(--accent)}
.personal-index :is(a,summary,button,select):focus-visible{outline:2px solid currentColor;outline-offset:5px}
.personal-index ::selection{background:#e6e6ff;color:#1111c9}
.personal-index summary{list-style:none;cursor:pointer;text-decoration:none;width:100%}
.personal-index summary::-webkit-details-marker{display:none}
.personal-index details>summary::after{content:none}
.personal-index{ text-transform:lowercase }
.personal-index summary>svg{flex-shrink:0;transition:transform 160ms ease-out}
.personal-index details[open]>summary>svg{transform:rotate(180deg)}
.intro{font-size:28px;line-height:1.45;letter-spacing:-.025em;max-width:32ch}
.identity>p{font-size:16px;margin-top:12px}
.quiet-layout{max-width:1200px;display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:64px;margin:72px auto 0;padding:0 5%}
.quiet-content{max-width:590px}
.work-fold{margin-top:42px}
.work-fold>summary{display:flex;align-items:center;gap:14px;font-size:16px;padding:12px 0;width:fit-content}
.icon-line{display:flex;gap:6px}
.icon-line .project-icon{width:28px;height:28px;border-radius:7px}
.fold-content{margin-top:18px}
.interest{font-size:16px;margin-top:24px}
.interest>summary{display:flex;align-items:center;gap:8px;padding:6px 0;width:fit-content}
.interest>p{max-width:40ch;margin-top:12px;color:var(--muted)}
.contact{margin-top:25px!important;font-size:16px}
.contact a{display:inline-block;padding:6px 0}
.project-row{border-bottom:1px solid var(--rule)}
.project-row>summary{display:grid;grid-template-columns:40px 126px minmax(0,1fr) 16px;gap:14px;align-items:center;min-height:74px;padding:16px 0}
.project-icon{width:40px;height:40px;object-fit:contain;display:block;border-radius:10px;border:1px solid #1a1a1a12}
.project-icon.dikta{padding:6px;background:#eeeee8}
.project-name{font-weight:550;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.project-summary{color:var(--muted);font-size:15px;line-height:1.45}
.project-detail{padding:4px 30px 25px 54px;font-size:16px;line-height:1.6;text-transform:lowercase}
.project-detail .role{font-size:14px;color:var(--muted);margin-bottom:12px}
.project-detail>p{max-width:60ch;margin-bottom:16px}
.archive-image{display:block;width:112px;margin:20px 0;text-decoration:none}
.archive-image img{display:block;width:112px;height:auto}
.archive-image span{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:8px}
.studio-link{display:inline-block;font-size:15px;margin-top:20px!important}
.quiet-content .project-row>summary{grid-template-columns:36px minmax(0,1fr) 16px;gap:3px 12px}
.quiet-content .project-icon{width:36px;height:36px;grid-column:1;grid-row:1/3}
.quiet-content .project-name{grid-column:2;grid-row:1}
.quiet-content .project-summary{grid-column:2;grid-row:2}
.quiet-content .project-row summary>svg{grid-column:3;grid-row:1/3}
.quiet-content .icon-line .project-icon{width:28px;height:28px}

.skip-link{position:absolute;top:12px;left:24px;transform:translateY(-200%);background:var(--paper);padding:8px;z-index:1}
.skip-link:focus{transform:none}
@media(max-width:900px){.quiet-layout{gap:48px;grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:700px){.quiet-layout{display:block;margin-top:34px;padding:0 24px}.quiet-content{margin-top:48px}.intro{font-size:25px;max-width:30ch}.work-fold{margin-top:32px}.personal-index h1{font-size:27px}.project-summary{font-size:14px}.project-detail{padding:4px 0 24px}}
@media(prefers-reduced-motion:reduce){.personal-index summary>svg{transition:none}}