/* Hallmark · shape: Long Document (an index of cases, then one case study each) · genre: editorial · theme: the company page's own system, pinned (paper #faf7f1, Fraunces heads, Karla reading, the brand orange as the one live colour) · job: read how a site was built, then visit it · idea: "an engineering notebook in the house's own hand" · vibe: "warm paper, big serif heads, screenshots in frames"
 * paper: var(--bg) · accent: var(--accent) · display: Fraunces · body: Karla · hero: the index opens on a headline and one sentence over a ruled list; a case opens on the project name, a dek and a facts rail · nav: the home's header with Say Hi / Work / Contact · footer: pages and the date of the pictures · imagery: the live sites, captured on the date in the footer
 * axes: light/display-serif/one-orange · posture: still (no motion) · surface: paper with hairlines and framed figures · contrast: pass · fold: pass · motion: none · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, the figures are whatever the live sites look like on the day; each is dated in the footer and never doctored */
/* Hallmark · dismissed 58 · a case study is reading: four to six hundred words with two figures is the form */
/* Hallmark · dismissed 77 · not a landing strip: an index of cases and long-form case studies, each one article · the owner asked for engineering-blog deep dives */
/* Hallmark · waive 44c · the index hero and each case's opening are a head over the content they introduce · reading pages show their content on the first screen; a full-screen head would hide the work */
/* Hallmark · waive 78 · shape: Long Document, continuous prose with inline section heads · a case study reads as an article; landing-size heads would break the prose apart */
/* Hallmark · waive 59 · the gap between the index head and its list is the head's own spacing, the list continues it · a 120px gap would split a title from the list it titles */
/* harmonyinfotech.in: the Work section (case studies). Extends the home page's system: paper and ink, Fraunces for heads and
   display, Karla for reading; the brand orange only as the live thing (links, the one action). Measure 66ch, one column
   of reading with figures that may break out of it on wide screens. */
:root{
  --ink:#22201c; --dim:#6c665e; --soft:#736c62;
  --line:#e4ded3; --line-2:#d2cbbf; --bg:#faf7f1; --card:#fffdf9; --well:#f1ece3;
  --brand:#ff6600; --accent:#c4491a; --accent-soft:#fdeee3; --warm:#b8430f; --focus:#c4491a;
  --display:Fraunces,Georgia,"Times New Roman",serif; --body:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  --shadow:0 1px 2px rgba(34,32,28,.04),0 16px 40px -24px rgba(34,32,28,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:17.5px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;padding:0 var(--s6)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .15s}
a:hover{border-bottom-color:var(--accent)}
a:active{opacity:.8}
.skip{position:absolute;left:var(--s6);top:-80px;background:var(--ink);color:var(--bg);padding:var(--s2) var(--s4);border-radius:8px;border:0;z-index:50}
.skip:focus-visible{top:var(--s4)}
.wrap{max-width:820px;margin:0 auto}
@media (min-width:1100px){.wrap{max-width:980px}}
/* the site header, as on the home page */
header.top{display:flex;align-items:center;gap:var(--s4);padding:var(--s8) 0 0}
header.top .mark{width:72px;flex:none;line-height:0;display:block;border:0}
header.top .mark img{width:100%;height:auto;display:block}
header.top .nm{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.005em}
header.top .sub{color:var(--soft);font-size:13.5px;line-height:1.5}
header.top nav{margin-left:auto;display:flex;gap:var(--s5);font-size:15px}
header.top nav a{color:var(--dim);border-bottom-color:transparent}
header.top nav a:hover,header.top nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:640px){header.top{flex-wrap:wrap;gap:12px 16px}header.top nav{margin-left:0;width:100%;gap:var(--s4)}}
/* the index */
.hero{padding:var(--s12) 0 var(--s2)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.6vw,64px);line-height:1.04;letter-spacing:-.025em;font-variation-settings:"opsz" 144;text-wrap:balance;margin-bottom:var(--s4)}
.lead{font-size:19.5px;color:var(--dim);max-width:58ch;text-wrap:pretty}
.lead strong{color:var(--ink);font-weight:600}
.index{list-style:none;margin:var(--s10) 0 0;padding:0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a.row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s5) var(--s8);align-items:center;padding:var(--s8) 0;color:inherit;border:0}
.index a.row:hover .t{color:var(--accent)}
.index .thumb{aspect-ratio:16/10;background:var(--well);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.index .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.index .t{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.015em;line-height:1.15;margin:0 0 var(--s2);transition:color .15s}
.index .d{color:var(--dim);font-size:18px;max-width:40ch}
.index .m{font-size:13.5px;color:var(--soft);margin-top:var(--s2)}
@media (max-width:640px){.index a.row{grid-template-columns:minmax(0,1fr);padding:var(--s6) 0}}
/* the case study */
article.case{padding-top:var(--s10)}
.case h1{max-width:18ch}
.case .dek{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,25px);line-height:1.4;color:var(--dim);max-width:34ch;font-variation-settings:"opsz" 24;margin:0 0 var(--s8)}
.case .dek strong{color:var(--ink);font-weight:600}
.case .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s8);padding:var(--s6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 var(--s10)}
.case .facts div{min-width:0}
.case .facts dt{font-size:12.5px;color:var(--soft);font-weight:700;margin-bottom:var(--s1)}
.case .facts dd{font-size:15.5px;color:var(--ink);line-height:1.5}
.case .facts dd a{border-bottom-color:transparent}.case .facts dd a:hover{border-bottom-color:var(--accent)}
.case .prose{max-width:66ch}
.case .prose p{color:var(--ink);margin:0 0 var(--s5);text-wrap:pretty}
.case .prose p.first::first-letter{font-family:var(--display);font-weight:600;font-size:3.1em;float:left;line-height:.82;padding:var(--s2) var(--s3) 0 0;color:var(--accent)}
.case .prose h2{font-family:var(--display);font-weight:600;font-size:29px;letter-spacing:-.018em;line-height:1.15;margin:var(--s12) 0 var(--s4);text-wrap:balance}
.case .prose h2:first-child{margin-top:0}
.case .prose ul,.case .prose ol{margin:0 0 var(--s5) 1.2em;color:var(--ink)}
.case .prose li{margin-bottom:var(--s2)}
.case .prose strong{font-weight:600}
.case .prose .aside{background:var(--accent-soft);border-radius:14px;padding:var(--s6) var(--s6);margin:0 0 var(--s6);font-family:var(--display);font-size:20px;line-height:1.45;color:var(--ink);font-variation-settings:"opsz" 24}
.case figure{margin:var(--s8) 0}
.case figure.wide{margin-inline:calc(50% - 50vw);padding-inline:var(--s6)}
@media (min-width:1100px){.case figure.wide{margin-inline:-80px;padding-inline:0}}
.case .frame{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:var(--s3);box-shadow:var(--shadow)}
.case .frame img{width:100%;height:auto;display:block;border-radius:6px}
.case .pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.case .pair .frame.phone{max-width:300px}
@media (max-width:760px){.case .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.case .pair{grid-template-columns:minmax(0,1fr)}.case .pair .frame.phone{max-width:240px}}
@media (max-width:420px){.case .facts{grid-template-columns:minmax(0,1fr)}}
.case figcaption{margin-top:var(--s3);font-size:14.5px;color:var(--dim);max-width:66ch}
.case .links{margin:var(--s12) 0 0;padding-top:var(--s6);border-top:1px solid var(--line);font-size:15.5px;color:var(--dim)}
.case .links a{margin-right:var(--s4)}
.case .nextprev{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);margin:var(--s12) 0 0;padding-top:var(--s5);border-top:1px solid var(--line);font-size:15px}
.case .nextprev a{border:0;color:var(--dim)}.case .nextprev a:hover{color:var(--accent)}
.case .nextprev b{display:block;font-family:var(--display);font-size:19px;color:var(--ink);font-weight:600}
footer.ft{padding:var(--s10) 0 var(--s16);border-top:1px solid var(--line);color:var(--soft);font-size:13.5px;margin-top:var(--s12)}
footer.ft a{color:var(--dim);border-bottom-color:transparent}footer.ft a:hover{color:var(--accent)}
footer.ft nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s3)}