/* D10 / Day Ten: bookkeeping for ambitious small businesses
   Every measurement below is expressed in artboard units (--u). The desktop artboard is
   1122 units wide, the mobile artboard 591; --u tracks the container width, so the
   composition scales without reflowing and stays identical to the design at any size. */

@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2-variations"), url("../fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --paper: #f2f1ec;
  --ink: #121210;
  --red: #d01d1a;
  --rule: #d6d5d0;
  --arch-light: #dcdbd7;
  --white: #f7f6f2;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Tiempos Text", Georgia, "Times New Roman", serif;
  --paper-base: #f4f3ee;
  --red-base: #d6130f;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 -.05'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .549 0 0 0 0 .549 0 0 0 0 .549 0 0 0 .36 -.09'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--paper-base) var(--grain) repeat; background-size: 240px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper-base) var(--grain) repeat;
  background-size: 240px;
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-kerning: normal;
  font-synthesis: none;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; font: 600 13px/1 var(--sans); }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Artboard ---------- */
.page { container-type: inline-size; max-width: 1440px; margin: 0 auto; }
.art { --u: calc(100cqw / 1122); position: relative; height: calc(1402 * var(--u)); }

.t { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); white-space: nowrap; z-index: 2; }
.b { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }

/* type styles */
.caps { font-family: var(--sans); font-weight: 500; text-transform: uppercase; }
.display { font-family: var(--display); font-weight: 700; font-feature-settings: "ss02" 0; }
.grotesk { font-family: var(--display); font-weight: 500; text-transform: uppercase; }
.serif { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 60; }
.lower { font-family: var(--display); font-weight: 500; }

/* rules */
.rv, .rh { position: absolute; background: var(--rule); z-index: 0; }
.rv { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); height: calc(var(--h) * var(--u)); width: 1px; }
.rh { top: calc(var(--y) * var(--u)); left: calc(50% - 50vw); right: calc(50% - 50vw); height: 1px; }
.rh.to-edge { left: calc(var(--x) * var(--u)); }
.b-hd-rule { background: var(--ink); opacity: .53; width: 1px; z-index: 2; }
.rv-d7, .rv-d8 { background: var(--ink); opacity: .6; }
/* dash weights matched to the mockup's anti-aliased strokes */
.b-hero-dash { opacity: .84; } .b-cite-dash { opacity: .76; } .b-sound-dash { opacity: .83; }
@media (max-width: 760px) {
  :root { --rule: #c6c5c0; }
  .b-hero-dash { opacity: .91; } .b-cite-dash { opacity: .66; } .b-sound-dash { opacity: .8; }
}

.dash { background: var(--ink); z-index: 2; }

/* layout switches */
.m-only, .m-br { display: none; }

/* logo */
.logo { z-index: 3; }
.logo svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* photos + red block */
.ph { overflow: hidden; z-index: 1; background: #cfcfcb; }
.ph picture { display: block; width: 100%; height: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.redblock { background: var(--red-base) var(--grain-red) repeat; background-size: 240px; z-index: 1; overflow: hidden; }
.redblock .t { color: var(--white); }
.arch { z-index: 1; overflow: visible; }

/* header */
.t-nav1, .t-nav2, .t-nav3, .t-nav4, .t-git { font-family: var(--display); font-weight: 500; }
.t-dayten, .t-fday { font-weight: 600; }

/* list with leading rules */
.t-list li { position: relative; }
.t-list li::before { content: ""; position: absolute; top: calc(50% - 2.2 * var(--u)); height: max(1px, calc(1 * var(--u))); background: var(--ink); opacity: .7; transform: translateY(-50%);
  left: calc(-46 * var(--u)); width: calc(24 * var(--u)); }

/* call to action */
.t-cta { color: var(--red); font-weight: 700; }
.t-cta::after { content: ""; position: absolute; top: 50%; height: max(1px, calc(1.5 * var(--u))); background: var(--red); transform: translateY(-50%);
  left: calc(130 * var(--u)); width: calc(30 * var(--u)); transition: width .25s ease; }
.t-cta:hover::after { width: calc(44 * var(--u)); }

/* testimonial */
.t-head .sq { display: inline-block; transform: scaleX(var(--sq, 1)); transform-origin: 0 0; }
.t-quote { text-indent: var(--indent, -0.45em); quotes: none; }
.t-sound { left: auto; right: calc(var(--r) * var(--u)); text-align: right; }

/* footer */
.t-flinks a, .t-fcontact > * { display: block; width: max-content; }
.t-fcontact .social a { margin-right: var(--gap); }
.t-fcontact .social a:last-child { margin-right: 0; }
.social { display: flex !important; }

/* interaction */
.t a, a.t { transition: opacity .2s ease; }
.t-nav1:hover, .t-nav2:hover, .t-nav3:hover, .t-nav4:hover, .t-git:hover,
.t-flinks a:hover, .t-fcontact a:hover { opacity: .55; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* mobile menu (not visible in the static composition) */
.burger { display: none; z-index: 3; }
.burger i { position: absolute; left: calc(12 * var(--u)); width: calc(36 * var(--u)); height: max(1.5px, calc(2 * var(--u))); background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
.burger i:nth-child(1) { top: calc(13 * var(--u)); }
.burger i:nth-child(2) { top: calc(24 * var(--u)); }
.burger i:nth-child(3) { top: calc(35 * var(--u)); }


/* ---------- Desktop composition (artboard 1122 x 1402) ---------- */

.t-nav1{--fs:12;--lh:16;--y:30.365;letter-spacing:-0.028em;--x:379}
.t-nav2{--fs:12;--lh:16;--y:30.365;letter-spacing:-0.017em;--x:461}
.t-nav3{--fs:12;--lh:16;--y:30.365;letter-spacing:-0.024em;--x:549}
.t-nav4{--fs:12;--lh:16;--y:30.365;letter-spacing:-0.007em;--x:619.9}
.t-git{--fs:12;--lh:16;--y:30.365;letter-spacing:0.005em;--x:891}
.t-loc{--fs:9;--lh:15;--y:22.674;letter-spacing:0.079em;--x:1011.1}
.t-label{--fs:10.833;--lh:15;--y:90.341;letter-spacing:0.122em;--x:58.1}
.t-tag{--fs:8.5;--lh:15;--y:116.392;letter-spacing:0.218em;--x:1014}
.t-head{--fs:110;--lh:88.5;--y:185.765;letter-spacing:-0.042em;--x:48.2;--sq:0.776}
.t-sub{--fs:22.022;--lh:24.5;--y:460.486;letter-spacing:0em;--x:58;font-variation-settings:"opsz" 37}
.t-less{--fs:11.25;--lh:17;--y:560.492;letter-spacing:0.246em;--x:58.1}
.t-fin{--fs:41.044;--lh:36.25;--y:658.806;letter-spacing:-0.026em;--x:383.3}
.t-para{--fs:17.871;--lh:20.3;--y:857.36;letter-spacing:0em;--x:386.1;font-variation-settings:"opsz" 60}
.t-list{--fs:10.292;--lh:17.7;--y:956.694;letter-spacing:0.191em;--x:434.1}
.t-cta{--fs:10;--lh:14;--y:1045.638;letter-spacing:0.306em;--x:388}
.t-rbtop{--fs:9.5;--lh:17.7;--y:22.506;letter-spacing:0.334em;--x:27.1}
.t-rbbot{--fs:9.9;--lh:16.5;--y:340.251;letter-spacing:0.174em;--x:83.1}
.t-quote{--fs:19.576;--lh:23;--y:1109.655;letter-spacing:0em;--x:71.1;font-variation-settings:"opsz" 40}
.t-cite{--fs:10.292;--lh:16;--y:1201.644;letter-spacing:0.198em;--x:110.1}
.t-sound{--fs:28.658;--lh:26;--y:1112.325;letter-spacing:-0.094em;--r:277.525}
.t-ftag{--fs:9;--lh:16;--y:1305.074;letter-spacing:0.187em;--x:147.1}
.t-flinks{--fs:8.5;--lh:15.75;--y:1283.017;letter-spacing:0.224em;--x:377.1}
.t-fcontact{--fs:8.5;--lh:25.5;--y:1287.142;letter-spacing:0.283em;--x:953.1;--gap:1.935em}
.b-hd-logo{--x:58;--y:14;--w:61;--h:50}
.b-ft-logo{--x:62;--y:1292;--w:68.3;--h:56}
.b-hd-rule{--x:980;--y:17;--w:1;--h:42}
.b-arch{--x:604;--y:122;--w:484;--h:510}
.b-ph-chair{--x:33;--y:653;--w:320;--h:405}
.b-ph-stairs{--x:646;--y:653;--w:250;--h:405}
.b-redblock{--x:912;--y:653;--w:176;--h:405}
.b-ph-plant{--x:881;--y:1083;--w:207;--h:177}
.b-hero-dash{--x:58;--y:608;--w:31;--h:2}
.b-cite-dash{--x:60;--y:1207;--w:26;--h:2}
.b-sound-dash{--x:693;--y:1234;--w:31;--h:2}
.rv-d0{--x:32;--y:0;--h:1402}
.rv-d1{--x:357.5;--y:0;--h:295}
.rv-d2{--x:868;--y:0;--h:126}
.rv-d3{--x:998;--y:70;--h:130}
.rv-d4{--x:1088;--y:0;--h:1402}
.rv-d5{--x:364;--y:632;--h:450}
.rv-d6{--x:668;--y:1082;--h:178}
.rv-d7{--x:330;--y:1284;--h:72}
.rv-d8{--x:884;--y:1284;--h:72}
.rh-d0{--y:70}
.rh-d1{--y:632}
.rh-d2{--y:1082}
.rh-d3{--y:1260}



/* ---------- Mobile composition (artboard 591 x 1625) ---------- */
@media (max-width: 760px) {

  .art { --u: calc(100cqw / 591); height: calc(1625 * var(--u)); }
  .d-only, .d-br { display: none !important; }
  .m-only { display: block; }
  .m-br { display: inline; }
  .burger { display: block; }
  .t-sound { left: calc(var(--x) * var(--u)); right: auto; text-align: left; }
  .t-list li::before { left: calc(-49 * var(--u)); width: calc(26 * var(--u)); height: max(1px, calc(2 * var(--u))); top: calc(50% - .5 * var(--u)); opacity: .63; }
  .t-cta::after { left: calc(142 * var(--u)); width: calc(37 * var(--u)); }
  .t-cta:hover::after { width: calc(50 * var(--u)); }

  .t-dayten{--fs:15.75;--lh:18;--y:40.629;letter-spacing:0.122em;--x:122.1}
  .t-label{--fs:10.833;--lh:16.5;--y:110.591;letter-spacing:0.231em;--x:37.1}
  .t-tag{--fs:10.833;--lh:16.8;--y:111.341;letter-spacing:0.171em;--x:496.1}
  .t-head{--fs:68.84;--lh:55;--y:203.442;letter-spacing:-0.004em;--x:21.3;--sq:0.859}
  .t-sub{--fs:20.56;--lh:22;--y:440.669;letter-spacing:0em;--x:30;font-variation-settings:"opsz" 34}
  .t-less{--fs:11.786;--lh:17;--y:525.687;letter-spacing:0.21em;--x:30.1}
  .t-fin{--fs:34.5;--lh:30.3;--y:609.1;letter-spacing:-0.037em;--x:305.2}
  .t-para{--fs:19.863;--lh:22;--y:770.146;letter-spacing:0em;--x:307.1;font-variation-settings:"opsz" 60}
  .t-list{--fs:10.833;--lh:19;--y:871.341;letter-spacing:0.217em;--x:359}
  .t-cta{--fs:11.786;--lh:14;--y:958.187;letter-spacing:0.271em;--x:307}
  .t-rbtop{--fs:11.786;--lh:20;--y:20.287;letter-spacing:0.262em;--x:31.1}
  .t-rbbot{--fs:10;--lh:18.5;--y:170.288;letter-spacing:0.337em;--x:93.1}
  .t-quote{--fs:19.607;--lh:22;--y:1259.064;letter-spacing:0em;--x:40.1;font-variation-settings:"opsz" 39}
  .t-cite{--fs:10.833;--lh:15;--y:1337.341;letter-spacing:0.129em;--x:83.1}
  .t-sound{--fs:25;--lh:23.3;--y:1392.144;letter-spacing:-0.062em;--x:40.1}
  .t-fday{--fs:14.778;--lh:17;--y:1536.776;letter-spacing:0.079em;--x:98.1}
  .t-ftag{--fs:9.5;--lh:16;--y:1577.256;letter-spacing:0.316em;--x:34.1}
  .t-flinks{--fs:10.292;--lh:19;--y:1520.044;letter-spacing:0.152em;--x:289.1}
  .t-fcontact{--fs:9.5;--lh:27;--y:1521.856;letter-spacing:0.188em;--x:460.1;--gap:2.258em}
  .b-hd-logo{--x:38;--y:24;--w:69.5;--h:57}
  .b-ft-logo{--x:35;--y:1524;--w:52.4;--h:43}
  .b-burger{--x:506;--y:22;--w:60;--h:48}
  .b-arch{--x:293;--y:181;--w:298;--h:406}
  .b-ph-chair{--x:23;--y:605;--w:258;--h:366}
  .b-ph-stairs{--x:24;--y:989;--w:335;--h:233}
  .b-redblock{--x:381;--y:989;--w:210;--h:233}
  .b-ph-plant{--x:290;--y:1379.5;--w:301;--h:125.5}
  .b-hero-dash{--x:32;--y:571;--w:34;--h:2}
  .b-cite-dash{--x:32;--y:1346;--w:25;--h:1.5}
  .b-sound-dash{--x:34;--y:1492;--w:28;--h:1.5}
  .rv-m0{--x:480.5;--y:0;--h:180.5}
  .rv-m1{--x:260;--y:1504.5;--h:120.5}
  .rv-m2{--x:422;--y:1504.5;--h:120.5}
  .rh-m0{--y:93}
  .rh-m1{--y:587}
  .rh-m2{--y:1237.5}
  .rh-m3{--y:1379}
  .rh-m4{--y:1504.5}

}

/* ---------- Menu overlay (mobile) ---------- */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--paper-base) var(--grain) repeat; background-size: 240px; container-type: inline-size; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.menu[hidden] { display: none; }
.menu__bar { --u: calc(100cqw / 591); position: relative; height: calc(93 * var(--u)); border-bottom: 1px solid var(--rule); flex: none; }
.menu__close { position: absolute; right: calc(25 * var(--u)); top: calc(22 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
.menu__close i { position: absolute; left: 50%; top: 50%; width: calc(36 * var(--u)); height: max(1.5px, calc(2 * var(--u))); background: var(--ink); }
.menu__close i:nth-of-type(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu__close i:nth-of-type(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.menu__list { --u: calc(100cqw / 591); flex: 1; display: flex; flex-direction: column; }
.menu__list a { display: block; font-family: var(--display); font-weight: 700; letter-spacing: -.045em; font-size: calc(56 * var(--u)); line-height: 1;
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); }
.menu__list a:active { color: var(--red); }
.menu__foot { --u: calc(100cqw / 591); display: flex; justify-content: space-between; padding: calc(24 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: .2em; }
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .burger, .menu { display: none !important; }
}