/* ============================================================ Shuruthi Palaniappan — portfolio Editorial / Swiss: serif text, mono apparatus, hairline rules, ink on warm paper. No cards, no shadows, no glass. ============================================================ */ :root{ --paper:#F5F2EA; --paper-alt:#EFEBE0; --ink:#191712; --ink-body:#37332A; --ink-meta:#7B7466; --rule:#D8D2C3; --rule-heavy:#191712; --accent:#9B3A22; --dark:#191712; --dark-paper:#F0EDE4; --dark-meta:#9A9385; --dark-rule:#3B3830; --serif:'Newsreader',Georgia,'Times New Roman',serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --pad-y:clamp(76px,9vw,144px); --gutter:clamp(20px,5vw,56px); --maxw:1180px; --bar-h:56px; --ease:cubic-bezier(.2,.6,.3,1); } *,*::before,*::after{box-sizing:border-box} /* clip, not hidden: `overflow-x:hidden` on forces overflow-y:auto, making a scroll container alongside — which breaks position:sticky and anchor jumps. `clip` guards the same overflow without creating a scroll container. */ html{-webkit-text-size-adjust:100%;overflow-x:clip} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} section[id]{scroll-margin-top:calc(var(--bar-h) + 16px)} body{ margin:0; background:var(--paper); color:var(--ink-body); font-family:var(--serif); font-size:clamp(16.5px,1.05vw,18px); line-height:1.62; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); } .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ink);color:var(--paper); font-family:var(--mono);font-size:12px; padding:12px 18px; } .skip:focus{left:12px;top:12px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ---------- shared apparatus ---------- */ .kicker,.rail__num,.rail__note,.index__label,.bar,.foot,.ln,.sub{ font-family:var(--mono); } .kicker{ font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-meta);margin:0 0 clamp(24px,4vw,44px); } .rule{height:1px;background:var(--rule);border:0;margin:0} .rule--heavy{height:2px;background:var(--rule-heavy)} /* ============ RUNNING HEAD ============ */ .bar{ position:fixed;inset:0 0 auto 0;z-index:100; height:var(--bar-h); background:var(--paper); border-bottom:1px solid var(--rule); transition:background .3s var(--ease),border-color .3s var(--ease); } .bar__inner{ height:100%; max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:20px; } .bar__name{ font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);text-decoration:none;white-space:nowrap; } .bar__nav{ display:flex;align-items:center;gap:clamp(14px,2.4vw,30px); overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; } .bar__nav::-webkit-scrollbar{display:none} .bar__nav a{ font-size:12px;color:var(--ink-meta);text-decoration:none; white-space:nowrap;padding:4px 0; border-bottom:1px solid transparent; transition:color .2s var(--ease),border-color .2s var(--ease); } .bar__nav a i{font-style:normal;color:var(--rule);margin-right:5px;transition:color .2s var(--ease)} .bar__nav a:hover{color:var(--ink)} .bar__nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)} .bar__nav a[aria-current="true"] i{color:var(--accent)} /* nav sitting over the dark closing spread */ .bar.on-dark{background:var(--dark);border-bottom-color:var(--dark-rule)} .bar.on-dark .bar__name{color:var(--dark-paper)} .bar.on-dark .bar__nav a{color:var(--dark-meta)} .bar.on-dark .bar__nav a i{color:var(--dark-rule)} .bar.on-dark .bar__nav a:hover, .bar.on-dark .bar__nav a[aria-current="true"]{color:var(--dark-paper)} /* ============ MASTHEAD ============ */ .mast{padding-top:calc(var(--bar-h) + clamp(56px,10vw,120px));padding-bottom:clamp(60px,8vw,110px)} .mast__name{ font-size:clamp(52px,11.5vw,150px); line-height:.92; letter-spacing:-.022em; font-weight:300; color:var(--ink); margin:0 0 clamp(28px,4vw,52px); } .mast__grid{ display:grid;grid-template-columns:1fr; gap:clamp(36px,5vw,72px); padding-top:clamp(28px,4vw,48px); } .lede{ font-size:clamp(24px,3.1vw,40px); line-height:1.2;letter-spacing:-.014em;font-weight:300; color:var(--ink);margin:0 0 clamp(18px,2.4vw,28px); text-wrap:balance; } .abstract{ max-width:56ch;margin:0 0 clamp(26px,3.4vw,38px); color:var(--ink-body); } .mast__actions{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,34px);margin:0} .ln{ font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);text-decoration:none; padding-bottom:5px;border-bottom:1px solid var(--ink); transition:color .2s var(--ease),border-color .2s var(--ease); } .ln:hover{color:var(--accent);border-bottom-color:var(--accent)} /* contents table */ .index__label{ font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-meta);margin:0 0 14px; padding-bottom:12px;border-bottom:1px solid var(--rule); } .index__list{list-style:none;margin:0;padding:0} .index__list a{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:baseline;gap:12px; padding:13px 0;border-bottom:1px solid var(--rule); text-decoration:none;color:var(--ink); transition:color .2s var(--ease)} .index__list a:hover{color:var(--accent)} .index__list i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink-meta)} .index__list b{font-weight:400;font-size:19px;letter-spacing:-.01em} .index__list em{ font-family:var(--mono);font-style:normal;font-size:11px; color:var(--ink-meta);text-align:right; } .index__list a:hover i{color:var(--accent)} /* ============ SECTIONS ============ */ .sec{padding-block:var(--pad-y);border-top:1px solid var(--rule)} .sec--alt{background:var(--paper-alt)} .sec__grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px)} .rail__num{ font-size:11px;letter-spacing:.16em;color:var(--accent); margin:0 0 10px; } .rail__label{ font-family:var(--serif);font-weight:400; font-size:clamp(26px,3.2vw,36px);line-height:1.1;letter-spacing:-.014em; color:var(--ink);margin:0 0 12px; } .rail__note{ font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-meta);margin:0; display:flex;align-items:center;gap:8px; } .dot{ width:6px;height:6px;border-radius:50%; background:var(--accent);flex:none; } /* role header */ .role{margin:0 0 clamp(30px,4vw,46px)} .role__title{ font-size:clamp(28px,3.6vw,46px);line-height:1.1; letter-spacing:-.018em;font-weight:300; color:var(--ink);margin:0 0 18px; } .role__org{ font-family:var(--mono);font-size:13px;letter-spacing:.04em; color:var(--ink);margin:0 0 4px; } .role__meta{ font-family:var(--mono);font-size:11.5px;letter-spacing:.04em; color:var(--ink-meta);margin:0; } /* ruled definition lists */ .lines{margin:0;border-bottom:1px solid var(--rule)} .line{ display:grid;grid-template-columns:1fr;gap:8px; padding:clamp(18px,2.4vw,26px) 0; border-top:1px solid var(--rule); } .line dt{ font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-meta); padding-top:.42em; } .line dd{margin:0;max-width:64ch} .lines--titled .line dt{ font-family:var(--serif);font-size:clamp(19px,1.7vw,22px); letter-spacing:-.012em;text-transform:none; color:var(--ink);padding-top:0;line-height:1.3; } .dd--meta{ font-family:var(--mono);font-size:11.5px;letter-spacing:.03em; color:var(--ink-meta);line-height:1.7; } .sub{ font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-meta);margin:0 0 6px;font-weight:400; } .sub--gap{margin-top:clamp(40px,5vw,64px)} /* ============ CLOSING SPREAD ============ */ .sec--dark{ background:var(--dark);color:var(--dark-meta); border-top-color:var(--dark); } .sec--dark .rail__label,.sec--dark .closing{color:var(--dark-paper)} .sec--dark .rail__note{color:var(--dark-meta)} .sec--dark .lines{border-bottom-color:var(--dark-rule)} .sec--dark .line{border-top-color:var(--dark-rule)} .sec--dark .line dt{color:var(--dark-meta)} .closing{ font-size:clamp(30px,4.4vw,58px);line-height:1.08; letter-spacing:-.02em;font-weight:300; margin:0 0 16px;text-wrap:balance; } .closing__where{ font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--dark-meta); margin:0 0 clamp(34px,4.5vw,54px); } .lines--links .line dd a{ font-family:var(--serif);font-size:clamp(19px,1.9vw,25px); letter-spacing:-.012em;color:var(--dark-paper); text-decoration:none; border-bottom:1px solid var(--dark-rule); padding-bottom:3px; transition:color .2s var(--ease),border-color .2s var(--ease); } .lines--links .line dd a:hover{color:var(--accent);border-bottom-color:var(--accent)} /* ============ FOOT ============ */ .foot{background:var(--dark);padding-block:34px;border-top:1px solid var(--dark-rule)} .foot__inner{ display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--dark-meta); } .foot p{margin:0} /* ============ REVEALS ============ */ .reveal{opacity:0;transform:translateY(10px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} } /* ============ WIDER VIEWPORTS ============ */ @media (min-width:720px){ .line{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(20px,3vw,40px)} .lines--titled .line{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)} .lines--links .line{grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:baseline} } @media (min-width:900px){ .mast__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start} .sec__grid{grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(40px,5vw,88px)} .rail{position:sticky;top:calc(var(--bar-h) + 40px);align-self:start} } @media (max-width:700px){ .bar__nav a i{display:none} } /* ============ PRINT ============ */ @media print{ .bar,.index,.mast__actions,.foot{display:none} body{background:#fff;color:#000;font-size:11pt} .sec,.sec--alt,.sec--dark{background:#fff;color:#000;border-top:1px solid #000;padding-block:18pt} .sec--dark .closing,.sec--dark .rail__label,.lines--links .line dd a{color:#000} .reveal{opacity:1;transform:none} .sec__grid,.mast__grid{grid-template-columns:1fr} }