/* Hébuterne — homepage and study store. Paper and ink, a geometric sans, one hairline rule. */
@font-face{font-family:"Jost Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(assets/jost-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(assets/jost-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--header-height:60px;--brand-w:220px;--paper:#fff;--ink:#171717;--muted:#555;--rule:#ddd;--gutter:40px;--font-sans:"Jost Variable",Jost,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:72px;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font-sans);font-size:14px;line-height:1.35;letter-spacing:.012em}
button,input,select{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{border:0;background:none;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
a:hover,button:hover{text-decoration:underline;text-underline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #333;outline-offset:5px}
p,h1,h2,h3,figure{margin:0;font-size:inherit;font-weight:normal}
img{display:block;max-width:100%;height:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.small{font-size:12px;color:var(--muted);line-height:1.5}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-block;border:1px solid var(--ink);padding:13px 20px;background:#fff;color:var(--ink)}
.btn:hover{text-decoration:none;background:var(--ink);color:#fff}
.btn-ghost{border-color:transparent;padding-left:0;padding-right:0;text-decoration:underline;text-underline-offset:4px;background:none}
.btn-ghost:hover{background:none;color:inherit}
.text-link,.back-link{text-decoration:underline;text-underline-offset:4px}

/* Display typography echoes the high-contrast serifs of the supplied wordmark. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/bodoni-moda-latin-400-normal.woff2') format('woff2')}
:root{--font-display:"Bodoni Moda",Didot,"Bodoni MT","Times New Roman",serif}
h1,h2,h3,.pdp-title{font-family:var(--font-display);font-weight:400}

/* Header */
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:#fff;padding:12px}.skip-link:focus{top:8px}
.site-header{height:var(--header-height);padding:0 16px;position:sticky;top:0;z-index:30;background:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;letter-spacing:.025em}
.header-left,.header-right{display:flex;align-items:center;gap:26px}
.header-left button{display:flex;gap:10px;align-items:center;min-height:44px}
.header-right{justify-content:flex-end}
.header-right svg{width:18px;height:18px;display:block}
.site-header .brand{width:var(--brand-w);color:#000}
.site-header .brand svg{display:block;width:100%;height:auto}
.menu-icon{width:14px;height:10px;border-top:1px solid;border-bottom:1px solid;font-size:0;position:relative}
.menu-icon:after{content:'';position:absolute;top:4px;left:0;right:0;border-top:1px solid}
.search-icon{display:inline-block;width:14px;height:14px;border:1px solid;border-radius:50%;position:relative}
.search-icon:after{content:'';height:6px;width:1px;background:currentColor;position:absolute;right:-3px;bottom:-4px;transform:rotate(-40deg)}

/* Wordmark fold (from hebuterne2): on the home view the wordmark starts as wide as the page, just under the bar, over
   the hero, and folds into its place in the bar as you scroll. app.js sets --logo-e, the eased fold from 0 (unfolded)
   to 1 (folded: exactly the regular header logo), and drops .is-solid while the bar should stay clear over the photo:
   then the bar is transparent, its text and logo white, with a light shade behind them. */
.site-header{transition:color .45s cubic-bezier(.19,1,.22,1),background-color .45s cubic-bezier(.19,1,.22,1)}
.site-header .brand{transition:color .45s cubic-bezier(.19,1,.22,1)}
.logo-fold .header-right{grid-column:3}
.logo-fold .site-header .brand{--e:var(--logo-e,0);--giant:min(calc(100% - 32px),1800px);--w:calc(var(--giant) + (var(--brand-w) - var(--giant)) * var(--e));--y0:calc(var(--header-height) * .92);--y1:calc((var(--header-height) - var(--brand-w) * 114.63 / 772.7) / 2);position:absolute;top:calc(var(--y0) + (var(--y1) - var(--y0)) * var(--e));left:calc(50% - var(--w) / 2);width:var(--w)}
.logo-fold .site-header.is-settling .brand{transition:color .45s cubic-bezier(.19,1,.22,1),top .8s cubic-bezier(.19,1,.22,1),left .8s cubic-bezier(.19,1,.22,1),width .8s cubic-bezier(.19,1,.22,1)}
.logo-fold .site-header:not(.is-solid){background-color:transparent;color:#fff}
.logo-fold .site-header:not(.is-solid) .brand{color:#fff}
.site-header:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0));opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.19,1,.22,1)}
.logo-fold .site-header:not(.is-solid):before{opacity:1}
.logo-fold .site-header:not(.is-solid) :focus-visible{outline-color:currentColor}
.logo-fold .hero{margin-top:calc(-1 * var(--header-height))}
@media(min-width:768px){.logo-fold .hero{height:100vh}}
@media(max-width:767px){.logo-fold .site-header .brand{--giant:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header:before,.site-header .brand,.logo-fold .site-header.is-settling .brand{transition:none}}

/* Sections */
.section{padding:72px var(--gutter)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.section-head h2{font-size:24px;letter-spacing:.02em;margin-top:6px}
.section-head .small{max-width:38ch}

/* Hero: full-bleed image, the caption set straight onto it in white over a soft shade at the foot */
.hero{position:relative;background:#0b1512;height:calc(100vh - var(--header-height));overflow:hidden}
.hero-media{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero:after{content:'';position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.45));pointer-events:none}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 24px 28px;color:#fff}
.hero-caption{display:grid;gap:12px;justify-items:start}
.hero-eyebrow,.hero-link{font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;line-height:1.3}
.hero .hero-title{font-family:var(--font-sans);font-size:clamp(22px,2.3vw,34px);font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.hero-link{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s cubic-bezier(.19,1,.22,1)}
.hero-link:hover{text-decoration:none;background-size:0 1px;background-position:100% 100%}
.hero-note{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.02em;color:rgba(255,255,255,.7);text-align:right}
.hero-foot :focus-visible{outline-color:#fff}

/* The edit: live product grid */
.edit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px;min-height:200px}
.product-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;min-width:0;align-content:start;align-items:start}
.card-media{grid-column:1/-1;display:block;margin-bottom:6px}
.object .card-media{margin:0}
.product-card img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f2f2f2}
.product-card .row-status{grid-column:1/-1}
.product-info{display:grid;gap:2px;min-width:0}
.product-title{font-size:15px}
.product-meta{color:var(--muted)}
.card-actions{display:flex;gap:16px;align-items:center}
.card-actions button{text-decoration:underline;text-underline-offset:4px;min-height:32px;white-space:nowrap}
.label-short{display:none}
.card-actions button:disabled{color:#999;text-decoration:none;cursor:default}
.row-status{min-height:1em;color:var(--muted);font-size:12px}
.row-status[data-kind=error]{color:#8a1c1c}

/* Objects: two staggered studies */
.objects-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;align-items:start}
.object{display:grid;gap:16px;min-width:0}
.object img{width:100%;aspect-ratio:5/6;object-fit:cover}
.object-caption{display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:baseline}
.object-desc{line-height:1.6;max-width:46ch;color:#333}
.object-caption .text-link{white-space:nowrap;justify-self:end}
.object-caption .row-status{grid-column:1/-1}
.objects-grid .object:nth-child(2){margin-top:88px}

/* Portraits: sticky text, two offset frames */

/* Notes: a single statement */
.notes{padding:120px var(--gutter);text-align:center}
.notes .eyebrow{display:block;margin-bottom:28px}
.notes blockquote{margin:0 auto;max-width:780px;font-size:clamp(22px,3vw,34px);line-height:1.3;letter-spacing:.01em}
.notes .small{margin:28px auto 0;max-width:54ch}

/* Boutiques: hairline grid */
.boutiques-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.boutiques-grid>.small{background:#fff;padding:24px}
.boutique{background:#fff;padding:24px 22px 26px;display:grid;gap:8px;min-width:0;align-content:start}
.boutique .city{font-size:22px;letter-spacing:.02em}
.boutique .name{color:var(--muted)}
.boutique address{font-style:normal;line-height:1.55}
.boutique .hours{color:var(--muted);font-size:13px}

/* Footer */
.site-footer{border-top:1px solid var(--rule);padding:35px 24px 20px;line-height:18px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1.1fr .8fr 1fr 1.5fr;gap:26px}
.footer-grid h2{margin-bottom:24px;font-size:15px;letter-spacing:.025em}
.footer-grid p{margin-bottom:14px}
.footer-grid a,.footer-grid section>button{display:block;margin:6px 0;text-align:left}
.footer-bottom{margin-top:70px;display:flex;justify-content:space-between;gap:24px;font-size:11px;letter-spacing:.01em}
.footer-bottom button{text-decoration:underline}
.newsletter-form{display:flex;justify-content:space-between;border-bottom:1px solid;padding:6px 0}
.newsletter-form input{flex:1;min-width:0;border:0;background:none;padding:6px 0;outline:none}
.newsletter-form input::placeholder{color:inherit;opacity:.8}
.newsletter-form button{padding-left:14px}
.newsletter-status{margin-top:10px;min-height:1em;font-size:12px;color:var(--muted)}

/* Product page: image column beside a sticky info panel, then more pieces */
.pdp{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.pdp-media{border-right:1px solid var(--rule)}
.pdp-media img{width:100%;aspect-ratio:3/4;max-height:calc(100dvh - var(--header-height));object-fit:cover;background:#f2f2f2}
.pdp-info{position:sticky;top:var(--header-height);display:grid;gap:14px;align-content:start;max-width:600px;margin:0 auto;padding:48px 40px}
.pdp-heading{display:grid;gap:6px}
.pdp-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em}
.pdp-price{font-size:14px;color:var(--muted)}
.pdp-buy{width:100%;height:48px;margin-top:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.pdp-buy:hover{text-decoration:none;background:#000}
.pdp-buy:disabled{background:#999;cursor:default}
.pdp-desc{margin-top:6px;font-size:14px;line-height:1.7;color:var(--muted)}
.pdp-accordion{margin-top:14px;border-bottom:1px solid var(--rule)}
.pdp-accordion details{border-top:1px solid var(--rule)}
.pdp-accordion summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:12px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;list-style:none}
.pdp-accordion summary::-webkit-details-marker{display:none}
.pdp-accordion summary:after{content:'';width:7px;height:7px;border-right:1px solid;border-bottom:1px solid;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.pdp-accordion details[open] summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
.pdp-accordion details p{padding:0 0 16px;font-size:13px;line-height:1.7;color:var(--muted)}
.pdp-more{max-width:1100px;margin:0 auto;padding:72px var(--gutter) 48px}
.pdp-more h2{margin-bottom:32px;text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.pdp-missing{display:grid;gap:16px;justify-items:center;padding:120px var(--gutter);text-align:center}
.flip-clone{position:fixed;z-index:25;margin:0;max-width:none;object-fit:cover;background:#f2f2f2;pointer-events:none}
html.is-transitioning{pointer-events:none}
html.pdp-boot #maincontent{display:none}

/* Drawer */
.drawer{position:fixed;inset:0 auto 0 0;max-height:none;height:100dvh;max-width:100%;width:540px;margin:0;border:0;padding:28px 32px;background:#fff;color:#171717;z-index:60;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.drawer::-webkit-scrollbar{display:none}
.drawer.drawer-right{inset:0 0 0 auto}
.drawer::backdrop{background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@keyframes drawer-in-left{from{transform:translateX(-100%)}to{transform:none}}
@keyframes drawer-in-right{from{transform:translateX(100%)}to{transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
.drawer[open]{display:block;animation:drawer-in-left .45s cubic-bezier(.22,1,.36,1)}
.drawer.drawer-right[open]{animation-name:drawer-in-right}
.drawer[open]::backdrop{animation:backdrop-in .35s ease-out}
.drawer:not([open]){display:none}
@keyframes drawer-out-left{from{transform:none}to{transform:translateX(-100%)}}
@keyframes drawer-out-right{from{transform:none}to{transform:translateX(100%)}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
.drawer.is-closing{animation:drawer-out-left .3s cubic-bezier(.5,0,.75,0) forwards;pointer-events:none}
.drawer.drawer-right.is-closing{animation-name:drawer-out-right}
.drawer.is-closing::backdrop{animation:backdrop-out .3s ease-in forwards}
@media(prefers-reduced-motion:reduce){.drawer[open],.drawer[open]::backdrop,.drawer.is-closing,.drawer.is-closing::backdrop{animation:none}}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:46px}
.close-drawer{min-height:44px}
.drawer nav{display:flex;flex-direction:column;align-items:flex-start;gap:22px;line-height:1.5}
.drawer nav>a,.drawer summary{font-size:19px;letter-spacing:.025em}
.drawer details{width:100%}
.drawer summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;line-height:1.4}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary:after{content:'+'}
.drawer details[open] summary:after{content:'−'}
.drawer details div{display:grid;gap:14px;padding:22px 20px 5px;justify-items:start}
.drawer details div button{text-align:left}
.drawer .secondary-links{border-top:1px solid var(--rule);padding-top:28px;margin-top:36px;display:grid;gap:18px;justify-items:start}
.drawer form{display:flex;border-bottom:1px solid #111;padding:12px 0;margin-bottom:35px}
.drawer input{min-width:0;flex:1;border:0;background:none;outline:none}
.drawer form button{padding-left:14px}
.search-results{display:grid;gap:20px;line-height:1.5}
.search-results a{display:block;padding:12px 0;border-bottom:1px solid #eee}
.drawer-copy{margin:25px 0;line-height:1.7}
.action-link{display:inline-block;border:1px solid #111;padding:14px 20px;margin-top:20px}
.drawer .action-link{background:none;font:inherit;cursor:pointer;text-align:center}
.drawer select{width:100%;padding:14px;margin:24px 0;background:#fff;border:1px solid #aaa}
.cookie-actions{display:flex;gap:15px}
.cookie-actions button{padding:12px;border:1px solid;margin-top:24px}

/* Drawer: store views */
.notice{padding:12px 0;margin:0 0 18px;border-bottom:1px solid var(--rule);line-height:1.5}
.notice-error{color:#8a1c1c;border-color:#8a1c1c}
.notice-success{border-color:#111}
.results-heading,.section-title{margin:26px 0 12px;padding-bottom:6px;border-bottom:1px solid #111}
.product-row{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid #eee}
.product-row img{width:56px;height:84px;object-fit:cover;background:#f2f2f2}
.product-body{display:grid;gap:6px;min-width:0}
.row-actions{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:4px}
.row-actions button{min-height:32px;text-decoration:underline;text-underline-offset:4px}
.row-actions button:disabled{color:#999;text-decoration:none;cursor:default}
.row-actions.qty span{min-width:22px;text-align:center}
.row-actions.qty button[data-delta]{width:28px;height:28px;border:1px solid #111;text-decoration:none;font-size:16px;line-height:1}
.row-actions .action-link{text-decoration:none}
.line-items{margin-top:-10px}
.totals{margin:24px 0 8px}
.totals div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee}
.totals .grand{border-bottom:1px solid #111;font-size:15px}
.totals dt,.totals dd{margin:0}
.drawer form.stack{display:grid;gap:18px;border:0;padding:0;margin:8px 0 0}
.drawer .stack fieldset{border:0;padding:0;margin:8px 0 0;display:grid;gap:16px;min-width:0}
.drawer .stack legend{padding:0 0 6px;margin-bottom:10px;border-bottom:1px solid #111;width:100%}
.field{display:grid;gap:6px}
.field span{font-size:12px;color:var(--muted)}
.drawer .field input,.drawer .field select{width:100%;margin:0;padding:10px 0;border:0;border-bottom:1px solid #111;background:none;border-radius:0}
.field small{min-height:1em;font-size:12px;color:#8a1c1c}
.form-error{color:#8a1c1c;min-height:1em}
.drawer .stack button[type=submit]{justify-self:start;padding:14px 20px}
.drawer .track{margin-top:36px;border-top:1px solid var(--rule);padding-top:20px}
.drawer .track .track-body{padding-top:12px}
.orders{display:grid;margin-bottom:8px}
.order-link{display:block;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid #eee}

/* Responsive */
@media(max-width:1100px){
  .boutiques-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .newsletter{grid-column:2/4}
}
@media(max-width:767px){
  :root{--gutter:18px;--header-height:56px;--brand-w:155px}
  body{font-size:15px;line-height:1.38}
  .site-header{padding:0 15px}
  .header-left{gap:18px}
  .desktop-label{display:none!important}
  .label-long{display:none}
  .label-short{display:inline}
  .header-right{gap:8px;font-size:12px}
  .section{padding:52px var(--gutter)}
  .hero{height:auto;overflow:visible}
  .hero-media{height:auto;aspect-ratio:4/5}
  .hero-foot{padding:0 var(--gutter) 22px}
  .hero-note{display:none}
  .edit-grid,.edit-grid.rec-grid{grid-template-columns:1fr 1fr;gap:28px 14px}
  .pdp{grid-template-columns:1fr}
  .pdp-media{border-right:0}
  .pdp-info{position:static;padding:24px var(--gutter) 8px}
  .pdp-more{padding:48px var(--gutter) 32px}
  .objects-grid{grid-template-columns:1fr;gap:44px}
  .objects-grid .object:nth-child(2){margin-top:0}
  .notes{padding:72px var(--gutter)}
  .boutiques-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px 18px;font-size:12px}
  .newsletter{grid-column:1/-1}
  .site-footer{padding:28px 16px}
  .footer-grid h2{margin-bottom:16px}
  .footer-bottom{margin-top:40px;flex-direction:column;gap:16px}
  .footer-bottom>button{align-self:flex-start}
  .drawer{width:100%;padding:20px 24px}
  .drawer-head{margin-bottom:30px}
}