/* App Still Works. One stylesheet for the whole site.
   The idea: a shop sign, not a software landing page. One warm colour used as the whole surface,
   a big light serif for the words that matter, a plain grotesk for the rest, square corners,
   photographs pinned up like prints on a board, and the apps as a numbered list. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root{
  --ink:#171411; --ink-2:#3a342d; --mute:#6b6257;
  --olive:#5F7250; --cream:#F4EBDA; --rust:#B85C38; --sand:#F5EEDF; --prefix-dark:#E9B08E;
  --paper:#F8F2E6; --footer:#2A1A12;
  --rule:rgba(23,20,17,.18); --rule-strong:rgba(23,20,17,.55);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1120px; --gutter:clamp(18px,4vw,44px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;overflow-x:hidden}
body.studio{background:var(--olive);color:var(--sand)}
body.studio a:focus-visible{outline-color:var(--sand)}
img,svg{max-width:100%}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
p,ul,ol,dl{margin:0 0 1.1em}
li{margin-bottom:.3em}
strong{font-weight:700}
code{font-family:var(--mono);font-size:.9em;background:rgba(23,20,17,.07);padding:.05em .3em}

h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.015em;margin:0 0 .45em;font-variation-settings:"opsz" 144}
h1{font-size:clamp(2.7rem,7.2vw,5.4rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:1.45rem;font-weight:400;line-height:1.15;margin-top:1.6em}
em{font-style:italic}

/* skip link */
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:10;font-weight:500}
.skip:focus{left:8px}

/* header: a letterhead, not an app bar */
.site-header{max-width:var(--wrap);margin:0 auto;padding:30px var(--gutter) 16px;display:flex;justify-content:space-between;align-items:center;gap:18px 32px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.brand .mark{width:76px;height:auto;flex:none;color:inherit}
.brand .wordmark{display:flex;flex-direction:column;font-family:var(--serif);font-weight:500;font-size:2rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}
.brand .wordmark em{display:block;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:1em;color:var(--rust);margin:0 0 .22em 0}
@media (max-width:420px){.brand .mark{width:64px}.brand .wordmark{font-size:1.7rem}}
/* phones: the five links stay on one row under the lockup, spread across the width */
@media (max-width:560px){
  .site-header{padding-bottom:12px}
  .site-header .site-nav{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:0 10px;font-size:.92rem;letter-spacing:-.005em}
  .site-header .site-nav a{white-space:nowrap;flex:none}
}
@media (max-width:360px){.site-header .site-nav{font-size:.84rem}}
body.studio .brand .wordmark em{color:var(--prefix-dark)}
.brand:hover .wordmark{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.site-nav{display:flex;gap:4px 22px;flex-wrap:wrap;font-size:.95rem}
.site-nav a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:currentColor}
.site-nav a[aria-current="page"]{border-bottom-color:currentColor}

/* the sheet: prose pages and app pages */
.sheet{max-width:var(--wrap);margin:0 auto;padding:40px var(--gutter) 60px}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:1.2rem;margin:0 0 .6em;color:var(--ink-2)}
.lede{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.45;max-width:38em;margin:0 0 1.6em}
.lede strong{font-weight:500}
.meta{color:var(--mute);font-size:.95rem;margin-top:-.6em}
p,ul,ol,dl{max-width:64ch}

/* the front page */
.hero{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,6vw,72px) var(--gutter) clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:24px clamp(24px,5vw,72px);align-items:end}
.hero h1{margin:0;max-width:14em;font-size:clamp(2.2rem,4.6vw,3.4rem)}
.hero .statement{font-size:1.15rem;line-height:1.45;max-width:26em;margin:0}
.hero .statement a{font-weight:500}
@media (max-width:760px){.hero{grid-template-columns:1fr;align-items:start}}
/* the headline's first sentence breaks after "shops" on phones so "counter." never sits alone */
.hero br.phone{display:none}
@media (max-width:480px){.hero br.phone{display:inline}}

/* an app on the front page: a numbered band across the whole page */
.band{padding:clamp(28px,5vw,60px) 0 clamp(30px,5vw,64px)}
.band.wheat{background:var(--cream);color:var(--ink)}
.band.clay{background:var(--rust);color:var(--sand)}
.band .num,.band .status,.band .prints figcaption,.band .prints figcaption b{color:inherit}
.band .num,.band .status,.band .prints figcaption{opacity:.88}
.band-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px clamp(24px,5vw,72px);align-items:start}

.band h2{margin:0 0 .3em}
.band h2 a{text-decoration:none}
.band h2 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.band .status{font-style:italic;color:var(--ink-2);margin:0 0 1em}
.band p{max-width:36em}
.more{font-weight:500;text-decoration:none;display:inline-block;margin-top:.3em;border-bottom:1.5px solid currentColor}
.more:hover{border-bottom-width:2.5px}
.more::after{content:" \2192"}
@media (max-width:760px){.band-in{grid-template-columns:1fr}}

/* photographs: prints pinned to a board */
.prints{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,16px);margin:0 0 6px;padding:0}
.prints .print{margin:0}
.prints img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#fff;padding:5px;border:1px solid rgba(23,20,17,.12);box-shadow:0 1px 2px rgba(23,20,17,.12)}
.prints figcaption{font-size:.88rem;line-height:1.3;margin-top:8px;color:var(--ink-2)}
.prints figcaption b{font-weight:500;color:var(--ink);display:block}
.prints.large{margin:8px 0 clamp(28px,5vw,56px)}
.prints.large img{padding:7px}
@media (max-width:600px){.prints.large{grid-template-columns:repeat(2,1fr)}}

/* the studio note on the front page, and the app pages' closing note */
.studio-note{max-width:var(--wrap);margin:0 auto;padding:clamp(30px,5vw,64px) var(--gutter) clamp(36px,6vw,80px)}
.studio-note .in{max-width:44em}
.studio-note h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

/* app pages: the page wears its own colour, and the other two arrive as bands */
body.sign{color:var(--sand)}
body.sign.olive{background:var(--olive)}
body.sign.rust{background:var(--rust)}
body.sign .brand .wordmark em{color:var(--prefix-dark)}
body.sign a:focus-visible{outline-color:var(--sand)}
.app-hero{padding:clamp(20px,4vw,48px) 0 clamp(30px,5vw,60px)}
.app-hero .eyebrow,.app-hero .status{color:inherit;opacity:.88}
.band.olive{background:var(--olive);color:var(--sand)}
.band.olive .wordmark em,.band.clay .wordmark em{color:var(--prefix-dark)}
.band-stack{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.band .prints.large{margin-top:0}
.band h3{margin-top:0}
.band .note{border-color:currentColor;margin:1.6em 0 0}
.band .section:last-child{margin-bottom:0}
.band .facts{border-top-color:currentColor}
.band.wheat .facts .row{border-bottom-color:var(--rule)}
.app-hero .in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.app-hero h1{max-width:12em;margin-bottom:.35em}
.app-hero .status{font-style:italic;color:var(--ink-2);margin:0 0 1.1em}
.app-hero .lede{margin-bottom:0}

/* a plain table of facts, hairlines only */
.facts{margin:1.2em 0 2em;max-width:none;border-top:1px solid var(--rule-strong)}
.facts .row{display:grid;grid-template-columns:11rem 1fr;gap:6px 24px;padding:12px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-weight:500}
.facts dd{margin:0;max-width:60ch}
@media (max-width:560px){.facts .row{grid-template-columns:1fr;gap:2px}}

.section{margin:0 0 clamp(30px,4vw,48px)}
.note{border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:18px 0;margin:2.4em 0;max-width:44em}
.note p{margin:0}

/* documents: privacy, terms, support, security */
.doc h2{font-size:1.75rem;margin-top:1.8em;padding-top:.6em;border-top:1px solid var(--rule)}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4em}
.doc h3{font-size:1.25rem}
.doc ul,.doc ol{padding-left:1.2em}
.tablewrap{overflow-x:auto;margin:0 0 1.2em}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.4;border-top:1px solid var(--rule-strong)}
.doc th{text-align:left;font-weight:500;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule-strong);vertical-align:bottom}
.doc td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.callout{border-left:3px solid var(--ink);padding:4px 0 4px 18px;margin:1.2em 0}
.callout p:last-child{margin-bottom:0}

/* footer: the bottom of the sign */
.site-footer{background:var(--footer);color:#F1EADB;margin-top:0}
.site-footer .in,.site-footer>*{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.site-footer p{padding-top:34px;padding-bottom:4px;max-width:none;font-size:.92rem;color:rgba(241,234,219,.72)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:10px;padding-bottom:40px;font-size:.95rem}
.site-footer a{color:#F1EADB;text-decoration:none;border-bottom:1px solid rgba(241,234,219,.35)}
.site-footer a:hover{border-bottom-color:#F1EADB}