/* hazelholm.com — a journal, not a shop. Quiet, warm, little.
   Everything a visitor can reach is English, on purpose. */
:root{
  --paper:#fbf9f5; --ink:#2c2a26; --quiet:#7c7568;
  --line:#e6e0d5; --card:#ffffff; --accent:#7d6a4f;
  --wash:#f5efe4;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --label:12px/1 var(--sans);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font:17px/1.65 var(--serif);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent)}

/* ------------------------------------------------------------------ masthead */
.site-head{max-width:1060px;margin:0 auto;padding:40px 22px 0;text-align:center}
.brand{display:inline-block;font-size:32px;letter-spacing:.14em;text-transform:uppercase;
       text-decoration:none;color:var(--ink)}
.tagline{margin:10px 0 0;color:var(--quiet);font:14px/1.5 var(--sans);letter-spacing:.05em}
.site-nav{margin:22px auto 0;padding:14px 0 0;border-top:1px solid var(--line);
          display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center}
.nav-link{font:var(--label);letter-spacing:.16em;text-transform:uppercase;
          text-decoration:none;color:var(--quiet);padding-bottom:6px;
          border-bottom:2px solid transparent}
.nav-link:hover{color:var(--ink)}
.nav-here{color:var(--ink);border-bottom-color:var(--accent)}

/* -------------------------------------------------------------------- layout */
.wrap{max-width:760px;margin:0 auto;padding:26px 22px 10px}
.wrap-wide{max-width:1060px}
.title{font-size:29px;line-height:1.25;margin:0 0 18px;font-weight:600}
.prose p{margin:0 0 16px}

/* The opening of an index or a section: room to breathe, one column of text
   even when the grid below is three across. */
.lede{max-width:640px;margin:34px auto 40px;text-align:center}
.lede-title{font-size:40px;line-height:1.15;margin:0;font-weight:400;letter-spacing:.01em}
.lede-text{margin-top:18px;color:var(--quiet)}
.lede-text p:last-child{margin-bottom:0}

@media (max-width:640px){
  .lede{margin:24px auto 30px}
  .lede-title{font-size:31px}
}

/* --------------------------------------------------------------- the shelf */
/* The sections, as covers on a shelf. Four across on a wide screen. */
/* Flex, not grid: with one section the card stays a card instead of
   stretching into a banner, and with four it fills the row. */
.shelf{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:0 0 56px}
/* A 180px basis so that FIVE cards fit on one line. Since the journal card
   joined them, the fifth one dropped onto a line of its own.
   5 x 199 plus 4 x 16 of gap is 1059 in a 1060 wide page. */
.shelf-card{flex:1 1 180px;max-width:300px;
            background:var(--card);border:1px solid var(--line);
            border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);
            transition:border-color .15s ease,transform .15s ease}
.shelf-card:hover{border-color:var(--accent);transform:translateY(-2px)}
/* The card thumbnail stays 4:3 although the picture is 2:3: four portrait
   cards in a row would push everything else below the fold. A thumbnail may
   crop, a page opener may not. */
.shelf-frame{display:block;margin:-20px -20px 16px;overflow:hidden;
             border-radius:13px 13px 0 0;aspect-ratio:4/3;background:var(--wash)}
.shelf-frame img{width:100%;height:100%;object-fit:cover}
.shelf-name{display:block;font-size:20px;font-weight:600}
.shelf-blurb{display:block;margin-top:6px;color:var(--quiet);font:14px/1.5 var(--sans)}
.shelf-count{display:block;margin-top:12px;color:var(--accent);
             font:var(--label);letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------------- band rule */
/* A label with a rule running through it, to break the page into courses. */
.band{margin:0 0 20px}
.band-title{display:flex;align-items:center;gap:18px;margin:0 0 26px;
            font:var(--label);letter-spacing:.2em;text-transform:uppercase;
            font-weight:600;color:var(--quiet)}
.band-title::before,.band-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* -------------------------------------------------------------- page cards */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:26px;
       grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card-link{display:block;text-decoration:none;color:var(--ink)}
/* 2:3, the format the pictures are made in. A tighter box would crop the
   corner mark out of the bottom right, and nobody would notice. */
.card-frame{display:block;overflow:hidden;border:1px solid var(--line);border-radius:14px;
            background:var(--card);aspect-ratio:2/3}
.card-frame img{width:100%;height:100%;object-fit:cover;
                transition:transform .3s ease}
.card-link:hover .card-frame img{transform:scale(1.03)}
.card-body{display:block;padding:14px 2px 0}
.card-brand{display:block;color:var(--quiet);font:11px/1 var(--sans);
            letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.card-note{color:var(--accent)}
.card-title{display:block;font-size:17px;line-height:1.4;font-weight:600}
.card-link:hover .card-title{color:var(--accent)}

/* ------------------------------------------------------------ the mosaic */
/* A six column grid. Small is two columns by one row, medium two by two,
   large four by two. Every band adds up to six, so the four bands are:
     large plus two small stacked
     two small stacked, then two medium
     medium, then large
     two small, two small, medium
   Placement is written out per tile rather than left to auto flow: auto flow
   fills left to right and would put the second small tile beside the first
   instead of under it, and the whole point is the stack.

   The picture fills its tile and is cropped. On a 2:3 source a wide tile loses
   the corner mark at the bottom. That is on purpose: the mark exists for the
   Pinterest feed, where nothing else is visible. On our own pages the Amazon
   statement stands in the footer of every page and again on the product page. */
/* The tile itself looks the same in both arrangements: the picture fills it
   and the words sit inside, on a gradient. With tiles of three different
   heights a caption underneath would land at three different places and the
   display would read as a staircase. */
.mosaik .card,.stapel .card{position:relative}
.mosaik .card-link,.stapel .card-link{height:100%}
.mosaik .card-body,.stapel .card-body{position:absolute;left:0;right:0;bottom:0;
     padding:16px 18px;border-radius:0 0 14px 14px;
     background:linear-gradient(to top,rgba(22,20,17,.78) 15%,rgba(22,20,17,0))}
.mosaik .card-title,.stapel .card-title{color:#fff;font-size:16px;
     text-shadow:0 1px 3px rgba(0,0,0,.4);display:-webkit-box;-webkit-line-clamp:2;
     -webkit-box-orient:vertical;overflow:hidden}
.mosaik .card-link:hover .card-title,
.stapel .card-link:hover .card-title{color:#fff;text-decoration:underline}
.mosaik .card-brand,.stapel .card-brand{color:rgba(255,255,255,.82)}
.mosaik .card-note,.stapel .card-note{color:#fff}

.mosaik .cards{grid-template-columns:repeat(6,1fr);grid-auto-rows:230px;gap:20px}
.mosaik .card-frame{height:100%;aspect-ratio:auto;border-radius:14px}
.mosaik .card-frame img{height:100%}

.mosaik-fest .card:nth-child(1){grid-column:1/5;grid-row:1/3}
.mosaik-fest .card:nth-child(2){grid-column:5/7;grid-row:1/2}
.mosaik-fest .card:nth-child(3){grid-column:5/7;grid-row:2/3}
.mosaik-fest .card:nth-child(4){grid-column:1/3;grid-row:3/4}
.mosaik-fest .card:nth-child(5){grid-column:1/3;grid-row:4/5}
.mosaik-fest .card:nth-child(6){grid-column:3/5;grid-row:3/5}
.mosaik-fest .card:nth-child(7){grid-column:5/7;grid-row:3/5}
.mosaik-fest .card:nth-child(8){grid-column:1/3;grid-row:5/7}
.mosaik-fest .card:nth-child(9){grid-column:3/7;grid-row:5/7}
.mosaik-fest .card:nth-child(10){grid-column:1/3;grid-row:7/8}
.mosaik-fest .card:nth-child(11){grid-column:1/3;grid-row:8/9}
.mosaik-fest .card:nth-child(12){grid-column:3/5;grid-row:7/8}
.mosaik-fest .card:nth-child(13){grid-column:3/5;grid-row:8/9}
.mosaik-fest .card:nth-child(14){grid-column:5/7;grid-row:7/9}

/* ------------------------------------------------- the stack, for lists */
/* The other pages hold anywhere from seven to twenty five entries, and the
   fixed pattern of the front page would leave a hole at the end of most of
   them. Same idea, different construction: three columns of equal width, tiles
   of two different heights, and dense packing to close what gaps appear.

   Built as a grid, not with CSS columns. Columns were tried first and would
   also work; the grid wins because it is the machinery the front page already
   uses, so there is one way of laying tiles out on this site and not two.
   (A note for whoever reads the history: the columns version looked broken in
   testing, with a screen of emptiness above the tiles. That was a picture that
   had not loaded yet, not the layout. Nothing about columns was proven wrong.)

   ⚠ The cycle is five, not four. With four it lined up with the three columns,
     so the top of every column landed on the same phase and three identical
     tiles stood side by side, which is what this is meant to avoid. */
.stapel .cards{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;
     gap:24px;grid-auto-flow:dense}
.stapel .card-frame{height:100%;aspect-ratio:auto;border-radius:14px}
.stapel .card-frame img{height:100%}
.stapel .card{grid-row:span 2}
.stapel .card:nth-child(5n+1),
.stapel .card:nth-child(5n+3){grid-row:span 3}
@media (max-width:900px){ .stapel .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .stapel .cards{grid-template-columns:1fr;grid-auto-rows:150px}
  .stapel .card{grid-row:span 2}
}

/* Narrow screens: the pattern is meaningless below two columns, so the tiles
   go back to being a plain list of equal cards. */
@media (max-width:900px){
  .mosaik .cards{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}
  .mosaik-fest .card:nth-child(n){grid-column:auto;grid-row:auto}
  .mosaik-fest .card:nth-child(6n+1){grid-column:1/3;grid-row:span 2}
}
@media (max-width:560px){
  .mosaik .cards{grid-template-columns:1fr;grid-auto-rows:240px}
  .mosaik-fest .card:nth-child(n){grid-column:1/2;grid-row:span 1}
  .mosaik-fest .card:nth-child(6n+1){grid-column:1/2;grid-row:span 2}
}

/* A secondary block: the journal pieces that belong to a section, shown under
   its own rule and in the plain grid, so that the eye reads them as a different
   kind of thing than the products above. */
.beiwerk{margin-top:56px}
.beiwerk .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}

.empty{color:var(--quiet);font:15px/1.6 var(--sans);text-align:center;padding:40px 0 60px}

/* ------------------------------------------------------------- journal note */
.kicker{margin:0 0 10px;color:var(--quiet);font:11px/1 var(--sans);
        letter-spacing:.18em;text-transform:uppercase}
.note .title{font-size:32px;font-weight:400;line-height:1.2;margin:0 0 22px}
.note-image{border:1px solid var(--line);border-radius:16px;max-width:460px;
            margin:0 auto 30px}
.rule-title{display:flex;align-items:center;gap:16px;margin:36px 0 14px;
            font:var(--label);letter-spacing:.18em;text-transform:uppercase;
            font-weight:600;color:var(--quiet)}
.rule-title::after{content:"";flex:1;height:1px;background:var(--line)}
.related{list-style:none;margin:0;padding:0}
.related li{padding:9px 0;border-bottom:1px solid var(--line)}
.related a{text-decoration:none}
.related a:hover{text-decoration:underline}

/* ------------------------------------------------------------- product page */
.product .brand-line{margin:-8px 0 18px;color:var(--quiet);
      font:13px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase}
/* The pictures are 2:3. At the full width of the reading column that is
   over a thousand pixels tall, and the article starts below the fold. */
.hero{border:1px solid var(--line);border-radius:16px;background:#fff;
      max-width:520px;margin:0 auto 26px}
.buy{margin:24px 0;text-align:center}
.button{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
        padding:14px 30px;border-radius:999px;font:16px/1 var(--sans);font-weight:600}
.buy-note{display:block;margin-top:8px;color:var(--quiet);font:13px/1.5 var(--sans)}
.specs{color:var(--quiet);font:14px/1.6 var(--sans)}
.points li{margin-bottom:8px}
.byline{color:var(--quiet);font:14px/1.6 var(--sans);font-style:italic}

.notice{background:var(--card);border:1px solid var(--line);border-radius:16px;
        padding:30px;text-align:center;color:var(--quiet)}
.disclosure{background:var(--wash);border:1px solid #e8dcc7;border-radius:12px;
            padding:14px 16px;color:#6a5f4a;font:14px/1.6 var(--sans);margin-top:30px}

.variants{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px;
          grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.variant{background:var(--card);border:1px solid var(--line);border-radius:12px;
         padding:12px;text-align:center}
.variant img{border-radius:8px;margin-bottom:8px}
.variant-name{display:block;font:13px/1.4 var(--sans);color:var(--quiet)}
.variant-link{display:inline-block;margin-top:8px;font:13px/1 var(--sans);
              font-weight:600;color:var(--accent);text-decoration:none;
              border-bottom:1px solid var(--accent)}

/* -------------------------------------------------------------------- foot */
.site-foot{max-width:760px;margin:44px auto 60px;padding:22px;text-align:center;
           color:var(--quiet);font:14px/1.7 var(--sans);border-top:1px solid var(--line)}
.site-foot a{color:var(--quiet)}
.foot-small{font-size:13px}